地理情報科学特論 GoogleMapsAPIとGPSログの活用

2017/05/31の地理情報科学特論で発表した資料です。

Transcript

1. What is Google Maps API?
   (and how to use GPS data)
   井上佳祐(Keisuke Inoue)
   

   View Slide

2. Agenda
   • About Google Map
   • About Google Maps API
   • About GPS
   • How to get GPS data (.gpx file) from “やまやまGPS”
   • About .gpx file
   • Input .gpx file to Google Maps API
   • Wadachi
   2
   

   View Slide

3. Google Map
   • Google Map is online map service provided by Google inc.
   • We can search shop, restaurant and building.
   • This tell us the route to the place where we donʻt know the way.
   3
   

   View Slide

4. Google Maps API
   • Google Maps API is supported by some platforms.
   • e.g. iOS(Objective-C, Swift), Android(Java), Web Service(JavaScript)
   • This time we will use the API using JavaScript.
   • We can embed a map very easily on my web page.
   • We can create map own favorite maps, including displaying
   markers ,lines and circle on the map, and it is very useful.
   My web
   page
   API Google
   Map
   Structure
   ① Want map ② Request map data
   ③ Response map data
   ④ Show map 4
   

   View Slide

5. Google Maps API
   • Example
   Show map Show marker
   Show circle
   Draw line
   and
   Show route
   5
   

   View Slide

6. Google Maps API (how to Show map)
   6
   

   View Slide

7. Google Maps API (how to Show map)
   • Head element
   
   
   Title
   <br/>html, body {<br/>width: 100%;<br/>height: 100%;<br/>margin: 0;<br/>padding: 0;<br/>}<br/>#map {<br/>height: 94%;<br/>}<br/>
   
   
   Important!
   7
   

   View Slide

8. Google Maps API (how to Show map)
   • Body element(Base Code)
   
   
   Sample
   
   
   <br/>var latlng = new google.maps.LatLng(34.7245225, 137.7177968);<br/>var options = {<br/>zoom: 15,<br/>center: latlng,<br/>mapTypeId: google.maps.MapTypeId.ROADMAP<br/>}<br/>var map = new google.maps.Map(document.getElementById('map'), options);<br/>
   
   Shizuoka University
   Longitude Latitude
   8
   

   View Slide

9. Google Maps API (how to add new object)
   • Body element(Base Code)
   
   
   Sample
   
   
   <br/>var latlng = new google.maps.LatLng(34.7245225, 137.7177968);<br/>var options = {<br/>zoom: 15,<br/>center: latlng,<br/>mapTypeId: google.maps.MapTypeId.ROADMAP<br/>}<br/>var map = new google.maps.Map(document.getElementById('map'), options);<br/>// Add code that I introduce next page in following<br/>
   9
   

   View Slide

10. Google Maps API (how to Show marker on map)
    10
    

    View Slide

11. Google Maps API (how to Show marker on map)
    • Add this to Base Code.
    <br/>・・・<br/>var map = new google.maps.Map(document.getElementById('map'), options);<br/>var latlng = new google.maps.LatLng(34.7245225, 137.7177968);<br/>var marker = new google.maps.Marker({<br/>position: latlng,<br/>map: map<br/>});<br/>var latlng_castle = new google.maps.LatLng(34.7117718, 137.7248914);<br/>var marker_castle = new google.maps.Marker({<br/>position: latlng_castle,<br/>map: map<br/>});<br/>
    Add
    11
    

    View Slide

12. Google Maps API (how to Show line on map)
    12
    

    View Slide

13. Google Maps API (how to Show line on map)
    • Add this to Base Code.
    <br/>・・・<br/>var map = new google.maps.Map(document.getElementById('map'), options);<br/>latlng = new google.maps.LatLng(34.7245225, 137.7177968);<br/>latlng_catsle = new google.maps.LatLng(34.7117718, 137.7248914);<br/>var points = [<br/>latlng,<br/>latlng_catsle<br/>];<br/>var line = new google.maps.Polyline({<br/>path: points,<br/>map: map<br/>});<br/>
    Add
    13
    

    View Slide

14. Google Maps API (how to Show circle on map)
    14
    

    View Slide

15. Google Maps API (how to Show circle on map)
    • Add this to Base Code.
    <br/>・・・<br/>var map = new google.maps.Map(document.getElementById('map'), options);<br/>var popCircle = new google.maps.Circle({<br/>map: map,<br/>center: latlng_mid,<br/>radius: 300<br/>});<br/>
    Add
    15
    

    View Slide

