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