En exempelapplikation i Leaflet

Vi ska nu titta på hur man kan tänkas skapa en liten applikation kring Leaflet. Vi kommer att hämta data ifrån Örebros projekt med Öppen kartdata. Här finns en hel del trevlig information att tillgå. Vi ska titta på hur man kan läsa ut intresseplatser i Örebros kommun och visa upp dessa på en karta. Även om du inte kommer ifrån Örebro, så är detta en intressant uppsättning data som passar utmärkt till demo syfte. En fördel med Örebros data är att man supportar CORS och att det därför går att hämta ned data ifrån klienbaserade webbapplikationer.

Vi ska bygga upp vår applikation i steg. Vi kommer att utföra sakerna ungefär i den ordning och med det upplägg man skulle haft om man gjort detta på "riktigt". Förhoppningsvis blir det lättare att hänga med då. Det är mycket kod som ska skrivas nu!

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.

En grund att stå på

Vi börjar med att skapa en grundstruktur för vår sida.

HTML

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.

Det finns nog inget som förtjänar att kommenteras i den lilla HTML-snutten.

CSS

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 får ungefär samma grundutseende i 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 bredden. 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.

Lägga till en 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 som visade en karta centrerad kring Soltorgsgymnasiet. Vi ändrar dock så att koordinaterna är centrerade på Örebro.

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 och vi får automatisk den grundläggande navigerings-funktionalitet som man förväntar sig av en kartapplikation.

Första försök med att läsa in data

För att gå vidare behöver vi koppla data till vår karta.

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 jobba lite annorlunda på experimentstadie. Man tar helt enkelt och läser ner en datamängd ifrån källan 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.

Experimentdata

Vi hämtade ned lite experimentdata ifrån http://data.karta.orebro.se/api/v1/layers/1?srs=EPSG:4326. Därefter snyggade vi upp datan genom att köra den genom enJSON-formatterare. Nu när vi ska börja att experimenta är det ju bra om datan är så läsbar som möjligt. Därefter kortade vi ned datan så att enbart två kartpunkter är med. Det räcker för exeperimentsyfte och tar inte så mycket plats. Så här blev datamängden att se ut:

{
   "type":"FeatureCollection",
   "features":[
      {
         "type":"Feature",
         "geometry":{
            "type":"Point",
            "coordinates":[
               15.253840371567572,
               59.277180434995095
            ]
         },
         "properties":{
            "title":"Alnängsbadet",
            "description":"",
            "url":"http://www.orebro.se/3089.html",
            "rel":"http://karta2.orebro.se/api/v1/information/1"
         }
      },
      {
         "type":"Feature",
         "geometry":{
            "type":"Point",
            "coordinates":[
               15.74236626384993,
               59.1363775662748
            ]
         },
         "properties":{
            "title":"Dimbobaden",
            "description":"",
            "url":"http://www.orebro.se/3090.html",
            "rel":"http://karta2.orebro.se/api/v1/information/2"
         }
      }
   ]
}

Datat är i en specialversion av JSON som är tillför just kartdata. Den kallas för GeoJSON.

Varje intressepunkt har två delar. Först kommer koordinaterna och sen information om den. Vi kommer att bry oss i koordinaterna och title till att börja med.

Leaflet och GeoJSON

Leaflet har stöd för GeoJSON inbyggt. Om vi använder oss av detta kommer vi att bespara oss själva en hel del arbete. Faktum är att Leaflet i det närmaste automatiskt kan ta vår datamängd och lägga ut den på kartan.

Vi lägger datamändgen i slutet av vår JavaScript-kod, så slipper vi se den. Sen ska vi skapa lite kod som kan handha vår GeoJSON-data. Så här kommer koden att se ut:

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