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 ifrån vårt tidigare exempel där vi visade upp var användaren befinner sig i en karta. Men 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 exakta och korrekta positionen.

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

marker

Den intressanta kodraden ligger en bit ner i vårVisaPosition-funktion. Sist i denna har vi en ny rad som ser ut så här:

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 latitude 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ämde 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 cikeln 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).

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