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

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

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

B8bc2731885aee7353bb0f8515d1c213?s=128

Keisuke Inoue

May 31, 2017
Tweet

Transcript

  1. What is Google Maps API? (and how to use GPS

    data) 静岡⼤学(Shizuoka University) 総合科学技術研究科 情報学専攻(Informatics) 井上佳祐(Keisuke Inoue)
  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
  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
  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
  5. Google Maps API • Example Show map Show marker Show

    circle Draw line and Show route 5
  6. Google Maps API (how to Show map) 6

  7. Google Maps API (how to Show map) • Head element

    <head> <meta charset="utf-8"> <title>Title</title> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } #map { height: 94%; } </style> <script src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script> </head> Important! 7
  8. Google Maps API (how to Show map) • Body element(Base

    Code) <body> <div> <strong>Sample</strong> </div> <div id="map"></div> <script type="text/javascript"> var latlng = new google.maps.LatLng(34.7245225, 137.7177968); var options = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById('map'), options); </script> </body> Shizuoka University Longitude Latitude 8
  9. Google Maps API (how to add new object) • Body

    element(Base Code) <body> <div> <strong>Sample</strong> </div> <div id="map"></div> <script type="text/javascript"> var latlng = new google.maps.LatLng(34.7245225, 137.7177968); var options = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById('map'), options); // Add code that I introduce next page in following </script> </body> 9
  10. Google Maps API (how to Show marker on map) 10

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

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

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

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

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

    Add this to Base Code. <script type="text/javascript"> ・・・ var map = new google.maps.Map(document.getElementById('map'), options); var popCircle = new google.maps.Circle({ map: map, center: latlng_mid, radius: 300 }); </script> Add 15
  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
  17. Measurable by GPS • Latitude • Longitude • Altitude •

    Time 17
  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
  19. Get GPS data (.gpx file) from “やまやまGPS” Tap Tap 19

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

    the top 20
  21. Get GPS data (.gpx file) from “やまやまGPS” Tap Input your

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

  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
  24. Detail .gpx file <metadata> <bound minlat minlon maxlat maxlon/> </metadata>

    <wpt lat=“” lon=“”> //Waypoint data <ele></ele> <time></time> <name></name> </wpt> ・・・ <trk> <trkseg> //Tracking data <trkpt lat=“” lon=“”> <ele></ele> <time></time> </trkpt> ・・・ </trkseg> </trk> 24
  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
  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
  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
  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
  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
  30. Result run 30

  31. Demo 31

  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
  33. Reference • Samples Code • https://github.com/keisuke-oni/geoinfo2017 • Google Maps API

    Documents • https://developers.google.com/maps/documentation/javascript/tut orial • Comments and Questions • inoue.keisuke.17@shizuoka.ac.jp 33
  34. Thank you for your attention! 34