Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Google Maps + JSON = SantPROSJEKT: BYSYKKEL
Hva er Oslo Bysykkel?• Oslo Bysykkel er et samarbeid mellom  Clear Channel Norway AS og Oslo  Kommune• Bysykkelordningen e...
Bakgrunn for prosjektet• Jeg kom alt for ofte til et tomt stativ• Ville finne ut hvor og når det var mulig å få  tak i en ...
Heatmap: Oslo
Sykkelstativ: Oslo
OK, men hva er verdien?
Google Maps Workshop
Google Maps
Google Maps
Google Maps<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>mapOptions =...
Markers
Markersvar marker =   new google.maps.Marker({   position: new google.maps.LatLng(        60.393777,        5.324708),   t...
JSON – Bergen Dokart
Hva er JSON?• JSON (Javascript Object Notation) er  syntaks (kode) for å lagre og utveksle  informasjon.• Nettjenester ret...
Ett JSON-objekt• Ett JSON-objekt lagrer informasjon om én  ting, for eksempel en person:  – {name: “Peter”, mobile: 454545...
En JSON-objektliste• En JSON-objektliste har som hensikt å  lagre mange JSON-objekter sammen:  {personer:[     {name: “Pet...
JSONP• Vanlig feilmelding:  XMLHttpRequest cannot load  http://api.citybik.es/bysykkel.json. Origin  http://dittdomene.com...
JSON vs JSONPJSON:                JSONP:{                    callback(    "Name": "Foo",      {    "Id": 1234,            ...
jQuery - JSONP - GET<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js?ve...
Dokart - JSONP - Resultatcallback(    {"entries":[       {"pissoir_only":"NULL",            "adresse":"Rådhusgaten 10",   ...
Markersfunction hentToaletter(response) {   entries = response["entries"];   for(var item in entries) {        var marker ...
MarkerImage
MarkerImagevar markerImage = {   url:        "http://icons.iconarchive.com/icons/rokey/        smooth/32/toilet-paper-icon...
MarkerCluster
MarkerCluster<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerc"><...
InfoWindow
InfoWindow (1/4)var pin = new google.maps.MVCObject();var title = document.createElement("DIV");var streetview = document....
InfoWindow (2/4)google.maps.event.addListenerOnce(    infowindow,    "domready",    function () {        panorama = new   ...
Hente dataene fra citybik.es$.ajax({    type: "GET",    url: "http://api.citybik.es/bysykkel.json",    dataType: "jsonp", ...
Citybik.es - Resultat[{       "name": "01-Middelthunsgate (vis-a-vis nr. 21, retning Kirkeveien)",       "idx": 0,       "...
InfoWindow (3/4)function newMarker(data) {   var marker = new google.maps.Marker({…});    google.maps.event.addListener(  ...
InfoWindow (4/4)function openInfoWindow(m) {   title.innerHTML = "Sykkelstativ";   pin.set("position", m.getPosition());  ...
Heatmap
Heatmap (1/2)var racks = [];for (var i = 0; i < response.length; i++) {    racks.push({        location: new google.maps.L...
Heatmap (2/2)heatmap = new google.maps.visualization.HeatmapLayer({     data: racks,     radius: 30,     gradient: [      ...
Prosjekt: Bysykkel - Alt kombinert
Referanse• Google (2013): Google Maps Javascript API V3  Reference,  https://developers.google.com/maps/documentatio  n/ja...
Upcoming SlideShare
Loading in …5
×

Innføring i Google Maps APIet

En gjesteforelesning jeg holdt i E-business faget på Norges IT høgskole. Viste eksempler og kode for å ta i bruk Google Maps APIet og et par andre APIer. I tillegg viste jeg hvordan studentene kan hente ned JSON data fra forskjellig kilder for å plotte data dynamisk i kartet.

Presentasjonen er utarbeidet i samarbeid med Rolando Gonzales

  • Be the first to comment

Innføring i Google Maps APIet

  1. 1. Google Maps + JSON = SantPROSJEKT: BYSYKKEL
  2. 2. Hva er Oslo Bysykkel?• Oslo Bysykkel er et samarbeid mellom Clear Channel Norway AS og Oslo Kommune• Bysykkelordningen er reklamefinansiert• Ordningen startet i 2003. Den gang ble det lånt 284.561 sykler. I 2012 var tallet 1.017.015. Osloby.no (2012) & bysykler.no (2012)
  3. 3. Bakgrunn for prosjektet• Jeg kom alt for ofte til et tomt stativ• Ville finne ut hvor og når det var mulig å få tak i en sykkel• Hentet ned data fra Bysykkel og YR• Brukte det til å finne ut når det var statistisk sannsynlig å finne en ledig sykkel• Begynte å leke med Google Maps
  4. 4. Heatmap: Oslo
  5. 5. Sykkelstativ: Oslo
  6. 6. OK, men hva er verdien?
  7. 7. Google Maps Workshop
  8. 8. Google Maps
  9. 9. Google Maps
  10. 10. Google Maps<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>mapOptions = { zoom: 2, center: new google.maps.LatLng(0, 0), mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map( document.getElementById(map_canvas), mapOptions);
  11. 11. Markers
  12. 12. Markersvar marker = new google.maps.Marker({ position: new google.maps.LatLng( 60.393777, 5.324708), title: "Bergen", map: map });
  13. 13. JSON – Bergen Dokart
  14. 14. Hva er JSON?• JSON (Javascript Object Notation) er syntaks (kode) for å lagre og utveksle informasjon.• Nettjenester returnerer gjerne både XML og JSON.(W3C, 2013)
  15. 15. Ett JSON-objekt• Ett JSON-objekt lagrer informasjon om én ting, for eksempel en person: – {name: “Peter”, mobile: 45454545…osv.}
  16. 16. En JSON-objektliste• En JSON-objektliste har som hensikt å lagre mange JSON-objekter sammen: {personer:[ {name: “Peter”, mobile: 45454545}, {name: “Julie”, mobile: 45885454}, {name: “Lisa”, mobile: 45956475} ]}
  17. 17. JSONP• Vanlig feilmelding: XMLHttpRequest cannot load http://api.citybik.es/bysykkel.json. Origin http://dittdomene.com is not allowed by Access-Control-Allow-Origin.• Løsning: JSONP - JSON with Padding• En kommunikasjonsteknikk for å be om data fra en server på et annet domene, noe som er forbudt av typiske nettlesere
  18. 18. JSON vs JSONPJSON: JSONP:{ callback( "Name": "Foo", { "Id": 1234, "Name": "Foo", "Id": 1234, "Rank": 7 "Rank": 7} } );
  19. 19. jQuery - JSONP - GET<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js?ver=1.9.1"></script>$.ajax({ type: GET, url: http://hotell.difi.no/api/jsonp/bergen/dokart, dataType: jsonp, success: hentToaletter, jsonpCallback: callback});
  20. 20. Dokart - JSONP - Resultatcallback( {"entries":[ {"pissoir_only":"NULL", "adresse":"Rådhusgaten 10", "rullestol":"1", "id":"1", "tid_lordag":"NULL", "plassering":"RÅDHUSET", "longitude":"5.32812829999999", "latitude":"60.3920969"}, {..}], "page":1,"pages":1,"posts":11});
  21. 21. Markersfunction hentToaletter(response) { entries = response["entries"]; for(var item in entries) { var marker = new google.maps.Marker({ position: new google.maps.LatLng( entries[item]["latitude"], entries[item]["longitude"]), title: entries[item]["plassering"], map: map }); }}
  22. 22. MarkerImage
  23. 23. MarkerImagevar markerImage = { url: "http://icons.iconarchive.com/icons/rokey/ smooth/32/toilet-paper-icon.png", size: new google.maps.Size(32, 32), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(16, 16), scaledSize: new google.maps.Size(32, 32)};marker.setIcon(markerImage);
  24. 24. MarkerCluster
  25. 25. MarkerCluster<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerc"></script>var markers[];var marker = new google.maps.Marker({…});markers.push(marker);var mcOptions = { gridSize: 40, maxZoom: 15 };var mc = new MarkerClusterer(map, markers, mcOptions);
  26. 26. InfoWindow
  27. 27. InfoWindow (1/4)var pin = new google.maps.MVCObject();var title = document.createElement("DIV");var streetview = document.createElement("DIV");var content = document.createElement("DIV");content.appendChild(title);content.appendChild(streetview);var infowindow = new google.maps.InfoWindow({ content: content});
  28. 28. InfoWindow (2/4)google.maps.event.addListenerOnce( infowindow, "domready", function () { panorama = new google.maps.StreetViewPanorama(streetview); panorama.bindTo("position", pin);});
  29. 29. Hente dataene fra citybik.es$.ajax({ type: "GET", url: "http://api.citybik.es/bysykkel.json", dataType: "jsonp", success: getRacks});function getRacks(response) { for (var i = 0; i < response.length; i++) { newMarker(response[i]); }}
  30. 30. Citybik.es - Resultat[{ "name": "01-Middelthunsgate (vis-a-vis nr. 21, retning Kirkeveien)", "idx": 0, "timestamp": "2013-04-05T13:01:03.425838", "number": 1, "free": 6, "bikes": 12, "coordinates": "", "online": 1, "lat": 59927630, "lng": 10710070, "id": 0 }, {…}, {…}]
  31. 31. InfoWindow (3/4)function newMarker(data) { var marker = new google.maps.Marker({…}); google.maps.event.addListener( marker, "click", function () { openInfoWindow(marker); } );}
  32. 32. InfoWindow (4/4)function openInfoWindow(m) { title.innerHTML = "Sykkelstativ"; pin.set("position", m.getPosition()); infowindow.open(map, m);}
  33. 33. Heatmap
  34. 34. Heatmap (1/2)var racks = [];for (var i = 0; i < response.length; i++) { racks.push({ location: new google.maps.LatLng( response[i]["lat"] / 1E6, response[i]["lng"] / 1E6), weight: response[i]["bikes"] })}
  35. 35. Heatmap (2/2)heatmap = new google.maps.visualization.HeatmapLayer({ data: racks, radius: 30, gradient: [ rgba(0, 0, 0, 0), rgba(0, 0, 255, 1), rgba(0, 255, 0, 1), rgba(255, 0, 0, 1)], opacity: 0.5 });heatmap.setMap(map);
  36. 36. Prosjekt: Bysykkel - Alt kombinert
  37. 37. Referanse• Google (2013): Google Maps Javascript API V3 Reference, https://developers.google.com/maps/documentatio n/javascript/reference• jQuery (2013): jQuery API, http://api.jquery.com/• MarkerCluster (2013): MarkerCluster for Google Maps v3 , http://google-maps-utility-library- v3.googlecode.com/svn/trunk/markerclusterer/doc s/reference.html• W3C (2013): Javascript/JSON, http://www.w3schools.com/json/default.asp

×