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

1. Google Maps + JSON = Sant
PROSJEKT: BYSYKKEL

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. 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. Heatmap: Oslo

5. Sykkelstativ: Oslo

6. OK, men hva er verdien?

7. Google Maps Workshop

8. Google Maps

9. Google Maps

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. Markers

12. Markers
var marker =
new google.maps.Marker({
position: new google.maps.LatLng(
60.393777,
5.324708),
title: "Bergen",
map: map
});

13. JSON – Bergen Dokart

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. Ett JSON-objekt
• Ett JSON-objekt lagrer informasjon om én
ting, for eksempel en person:
– {name: “Peter”, mobile: 45454545…osv.}

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. 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. JSON vs JSONP
JSON: JSONP:
{ callback(
"Name": "Foo", {
"Id": 1234, "Name": "Foo",
"Id": 1234,
"Rank": 7
"Rank": 7
}
}
);

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. 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});

21. 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
});
}
}

22. MarkerImage

23. 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);

24. MarkerCluster

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. InfoWindow

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. InfoWindow (2/4)
google.maps.event.addListenerOnce(
infowindow,
"domready",
function () {
panorama = new
google.maps.StreetViewPanorama(streetview);
panorama.bindTo("position", pin);
});

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. 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. InfoWindow (3/4)
function newMarker(data) {
var marker = new google.maps.Marker({…});
google.maps.event.addListener(
marker,
"click",
function () {
openInfoWindow(marker);
}
);
}

32. InfoWindow (4/4)
function openInfoWindow(m) {
title.innerHTML = "Sykkelstativ";
pin.set("position", m.getPosition());
infowindow.open(map, m);
}

33. Heatmap

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. 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. Prosjekt: Bysykkel - Alt kombinert

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