Att lägga till extra data med Leaflet: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) (Skapade sidan med '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 up...') |
PGJ (diskussion | bidrag) |
||
| Rad 7: | Rad 7: | ||
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. | 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. | ||
<codepen pen="yeMzwZ" tab="js" height="550"> | |||
</codepen> | |||
=== <code>marker</code> === | |||
Den intressanta kodraden ligger en bit ner i vår<code>VisaPosition</code>-funktion. Sist i denna har vi en ny rad som ser ut så här: | |||
<code>var marker = L.marker(koordinater).addTo(map);</code> | |||
Vi kan alltså mycket enkelt lägga till en markör. Vi bara kallar på <code>marker</code> 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 <code>addTo</code> 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. | |||
== <code>circle</code> == | |||
Versionen från 6 januari 2016 kl. 10.33
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.
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.