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.