En exempelapplikation i Leaflet

Vi ska nu titta på hur man kan tänkas skapa en liten applikation kring Leaflet. Vi kommer att visa hållplatser på en karta och lägga till funktionalitet så att vi kan se information om de olika hållplatserna. Vi kommer att använda oss av Öppen data som hämtats ifrån Trafiklab. Då vi inte riktigt har gått igenom hur man hämtar denna data, så kommer vi att fejka till det lite. Men vi återkommer till flera aktiviteter baserade kring data hämtad ifrån Trafiklab. Om du vill läsa dessa redan nu gå till "Trafiklab".

Vi ska bygga upp vår applikation i steg. Vi kommer att använda Codepen-exempel, då dessa ser bra ut och är lätta att lägga in i Webbling. Dock så vill man förstås skriva lite annorlunda om man gör en "riktig" applikation. I slutet kommer vi att länka till den färdiga applikationen, så som den kan köras fristående.

Steg 1 - grunder

Vi börjar med att skapa en grundstruktur för vår sida. Vi lägger till jQuery och Leaflet, då vi kommer att behöva dessa för vår app. HTML:en kan då bli att se ut så här:

See the Pen xZqpXz by Patrik Grip-Jansson (@PGJ) on CodePen.

Vi lägger även till lite basal CSS:

See the Pen xZqpXz by Patrik Grip-Jansson (@PGJ) on CodePen.

I CSS:en så startar vi med en minimal reset som gör att vi ska ha ungefär samma utgångsläge på alla webbläsare. Vi tar bort alla marginaler, all utfyllnad och ser till att vi använder oss av den "vettiga" modellen för boxar.

Då det är tänkt att det mesta i appen ska vara centrerat, så sätter vi att titeln i vår h1 ska vara centrerarad.

Det intressantaste vi gör i CSS är det som återfinns i #karta. Vi sätter höjden till 75vh. Det vill säga cirka 75 % av den skärmens höjd. Se "Måttenheter i CSS", om du glömt hur dessa fungerar. Vi sätter samma proportioner även för höjden. Vi använder oss av margin: 0 auto; för att centrera vår kart-div. Slutligen sätter vi en kant runt om kartan.

Titta på "Result"-fliken för att se vad vi har hitintills.

Steg 2 - Lägga till karta på prov

För att se om kartan fungerar bra ska vi lägga till en testversion av kartan. Vi kör helt enkelt som i vårt tidigare exempel och visar en karta centrerad kring Soltorgsgymnasiet.

Koden blir att se ut så här:

See the Pen Qypaxd by Patrik Grip-Jansson (@PGJ) on CodePen.

Det ser ju helt acceptabelt ut.

Steg 3 - Läsa in data

Nu behöver vi en datakälla...

Eftersom många API:er har gränser satt för hur ofta man får läs in data ifrån dem, kan det vara en bra idé att på experimentstadiet helt enkelt läsa ner en data mängd ifrån dem och spara denna lokalt. Under testandet så använder du sen denna undansparade data istället för att hämta hem den gång på gång. Det duger ju gott med denna typ av lagrad data medan vi håller på att slå fast hur layout och likande ska se ut.

För att läsa in brottsstatistik ifrån de senaste 24h, kan du göra följande anrop i en webbläsare:

http://brottsplatskartan.se/api.php?action=getEvents&period=1440