16. GPS
    • GPS stands for ”Global Positioning System”.
    • GPS is supplied by U.S. forces.
    • Russia is using an original satellite, such GPS satellite.
    It is called GLONAS.
    • Japan is launching a satellite to aid GPS.
    It is called QZSS, Common name is “Michibiki（みちびき）”
    • GPS measures the position on the earth using the difference
    in distance from three or more satellites.
    16
    

    View Slide

17. Measurable by GPS
    • Latitude
    • Longitude
    • Altitude
    • Time
    17
    

    View Slide

18. Get GPS data (.gpx file) from “やまやまGPS”
    • GPS track App stored GPS data(.gpx file) in your smartphone.
    • We have to transfer “.gpx file” to PC.
    18
    

    View Slide

19. Get GPS data (.gpx file) from “やまやまGPS”
    Tap
    Tap
    19
    

    View Slide

20. Get GPS data (.gpx file) from “やまやまGPS”
    Tap
    Swipe to
    the top
    20
    

    View Slide

21. Get GPS data (.gpx file) from “やまやまGPS”
    Tap
    Input your
    E-Mail
    Tap
    21
    

    View Slide

22. Get GPS data (.gpx file) from “やまやまGPS”
    Tap
    Tap
    22
    

    View Slide

23. Open .gpx file
    • You can open .gpx file by text editor, e.g. notepad, TeraPad.
    • .gpx file is based on XML file format.
    23
    

    View Slide

24. Detail .gpx file
    
    
    
    
    //Waypoint data
    
    
    
    
    ・・・
    
    
    //Tracking data
    
    
    
    
    ・・・
    
    
    24
    

    View Slide

25. Detail .gpx file
    • wpt : WayPoint
    • trkpt : the point on the way that we walked
    • lat : Latitude
    • lon : Longitude
    • ele : Altitude
    • time : Time which was recorded and added
    25
    

    View Slide

26. Input .gpx file to Google Maps API
    • To read a file into JavaScript, use the FileReader() object.
    function gpx_load(){
    var file = document.getElementById("filePicker").files[0];
    var reader = new FileReader();
    reader.addEventListener('load', parseXML, false);
    reader.readAsText(file);
    function parseXML(e){
    ・・・
    }
    }
    26
    

    View Slide

27. Input .gpx file to Google Maps API
    • To read .gpx files with JavaScript, you need to be able to do
    DOM manipulation with an XML parser.
    function parseXML(e){
    'use strict';
    var xml = e.target.result;
    var parser = new DOMParser();
    var dom = parser.parseFromString(xml, 'text/xml');
    ・・・
    }
    27
    

    View Slide

28. Processing and show Waypoint with Marker
    var wpt = dom.getElementsByTagName('wpt');
    for (var i = 0; i < wpt.length; i++) {
    var lat_wpt = wpt[i].getAttribute('lat');
    var lon_wpt = wpt[i].getAttribute('lon');
    var latlng_wpt = new google.maps.LatLng(lat_wpt, lon_wpt);
    var marker_wpt = new google.maps.Marker({
    position: latlng_wpt,
    map: map
    });
    }
    28
    

    View Slide

29. Processing and show TrackPoint with Line
    var trkpt = dom.getElementsByTagName('trkpt');
    var points = [];
    for (var i = 0; i < trkpt.length; i++) {
    var lat_trkpt = trkpt[i].getAttribute('lat');
    var lon_trkpt = trkpt[i].getAttribute('lon');
    var p = new google.maps.LatLng(lat_trkpt, lon_trkpt);
    points.push(p);
    }
    var line = new google.maps.Polyline({
    path: points,
    map: map
    });
    29
    

    View Slide

30. Result run
    30
    

    View Slide

31. Demo
    31
    

    View Slide

32. Wadachi
    • Wadachi is GPS log utilization tool.
    • This automatically create a map to visualize the GPS log.
    Letʻs use this if you are in trouble creating a map!
    http://wadachi.cyclekikou.net
    32
    

    View Slide

33. Reference
    • Samples Code
    • https://github.com/keisuke-oni/geoinfo2017
    • Google Maps API Documents
    • https://developers.google.com/maps/documentation/javascript/tut
    orial
    33
    

    View Slide

34. Thank you for your attention!
    34
    

    View Slide