Att lägga till extra data med Leaflet

Vi ska nu titta på lite olika metoder med vilkas hjälp vi kan lägga till datapunkter och liknande i våra kartor. Detta kan användas för olika saker som att t.ex. visa upp intressepunkter eller för att åskådliggöra statistik på ett geografiskt plan. Leaflet har många metoder som kan användas för detta.

Att lägga till en markör

Som första exempel ska vi lägga till en markör i kartan. Denna markör kan användas för att markera var något slags intressepunkt finns. Ofta använder vi denna för att visa upp en specifik punkt som användaren sökt eller för att markera att det finns intressant där. Markörerna är inte minst viktiga när man ska visa en punkt som sökts upp. Ofta vill man ju skrolla runt eller zooma runt i kartan, då kan man lätt tappa bort vilken punkt det var man sökt ut och markören kan hjälpa till att hitta tillbaka.

Exempel

Vi utgår från vårt tidigare exempel där vi visade upp var användaren befinner sig på en karta. Vi utökar det så att det läggs till en markör på den punkt där webbläsaren rapporterar att användaren finns. Kom ihåg att det finns en viss felmarginal som gör att den kanske inte placeras helt korrekt på den exakta positionen.

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

marker

Den intressantaste kodraden ligger en bit ner i vår VisaPosition-funktion. Sist i denna har vi en ny rad som ser ut så här (den är utmärkt i exemplet med ett antal =-tecken):

var marker = L.marker(koordinater).addTo(map);

Vi kan alltså mycket enkelt lägga till en markör. Vi bara kallar på marker och skickar med koordinaterna till den punkt som vi vill markera. Koordinaterna är en array som innehåller latitud och longitud.

För att markören ska visas i kartan gör vi en addTo på slutet. Som inparameter tar den ett objekt som representerar den kartvy i vilken vi vill visa markören. Vi kan självklart ha olika kartvyer igång samtidigt.

Att lägga till en cirkel

När vi jobbar med kartor vill vi ofta markera en hel region. Här kan det vara bra att kunna lägga till cirklar. Dessa är mycket användbara för att indikera saker som utsträckning, felmarginal eller liknande. Även dessa är lätta att skapa i Leaflet

Exempel

Som vi nämnde tidigare så är positionsangivelsen som vi får ifrån webbläsaren inte exakt. Vi kunde ju med hjälp av accuracy-värdet läsa ut felmarginalen. Vi skulle kunna använda denna information för att utöka föregående exempel med en cirkel som visar med vilken felmarginal som användarens position visas upp. Det kan vi göra så här:

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

circle

Vi skapar cirkeln med metoden circle. Som inparameterar tar den först den koordinat som ska gälla som center för cirkeln. I vårt fall vill vi använda de koordinater vi fick ut ifrån webbläsarens positioneringsangivelse. Därefter föjer den radie som cirkeln ska ha. Radien anges i meter. Vilket ju var samma enhet som accuracy rapporterades i. Vi kan alltså använda den rakt av.

Utritningsinställningar

Den sista parametern till circle-metoden anger inställningar för hur cirkeln ska ritas ut. Man kan sätta många olika saker här. Läs mer på Path Options om du vill se allt som går att göra. I vårt fall anger vi fyra saker, nämligen:

color

Vilken färg ska cirkeln ha? Alla de färgangivelserna som är tillgängliga för CSS går att använda här. Se "Färg"-aktiviteten för mer information om CSS och färger. Defaultvärdet är #03f.

opacity

Hur genomskinlig ska cirkelkanten vara? Anges i från 0, helt genomskinlig, till 1, ej genomskinlig alls. Det är alltså ett alfavärde och kan ses som en procentsats. Defaultvärdet är 0.5.

fillColor

Här anges den färg som cirkeln ska fyllas med, även här fungerar alla CSS-färgangivelser. Defaultvärdet är samma färg som cirkelramen. (Om man inte vill fylla cirkeln, kan man använda fill: false).

fillOpacity

Hur genomskinlig ska fyllningen vara. Fungerar såsom opacity ovan. Defaultvärdet är 0.2.

Att lägga till en Polygon

En polygon är ju en månghörning. Med hjälp av polygoner kan vi markera regioner rätt så fritt. Vi kan ange så få eller så många hörnpunkter som vi vill. Den faktiska form som polygongen får styrs såväl av antalet hörnpunkter som av hörnpunkternas placering.

Exempel

Den här gången utgår vi från vårt tidigare exempel där vi visade upp Soltorgsgymnasiet i Borlänge. Nu ska vi rita en fyrhörning polygon runt skolan. Det kanske inte blir absolut rätt placering av hörnpunkterna, men det får duga som ett exempel.

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

polygon

Polygoner ritas med hjälp av metoden polygon.

Hörnkoordinater

Den viktigaste parametern för denna metod är den första som innehåller en array med de koordinater på vilka hörn ska placeras ut. Koordinaterna är "vanliga" longitud- och latitud-angivelser. Linjer som sträcker sig mellan varje koordinat kommer att ritas ut. Mellan den första och den sista hörnpunkten ritas en linje som sluter polygonen.

Utritningsparametrar

Precis som i fallet med circle, kan vi skicka med ett objekt som innehåller diverse inställningar som styr hur utritningen ska gå till. Som tidigare finns color, opacity och fillOpacity med och dessa fungerar såsom beskrevs under circle-exemplet. Soltorgsgymnasiet ska förstås markeras ut med rejält gula färger!

Det vi lagt till extra här är weight som anger hur tjock den utritade linjen ska vara. Här har vi satt den något fetare än normalt, defaultvärdet är 5. Vi har med andra ord angett att linjen ska vara ungefär dubbelt så fet som normala linjer.

Många fler möjligheter

Det finns långt många fler metoder i Leaflet än vi kan täcka här. Du kan läsa deras API-referens för att få mer information.

Nästa aktivitet

Vi ska gå vidare med Leaflet och titta på hur man kan ge användaren tillfälle att interagera med kartan på olika vis.

Att skapa interaktivitet med Leaflet