Att lägga till extra data med Leaflet

Vi ska nu titta på några olika metoder för att lägga till markörer och liknande i våra kartor. Dessa kan användas för att t.ex. visa upp intressepunkter eller för att åskådliggöra statistik på ett geografiskt plan. Leaflet har många olika 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 en intressepunkt finns. Ofta använder vi denna för att visa upp en specifik punkt som användaren sökt efter eller för att markera var något intressant finns. När man skrollar runt eller zooma runt i kartan, kan man lätt tappa bort vilken punkt det var man sökte efter och markören kan då hjälpa en 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 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):

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

Vi kan alltså mycket enkelt lägga till en markör. Vi behöver bara kalla på marker och skicka med koordinaterna till den punkt som vi vill markera. Koordinaterna skickas i 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å får vi inte exakta positionsangivelser från webbläsaren. Vi kunde 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 felmarginallen som gäller för mätningen. 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 centrum för cirkeln. I vårt fall vill vi använda de koordinater som vi fick ut från webbläsarens positioneringsangivelse. Därefter föjer den radie som vi vill att 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 som ett flyttal mellan 0, helt genomskinlig, och 1, helt ogenomskinlig. 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

Som vi ser i exemplet så ritar vi ut polygoner med hjälp av metoden polygon.

Hörnkoordinater

Den viktigaste parametern för denna metod är den första. Detta är en array som anger på vilka koordinater som polygonens hörn ska placeras ut. Koordinaterna är "vanliga" longitud- och latitud-angivelser. Mellan varje angiven hörnpunkt kommer det att ritas en linje. Från den första till den sista hörnpunkten ritas automatiskt en linje som sluter polygonen. Den slutna figuren som bildas av polygonen kommer till sist att fyllas med angiven färg.

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. I exemplet 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