https://webbling.se/index.php?action=history&feed=atom&title=Att_l%C3%A4gga_till_extra_data_med_Leaflet
Att lägga till extra data med Leaflet - Versionshistorik
2026-04-26T05:16:09Z
Versionshistorik för denna sida på wikin
MediaWiki 1.43.0
https://webbling.se/index.php?title=Att_l%C3%A4gga_till_extra_data_med_Leaflet&diff=5086&oldid=prev
PGJ den 18 september 2024 kl. 07.09
2024-09-18T07:09:29Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="sv">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Äldre version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Versionen från 18 september 2024 kl. 07.09</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l49">Rad 49:</td>
<td colspan="2" class="diff-lineno">Rad 49:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== <code>polygon</code> ===</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== <code>polygon</code> ===</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">Polygoner ritas </del>med hjälp av metoden <code>polygon</code>.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">Som vi ser i exemplet så ritar vi ut polygoner </ins>med hjälp av metoden <code>polygon</code>.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==== Hörnkoordinater ====</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==== Hörnkoordinater ====</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>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. <del style="font-weight: bold; text-decoration: none;">Mellan </del>den första <del style="font-weight: bold; text-decoration: none;">och </del>den sista hörnpunkten ritas en linje som sluter polygonen. Den slutna figuren som bildas av polygonen kommer till sist att fyllas med angiven färg.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>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. <ins style="font-weight: bold; text-decoration: none;">Från </ins>den första <ins style="font-weight: bold; text-decoration: none;">till </ins>den sista hörnpunkten ritas <ins style="font-weight: bold; text-decoration: none;">automatiskt </ins>en linje som sluter polygonen. Den slutna figuren som bildas av polygonen kommer till sist att fyllas med angiven färg.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==== Utritningsparametrar ====</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==== Utritningsparametrar ====</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Precis som i fallet med <code>circle</code>, kan vi skicka med ett objekt som innehåller diverse inställningar som styr hur utritningen ska gå till. Som tidigare finns <code>color</code>, <code>opacity</code> och <code>fillOpacity</code> med och dessa fungerar såsom beskrevs under <code>circle</code>-exemplet. Soltorgsgymnasiet ska förstås markeras ut med rejält gula färger!</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Precis som i fallet med <code>circle</code>, kan vi skicka med ett objekt som innehåller diverse inställningar som styr hur utritningen ska gå till. Som tidigare finns <code>color</code>, <code>opacity</code> och <code>fillOpacity</code> med och dessa fungerar såsom beskrevs under <code>circle</code>-exemplet. Soltorgsgymnasiet ska förstås markeras ut med rejält gula färger!</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Det vi lagt till extra här är <code>weight</code> som anger hur tjock den utritade linjen ska vara. <del style="font-weight: bold; text-decoration: none;">Här </del>har vi satt den något fetare än normalt, defaultvärdet är <code>5</code>. Vi har med andra ord angett att linjen ska vara ungefär dubbelt så fet som normala linjer.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Det vi lagt till extra här är <code>weight</code> som anger hur tjock den utritade linjen ska vara. <ins style="font-weight: bold; text-decoration: none;">I exemplet </ins>har vi satt den något fetare än normalt, defaultvärdet är <code>5</code>. Vi har med andra ord angett att linjen ska vara ungefär dubbelt så fet som normala linjer.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Många fler möjligheter ==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Många fler möjligheter ==</div></td></tr>
</table>
PGJ
https://webbling.se/index.php?title=Att_l%C3%A4gga_till_extra_data_med_Leaflet&diff=5085&oldid=prev
PGJ den 18 september 2024 kl. 06.51
2024-09-18T06:51:26Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="sv">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Äldre version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Versionen från 18 september 2024 kl. 06.51</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">Rad 1:</td>
<td colspan="2" class="diff-lineno">Rad 1:</td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Vi ska nu titta på <del style="font-weight: bold; text-decoration: none;">lite </del>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.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Vi ska nu titta på <ins style="font-weight: bold; text-decoration: none;">några </ins>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.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Att lägga till en markör ==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Att lägga till en markör ==</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>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. <del style="font-weight: bold; text-decoration: none;">Ofta vill </del>man <del style="font-weight: bold; text-decoration: none;">skrolla </del>runt eller zooma runt i kartan, <del style="font-weight: bold; text-decoration: none;">då </del>kan man lätt tappa bort vilken punkt det var man <del style="font-weight: bold; text-decoration: none;">sökt fram </del>och markören kan då hjälpa <del style="font-weight: bold; text-decoration: none;">för </del>att hitta tillbaka.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>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. <ins style="font-weight: bold; text-decoration: none;">När </ins>man <ins style="font-weight: bold; text-decoration: none;">skrollar </ins>runt eller zooma runt i kartan, kan man lätt tappa bort vilken punkt det var man <ins style="font-weight: bold; text-decoration: none;">sökte efter </ins>och markören kan då hjälpa <ins style="font-weight: bold; text-decoration: none;">en </ins>att hitta tillbaka.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== Exempel ===</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== Exempel ===</div></td></tr>
</table>
PGJ
https://webbling.se/index.php?title=Att_l%C3%A4gga_till_extra_data_med_Leaflet&diff=4955&oldid=prev
PGJ den 31 oktober 2020 kl. 12.19
2020-10-31T12:19:08Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="sv">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Äldre version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Versionen från 31 oktober 2020 kl. 12.19</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l13">Rad 13:</td>
<td colspan="2" class="diff-lineno">Rad 13:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Den intressantaste 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 (den är utmärkt i exemplet med ett antal <code>=</code>-tecken):</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Den intressantaste 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 (den är utmärkt i exemplet med ett antal <code>=</code>-tecken):</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"><div class="well well-cyanide-light"></del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="JavaScript"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="JavaScript"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>let marker = L.marker(koordinater).addTo(map);</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>let marker = L.marker(koordinater).addTo(map);</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></syntaxhighlight></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></syntaxhighlight></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></div></del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Vi kan alltså mycket enkelt lägga till en markör. Vi behöver bara kalla på <code>marker</code> och skicka med koordinaterna till den punkt som vi vill markera. Koordinaterna skickas i en array som innehåller latitud och longitud.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Vi kan alltså mycket enkelt lägga till en markör. Vi behöver bara kalla på <code>marker</code> och skicka med koordinaterna till den punkt som vi vill markera. Koordinaterna skickas i en array som innehåller latitud och longitud.</div></td></tr>
</table>
PGJ
https://webbling.se/index.php?title=Att_l%C3%A4gga_till_extra_data_med_Leaflet&diff=4724&oldid=prev
PGJ: /* marker */
2019-02-12T08:00:05Z
<p><span class="autocomment">marker</span></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="sv">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Äldre version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Versionen från 12 februari 2019 kl. 08.00</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l14">Rad 14:</td>
<td colspan="2" class="diff-lineno">Rad 14:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><div class="well well-cyanide-light"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><div class="well well-cyanide-light"></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><<del style="font-weight: bold; text-decoration: none;">code</del>>let marker = L.marker(koordinater).addTo(map);</<del style="font-weight: bold; text-decoration: none;">code</del>></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><<ins style="font-weight: bold; text-decoration: none;">syntaxhighlight lang="JavaScript"</ins>></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>let marker = L.marker(koordinater).addTo(map);</div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></<ins style="font-weight: bold; text-decoration: none;">syntaxhighlight</ins>></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
</table>
PGJ
https://webbling.se/index.php?title=Att_l%C3%A4gga_till_extra_data_med_Leaflet&diff=4716&oldid=prev
PGJ: /* marker */
2019-02-12T07:53:19Z
<p><span class="autocomment">marker</span></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="sv">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Äldre version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Versionen från 12 februari 2019 kl. 07.53</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l13">Rad 13:</td>
<td colspan="2" class="diff-lineno">Rad 13:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Den intressantaste 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 (den är utmärkt i exemplet med ett antal <code>=</code>-tecken):</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Den intressantaste 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 (den är utmärkt i exemplet med ett antal <code>=</code>-tecken):</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"><div class="well well-cyanide-light"></ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><code>let marker = L.marker(koordinater).addTo(map);</code></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><code>let marker = L.marker(koordinater).addTo(map);</code></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></div></ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Vi kan alltså mycket enkelt lägga till en markör. Vi behöver bara kalla på <code>marker</code> och skicka med koordinaterna till den punkt som vi vill markera. Koordinaterna skickas i en array som innehåller latitud och longitud.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Vi kan alltså mycket enkelt lägga till en markör. Vi behöver bara kalla på <code>marker</code> och skicka med koordinaterna till den punkt som vi vill markera. Koordinaterna skickas i en array som innehåller latitud och longitud.</div></td></tr>
</table>
PGJ
https://webbling.se/index.php?title=Att_l%C3%A4gga_till_extra_data_med_Leaflet&diff=4218&oldid=prev
PGJ: /* Exempel */
2019-01-12T21:11:53Z
<p><span class="autocomment">Exempel</span></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="sv">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Äldre version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Versionen från 12 januari 2019 kl. 21.11</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l43">Rad 43:</td>
<td colspan="2" class="diff-lineno">Rad 43:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>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.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>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.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><codepen pen="MKpOpW" tab="js" height="600"></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><codepen pen="MKpOpW" tab="js<ins style="font-weight: bold; text-decoration: none;">,result</ins>" height="600"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></codepen></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></codepen></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
</table>
PGJ
https://webbling.se/index.php?title=Att_l%C3%A4gga_till_extra_data_med_Leaflet&diff=4217&oldid=prev
PGJ: /* Exempel */
2019-01-12T21:11:14Z
<p><span class="autocomment">Exempel</span></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="sv">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Äldre version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Versionen från 12 januari 2019 kl. 21.11</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l25">Rad 25:</td>
<td colspan="2" class="diff-lineno">Rad 25:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Som vi nämnde tidigare så får vi inte exakta positionsangivelser från webbläsaren. Vi kunde med hjälp av <code>accuracy</code>-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:</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Som vi nämnde tidigare så får vi inte exakta positionsangivelser från webbläsaren. Vi kunde med hjälp av <code>accuracy</code>-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:</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><codepen pen="jWBGjQ" tab="js" height="1500"></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><codepen pen="jWBGjQ" tab="js<ins style="font-weight: bold; text-decoration: none;">,result</ins>" height="1500"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></codepen></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></codepen></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
</table>
PGJ
https://webbling.se/index.php?title=Att_l%C3%A4gga_till_extra_data_med_Leaflet&diff=4216&oldid=prev
PGJ: /* Exempel */
2019-01-12T21:10:52Z
<p><span class="autocomment">Exempel</span></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="sv">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Äldre version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Versionen från 12 januari 2019 kl. 21.10</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l7">Rad 7:</td>
<td colspan="2" class="diff-lineno">Rad 7:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>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.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>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.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><codepen pen="PZpOGa" tab="js" height="1400"></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><codepen pen="PZpOGa" tab="js<ins style="font-weight: bold; text-decoration: none;">,result</ins>" height="1400"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></codepen></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></codepen></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
</table>
PGJ
https://webbling.se/index.php?title=Att_l%C3%A4gga_till_extra_data_med_Leaflet&diff=3920&oldid=prev
PGJ den 6 januari 2019 kl. 16.00
2019-01-06T16:00:01Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="sv">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Äldre version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Versionen från 6 januari 2019 kl. 16.00</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">Rad 1:</td>
<td colspan="2" class="diff-lineno">Rad 1:</td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Vi ska nu titta på lite olika metoder <del style="font-weight: bold; text-decoration: none;">med vilkas hjälp vi kan </del>lägga till <del style="font-weight: bold; text-decoration: none;">datapunkter </del>och liknande i våra kartor. <del style="font-weight: bold; text-decoration: none;">Detta </del>kan användas för <del style="font-weight: bold; text-decoration: none;">olika saker som </del>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.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Vi ska nu titta på lite olika metoder <ins style="font-weight: bold; text-decoration: none;">för att </ins>lägga till <ins style="font-weight: bold; text-decoration: none;">markörer </ins>och liknande i våra kartor. <ins style="font-weight: bold; text-decoration: none;">Dessa </ins>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 <ins style="font-weight: bold; text-decoration: none;">olika </ins>metoder som kan användas för detta.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Att lägga till en markör ==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Att lägga till en markör ==</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>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 <del style="font-weight: bold; text-decoration: none;">något slags </del>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 <del style="font-weight: bold; text-decoration: none;">att det </del>finns <del style="font-weight: bold; text-decoration: none;">intressant där. Markörerna är inte minst viktiga när man ska visa en punkt som sökts upp</del>. Ofta vill man <del style="font-weight: bold; text-decoration: none;">ju </del>skrolla runt eller zooma runt i kartan, då kan man lätt tappa bort vilken punkt det var man sökt <del style="font-weight: bold; text-decoration: none;">ut </del>och markören kan hjälpa <del style="font-weight: bold; text-decoration: none;">till </del>att hitta tillbaka.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>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 <ins style="font-weight: bold; text-decoration: none;">en </ins>intressepunkt finns. Ofta använder vi denna för att visa upp en specifik punkt som användaren sökt <ins style="font-weight: bold; text-decoration: none;">efter </ins>eller för att markera <ins style="font-weight: bold; text-decoration: none;">var något intressant </ins>finns. <ins style="font-weight: bold; text-decoration: none;"> </ins>Ofta vill man skrolla runt eller zooma runt i kartan, då kan man lätt tappa bort vilken punkt det var man sökt <ins style="font-weight: bold; text-decoration: none;">fram </ins>och markören kan <ins style="font-weight: bold; text-decoration: none;">då </ins>hjälpa <ins style="font-weight: bold; text-decoration: none;">för </ins>att hitta tillbaka.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== Exempel ===</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== Exempel ===</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>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 <del style="font-weight: bold; text-decoration: none;">helt korrekt </del>på den exakta positionen.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>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.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><codepen pen="PZpOGa" tab="js" height="1400"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><codepen pen="PZpOGa" tab="js" height="1400"></div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l13">Rad 13:</td>
<td colspan="2" class="diff-lineno">Rad 13:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Den intressantaste 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 (den är utmärkt i exemplet med ett antal <code>=</code>-tecken):</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Den intressantaste 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 (den är utmärkt i exemplet med ett antal <code>=</code>-tecken):</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><code><del style="font-weight: bold; text-decoration: none;">var </del>marker = L.marker(koordinater).addTo(map);</code></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><code><ins style="font-weight: bold; text-decoration: none;">let </ins>marker = L.marker(koordinater).addTo(map);</code></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Vi kan alltså mycket enkelt lägga till en markör. Vi behöver bara kalla på <code>marker</code> och skicka med koordinaterna till den punkt som vi vill markera. Koordinaterna skickas i en array som innehåller latitud och longitud.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Vi kan alltså mycket enkelt lägga till en markör. Vi behöver bara kalla på <code>marker</code> och skicka med koordinaterna till den punkt som vi vill markera. Koordinaterna skickas i en array som innehåller latitud och longitud.</div></td></tr>
</table>
PGJ
https://webbling.se/index.php?title=Att_l%C3%A4gga_till_extra_data_med_Leaflet&diff=2694&oldid=prev
PGJ: /* Hörnkoordinater */
2016-01-07T14:57:58Z
<p><span class="autocomment">Hörnkoordinater</span></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="sv">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Äldre version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Versionen från 7 januari 2016 kl. 14.57</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l49">Rad 49:</td>
<td colspan="2" class="diff-lineno">Rad 49:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Polygoner ritas med hjälp av metoden <code>polygon</code>.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Polygoner ritas med hjälp av metoden <code>polygon</code>.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==== Hörnkoordinater ====</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==== Hörnkoordinater ====</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Den viktigaste parametern för denna metod är den första <del style="font-weight: bold; text-decoration: none;">som innehåller </del>en array <del style="font-weight: bold; text-decoration: none;">med de koordinater </del>på vilka hörn ska placeras ut. Koordinaterna är "vanliga" longitud- och latitud-angivelser. <del style="font-weight: bold; text-decoration: none;">Linjer som sträcker sig mellan </del>varje <del style="font-weight: bold; text-decoration: none;">koordinat </del>kommer att ritas <del style="font-weight: bold; text-decoration: none;">ut</del>. Mellan den första och den sista hörnpunkten ritas en linje som sluter polygonen.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Den viktigaste parametern för denna metod är den första<ins style="font-weight: bold; text-decoration: none;">. Detta är </ins>en array <ins style="font-weight: bold; text-decoration: none;">som anger </ins>på vilka <ins style="font-weight: bold; text-decoration: none;"> koordinater som polygonens </ins>hörn ska placeras ut. Koordinaterna är "vanliga" longitud- och latitud-angivelser. <ins style="font-weight: bold; text-decoration: none;">Mellan </ins>varje <ins style="font-weight: bold; text-decoration: none;">angiven hörnpunkt </ins>kommer <ins style="font-weight: bold; text-decoration: none;">det </ins>att ritas <ins style="font-weight: bold; text-decoration: none;">en linje</ins>. Mellan den första och den sista hörnpunkten ritas en linje som sluter polygonen<ins style="font-weight: bold; text-decoration: none;">. Den slutna figuren som bildas av polygonen kommer till sist att fyllas med angiven färg</ins>.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==== Utritningsparametrar ====</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==== Utritningsparametrar ====</div></td></tr>
</table>
PGJ