innføring i google maps apiet
DESCRIPTION
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 GonzalesTRANSCRIPT
PROSJEKT: BYSYKKELGoogle Maps + JSON = Sant
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)
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
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 = {zoom: 2,center: new google.maps.LatLng(0, 0),mapTypeId: google.maps.MapTypeId.ROADMAP
};map = new google.maps.Map(
document.getElementById('map_canvas'), mapOptions);
Markers
Markers
var marker = new google.maps.Marker({position: new google.maps.LatLng(
60.393777,
5.324708),
title: "Bergen",
map: map
});
JSON – Bergen Dokart
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)
Ett JSON-objekt
• Ett JSON-objekt lagrer informasjon om én ting, for eksempel en person:– {name: “Peter”, mobile: 45454545…osv.}
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}
]}
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
JSON vs JSONP
JSON:
{
"Name": "Foo",
"Id": 1234,
"Rank": 7
}
JSONP:
callback(
{"Name": "Foo", "Id": 1234, "Rank": 7
}
);
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'
});
Dokart - JSONP - Resultat
callback({"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});
Markers
function 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
});}
}
MarkerImage
MarkerImage
var 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);
MarkerCluster
MarkerCluster
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></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);
InfoWindow
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
});
InfoWindow (2/4)
google.maps.event.addListenerOnce(
infowindow,
"domready",
function () {
panorama = new
google.maps.StreetViewPanorama(streetview);
panorama.bindTo("position", pin);
});
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]);}
}
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 }, {…}, {…}]
InfoWindow (3/4)
function newMarker(data) {var marker = new google.maps.Marker({…});
google.maps.event.addListener(marker, "click", function () {
openInfoWindow(marker);}
);}
InfoWindow (4/4)
function openInfoWindow(m) {
title.innerHTML = "Sykkelstativ";
pin.set("position", m.getPosition());
infowindow.open(map, m);
}
Heatmap
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"]
})
}
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);
Prosjekt: Bysykkel - Alt kombinert
Referanse
• Google (2013): Google Maps Javascript API V3 Reference, https://developers.google.com/maps/documentation/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/docs/reference.html
• W3C (2013): Javascript/JSON, http://www.w3schools.com/json/default.asp