Att komma igång med Leaflet - Versionshistorik

PGJ den 18 september 2024 kl. 06.48

2024-09-18T06:48:47Z

← Äldre version		Versionen från 18 september 2024 kl. 06.48
Rad 2:		Rad 2:

	== Att lägga till Leaflet ==		== Att lägga till Leaflet ==
	Precis som var fallet med jQuery, går det att använda en [[CDN]] för att lägga till Leaflet i en sida. Vi kommer att använda den metoden, då den är enklast och mest flexibelt. Tyvärr har inte huvud-CDN:en på https://cdn.leafletjs.com/ ett korrekt certifikat och det går därmed inte att köra HTTPS mot den. Det vill vi gärna göra, så därför har vi valt en annan CDN som tillhandahåller biblioteket via HTTPS.

	För att lägga till Leaflet behöver vi inkludera två filer - dels en CSS-fil, dels en JavaScript-fil. CSS-filen lägger vi till i vår sidas <code>head</code>. Följande kommer att ta ner nuvarande version av Leaflet. Kolla alltid deras webbsajt för att se om det kommit en nyare version.		För att lägga till Leaflet behöver vi inkludera två filer - dels en CSS-fil, dels en JavaScript-fil. CSS-filen lägger vi till i vår sidas <code>head</code>. Följande kommer att ta ner nuvarande version av Leaflet. Kolla alltid deras webbsajt för att se om det kommit en nyare version.

	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
			integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
			crossorigin=""/>
	</syntaxhighlight>		</syntaxhighlight>

	Detta är grundinställningar för den CSS som Leaflet behöver. Dessa CSS-regler kommer antagligen inte att störa den CSS som du själv lagt till sidan. Men du kan ju vara uppmärksam på om det händer något oväntat i din sida när du lägger till denna rad.		Detta är grundinställningar för den CSS som Leaflet behöver. Dessa CSS-regler kommer antagligen inte att störa den CSS som du själv lagt till sidan. Men du kan ju vara uppmärksam på om det händer något oväntat i din sida när du lägger till denna rad.

	Därefter lägger vi till själva JavaScript-biblioteket. Man lägger oftast till detta någonstans i slutet av sidan, t.ex. strax före <code></body></code>.		Därefter lägger vi till själva JavaScript-biblioteket. Man lägger oftast till detta någonstans i slutet av sidan, t.ex. strax före <code></body></code>. Var man än placerar den, så måste JavaScript-delen laddas in efter CSS-delen. Så det är bäst att lägga den i slutet av HTML-koden.

	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>		<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
			integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
			crossorigin=""></script>

	</syntaxhighlight>		</syntaxhighlight>

Rad 31:		Rad 34:

	=== HTML ===		=== HTML ===
	I HTML-koden började vi med att lägga till CDN-hämtningarna som ~~föreser~~ oss med Leaflet. Förutom detta så har vi skapat en tom <code>[[div]]</code> som fått ID:n <code>karta</code>. Här kommer vi att visa upp vår karta.		I HTML-koden började vi med att lägga till CDN-hämtningarna som förser oss med Leaflet. Förutom detta så har vi skapat en tom <code>[[div]]</code> som fått ID:n <code>karta</code>. Här kommer vi att visa upp vår karta.

	=== CSS ===		=== CSS ===
Rad 40:		Rad 43:

	==== Initiering av Leaflet ====		==== Initiering av Leaflet ====
	På den första raden skapar vi en karta och ställer vi in grunderna för den. Leaflet registreas som <code>L</code> när vi lägger till det. De flesta metoder som vi vill kalla på ligger alltså samlade i <code>L</code>-objektet ~~(detta går att jämföra med hur jQuery registrerar sig i <code>$</code>)~~.		På den första raden skapar vi en karta och ställer vi in grunderna för den. Leaflet registreas som <code>L</code> när vi lägger till det. De flesta metoder som vi vill kalla på ligger alltså samlade i <code>L</code>-objektet.

	<code>map</code> skapar en ny kartregion Som inparameter tar den ID:t för den <code>div</code> där kartan ska visas. Därefter talar vi om vilka koordinater som vi är intresserade av genom att anropa metoden <code>setView</code>. Som inparameterar tar denna en array med koordinaterna, först latitud och sen longitud. Vår karta kommer att centreras kring den angivna koordinaten. Den sista parametern anger vilken zoomfaktor som kartan ska visas upp med, desto högre tal desto längre inzoomade är vi.		<code>map</code> skapar en ny kartregion Som inparameter tar den ID:t för den <code>div</code> där kartan ska visas. Därefter talar vi om vilka koordinater som vi är intresserade av genom att anropa metoden <code>setView</code>. Som inparameterar tar denna en array med koordinaterna, först latitud och sen longitud. Vår karta kommer att centreras kring den angivna koordinaten. Den sista parametern anger vilken zoomfaktor som kartan ska visas upp med, desto högre tal desto längre inzoomade är vi.
Rad 46:		Rad 49:
	==== Inställningar för datakälla ====		==== Inställningar för datakälla ====
	Vi måste nu ange varifrån all kartdata ska hämtas. Vi kommer att använda oss av Open Street Map.		Vi måste nu ange varifrån all kartdata ska hämtas. Vi kommer att använda oss av Open Street Map.

	~~<div class="well well-warning">~~

	~~==== HTTPS eller ej ====~~
	Det är diskutabelt huruvida kartdatan verkligen kan vara integritetskränkande och behövs hålla hemlig, men vi kommer ändå att hämta materialet via HTTPS. Främst för att detta kommer att undvika att vi får de "mixed content"-varningar som uppstår när man blandar HTTP- och HTTPS-objekt i en och samma sida. Att inte kryptera kartdatat skulle vara marginellt snabbare, men det är nog ingenting man behöver bry sig i, speciellt inte på klientsidan. På servern kommer det självklart att bli något högre last när alla kartsegment måste krypteras innan de skickas ut.
	~~</div>~~

	==== Kart-tiles ====		==== Kart-tiles ====
	Med <code>tileLayer</code> anger vi dels att kartan vi ska hämta består av karttiles. Där tiles betyder mosaikbitar. Det vill säga, det är småbitar som bygger upp en större helhet och kartan kommer att laddas in som ett flertal mindre grafikfiler. Dessa ~~komibineras~~ och visas bredvid varandra och på så vis byggs den kompletta kartvyn upp. När vi skrollar runt i kartan så laddas enbart de nya tiles som behövs för att täcka den inskrollade arean. Dessa läggs intill redan befintliga tiles och gör vår kartvy komplett igen. Om vi skrollar tillbaka kommer de tiles som redan är nedladdade att användas. Zoomar vi in eller ut, måste förstås nya karttiles laddas in.		Med <code>tileLayer</code> anger vi dels att kartan vi ska hämta består av karttiles. Där tiles mer eller mindre betyder mosaikbitar. Det vill säga, det är småbitar som bygger upp en större helhet och kartan kommer att laddas in som ett flertal mindre grafikfiler. Dessa kombineras och visas bredvid varandra och på så vis byggs den kompletta kartvyn upp. När vi skrollar runt i kartan så laddas enbart de nya tiles som behövs för att täcka den inskrollade arean. Dessa läggs intill redan befintliga tiles och gör vår kartvy komplett igen. Om vi skrollar tillbaka kommer de tiles som redan är nedladdade att användas. Zoomar vi in eller ut, måste förstås nya karttiles laddas in.

	Hanteringen av karttiles gör att vi minimerar hur mycket data som måste hämtas när användaren skrollar runt i kartan. Denna teknik för karthämtning på webben uppfanns av Google när de skapade sin karttjänst Google Maps. Så gott som alla webbaserade karttjänster använder sig av liknande metoder.		Hanteringen av karttiles gör att vi minimerar hur mycket data som måste hämtas när användaren skrollar runt i kartan. Denna teknik för karthämtning på webben uppfanns av Google när de skapade sin karttjänst Google Maps. Så gott som alla webbaserade karttjänster använder sig av liknande metoder.

			Om vi redan laddat in en kartbit så kommer den att lagras i webbläsarens cache, vilket gör att den kommer att återanvändas nästa gång den kartbiten är aktuell. Det går med andra ord mycket snabbare att visa de kartbitar som redan är hämtade.

	==== Att ange datakälla ====		==== Att ange datakälla ====
	Som första inparameter tar <code>tileLayers</code> en länk till den server som kommer att tillhandahålla ~~den behövlig~~ kartdata. Därefter följer ett objekt som innehåller de inställningar som ska gälla för källan. I vårt exempel anger vi varifrån data hämtas.		Som första inparameter tar <code>tileLayers</code> en länk till den server som kommer att tillhandahålla vår kartdata. Därefter följer ett objekt som innehåller de inställningar som ska gälla för källan. I vårt exempel anger vi varifrån data hämtas.

	<div class="well well-warning">		<div class="well well-warning">
Rad 76:		Rad 75:
	</codepen>		</codepen>

	Det finns väl inte mycket att tillägga angående vad koden gör. I stort sett är allt det samma som i våra tidigare exempel, förutom att istället för att ~~visa upp koordinatvärdena~~ så ~~drar~~ vi istället upp en karta som centreras kring den punkt där webbläsaren anger att vi befinner oss.		Det finns väl inte så mycket att tillägga angående vad koden gör. I stort sett är allt det samma som i våra tidigare exempel, förutom att istället för att använda fasta koordinatvärden så visar vi istället upp en karta som centreras kring den punkt där webbläsaren anger att vi befinner oss.

	Här kan det bli mer uppenbart om positionen är ett närmevärde. Prova gärna att köra exemplet både på din dator och på en mobil enhet som har GPS. Det borde märkas en väsentlig skillnad i precision på positionsangivelsen.		Här kan det bli mer uppenbart om positionen är ett närmevärde. Prova gärna att köra exemplet både på din dator och på en mobil enhet som har GPS. Det borde märkas en väsentlig skillnad i precision på positionsangivelsen.

PGJ den 23 oktober 2021 kl. 10.53

2021-10-23T10:53:50Z

← Äldre version		Versionen från 23 oktober 2021 kl. 10.53
Rad 4:		Rad 4:
	Precis som var fallet med jQuery, går det att använda en [[CDN]] för att lägga till Leaflet i en sida. Vi kommer att använda den metoden, då den är enklast och mest flexibelt. Tyvärr har inte huvud-CDN:en på https://cdn.leafletjs.com/ ett korrekt certifikat och det går därmed inte att köra HTTPS mot den. Det vill vi gärna göra, så därför har vi valt en annan CDN som tillhandahåller biblioteket via HTTPS.		Precis som var fallet med jQuery, går det att använda en [[CDN]] för att lägga till Leaflet i en sida. Vi kommer att använda den metoden, då den är enklast och mest flexibelt. Tyvärr har inte huvud-CDN:en på https://cdn.leafletjs.com/ ett korrekt certifikat och det går därmed inte att köra HTTPS mot den. Det vill vi gärna göra, så därför har vi valt en annan CDN som tillhandahåller biblioteket via HTTPS.

	För att lägga till Leaflet behöver vi inkludera två filer - dels en CSS-fil, dels en JavaScript-fil. CSS-filen lägger vi till i vår sidas <code>head</code>. Följande kommer att ta ner nuvarande version av Leaflet.		För att lägga till Leaflet behöver vi inkludera två filer - dels en CSS-fil, dels en JavaScript-fil. CSS-filen lägger vi till i vår sidas <code>head</code>. Följande kommer att ta ner nuvarande version av Leaflet. Kolla alltid deras webbsajt för att se om det kommit en nyare version.

	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">

PGJ den 23 oktober 2021 kl. 10.36

2021-10-23T10:36:24Z

← Äldre version		Versionen från 23 oktober 2021 kl. 10.36
Rad 73:		Rad 73:
	== Kombination av våra geografiska exempel ==		== Kombination av våra geografiska exempel ==
	Man skulle förstås kunna kombinera vårt nuvarande exempel med det som vi gjorde tidigare i "[[Att ta reda på var någon befinner sig]]"-aktiviteten. Ett sådant exempel skulle kunna tänkas se ut så här:		Man skulle förstås kunna kombinera vårt nuvarande exempel med det som vi gjorde tidigare i "[[Att ta reda på var någon befinner sig]]"-aktiviteten. Ett sådant exempel skulle kunna tänkas se ut så här:

	<codepen pen="pgeWKx" tab="js,result" height="1300">		<codepen pen="pgeWKx" tab="js,result" height="1300">
	</codepen>		</codepen>

PGJ den 23 oktober 2021 kl. 10.30

2021-10-23T10:30:31Z

← Äldre version		Versionen från 23 oktober 2021 kl. 10.30
Rad 6:		Rad 6:
	För att lägga till Leaflet behöver vi inkludera två filer - dels en CSS-fil, dels en JavaScript-fil. CSS-filen lägger vi till i vår sidas <code>head</code>. Följande kommer att ta ner nuvarande version av Leaflet.		För att lägga till Leaflet behöver vi inkludera två filer - dels en CSS-fil, dels en JavaScript-fil. CSS-filen lägger vi till i vår sidas <code>head</code>. Följande kommer att ta ner nuvarande version av Leaflet.

	<syntaxhighlight lang="~~JavaScript~~">		<syntaxhighlight lang="html">
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css">		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
	</syntaxhighlight>		</syntaxhighlight>

Rad 15:		Rad 15:

	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>		<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
	</syntaxhighlight>		</syntaxhighlight>

PGJ den 31 oktober 2020 kl. 12.18

2020-10-31T12:18:35Z

← Äldre version		Versionen från 31 oktober 2020 kl. 12.18
Rad 6:		Rad 6:
	För att lägga till Leaflet behöver vi inkludera två filer - dels en CSS-fil, dels en JavaScript-fil. CSS-filen lägger vi till i vår sidas <code>head</code>. Följande kommer att ta ner nuvarande version av Leaflet.		För att lägga till Leaflet behöver vi inkludera två filer - dels en CSS-fil, dels en JavaScript-fil. CSS-filen lägger vi till i vår sidas <code>head</code>. Följande kommer att ta ner nuvarande version av Leaflet.

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css">		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css">
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	Detta är grundinställningar för den CSS som Leaflet behöver. Dessa CSS-regler kommer antagligen inte att störa den CSS som du själv lagt till sidan. Men du kan ju vara uppmärksam på om det händer något oväntat i din sida när du lägger till denna rad.		Detta är grundinställningar för den CSS som Leaflet behöver. Dessa CSS-regler kommer antagligen inte att störa den CSS som du själv lagt till sidan. Men du kan ju vara uppmärksam på om det händer något oväntat i din sida när du lägger till denna rad.
Rad 16:		Rad 14:
	Därefter lägger vi till själva JavaScript-biblioteket. Man lägger oftast till detta någonstans i slutet av sidan, t.ex. strax före <code></body></code>.		Därefter lägger vi till själva JavaScript-biblioteket. Man lägger oftast till detta någonstans i slutet av sidan, t.ex. strax före <code></body></code>.

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>		<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	Med dessa två rader på plats kan vi skapa ett exempel.		Med dessa två rader på plats kan vi skapa ett exempel.

PGJ: /* Att lägga till Leaflet */

2019-02-12T07:59:33Z

Att lägga till Leaflet

← Äldre version		Versionen från 12 februari 2019 kl. 07.59
Rad 7:		Rad 7:

	<div class="well well-cyanide-light">		<div class="well well-cyanide-light">
	<~~code~~><link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"></~~code~~>		<syntaxhighlight lang="JavaScript">
			<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css">
			</syntaxhighlight>
	</div>		</div>

Rad 15:		Rad 17:

	<div class="well well-cyanide-light">		<div class="well well-cyanide-light">
	<~~code~~><script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script></~~code~~>		<syntaxhighlight lang="JavaScript">
			<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
			</syntaxhighlight>
	</div>		</div>

PGJ: /* Att lägga till Leaflet */

2019-02-12T07:52:51Z

Att lägga till Leaflet

← Äldre version		Versionen från 12 februari 2019 kl. 07.52
Rad 6:		Rad 6:
	För att lägga till Leaflet behöver vi inkludera två filer - dels en CSS-fil, dels en JavaScript-fil. CSS-filen lägger vi till i vår sidas <code>head</code>. Följande kommer att ta ner nuvarande version av Leaflet.		För att lägga till Leaflet behöver vi inkludera två filer - dels en CSS-fil, dels en JavaScript-fil. CSS-filen lägger vi till i vår sidas <code>head</code>. Följande kommer att ta ner nuvarande version av Leaflet.

			<div class="well well-cyanide-light">
	<code><link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"></code>		<code><link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"></code>
			</div>

	Detta är grundinställningar för den CSS som Leaflet behöver. Dessa CSS-regler kommer antagligen inte att störa den CSS som du själv lagt till sidan. Men du kan ju vara uppmärksam på om det händer något oväntat i din sida när du lägger till denna rad.		Detta är grundinställningar för den CSS som Leaflet behöver. Dessa CSS-regler kommer antagligen inte att störa den CSS som du själv lagt till sidan. Men du kan ju vara uppmärksam på om det händer något oväntat i din sida när du lägger till denna rad.
Rad 12:		Rad 14:
	Därefter lägger vi till själva JavaScript-biblioteket. Man lägger oftast till detta någonstans i slutet av sidan, t.ex. strax före <code></body></code>.		Därefter lägger vi till själva JavaScript-biblioteket. Man lägger oftast till detta någonstans i slutet av sidan, t.ex. strax före <code></body></code>.

			<div class="well well-cyanide-light">
	<code><script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script></code>		<code><script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script></code>
			</div>

	Med dessa två rader på plats kan vi skapa ett exempel.		Med dessa två rader på plats kan vi skapa ett exempel.

PGJ: /* Kombination av våra geografiska exempel */

2019-01-12T21:10:28Z

Kombination av våra geografiska exempel

← Äldre version		Versionen från 12 januari 2019 kl. 21.10
Rad 70:		Rad 70:
	Man skulle förstås kunna kombinera vårt nuvarande exempel med det som vi gjorde tidigare i "[[Att ta reda på var någon befinner sig]]"-aktiviteten. Ett sådant exempel skulle kunna tänkas se ut så här:		Man skulle förstås kunna kombinera vårt nuvarande exempel med det som vi gjorde tidigare i "[[Att ta reda på var någon befinner sig]]"-aktiviteten. Ett sådant exempel skulle kunna tänkas se ut så här:

	<codepen pen="pgeWKx" tab="js" height="1300">		<codepen pen="pgeWKx" tab="js,result" height="1300">
	</codepen>		</codepen>

PGJ: /* Leaflet-exempel */

2019-01-12T21:10:12Z

Leaflet-exempel

← Äldre version		Versionen från 12 januari 2019 kl. 21.10
Rad 19:		Rad 19:
	Låt säga att vi skulle vilja se var Soltorgsgymnasiet i Borlänge ligger. Då kunde vi göra som i följande exempel.		Låt säga att vi skulle vilja se var Soltorgsgymnasiet i Borlänge ligger. Då kunde vi göra som i följande exempel.

	<codepen pen="adJmEj" tab="js,result" height="~~550~~">		<codepen pen="adJmEj" tab="js,result" height="600">
	</codepen>		</codepen>

PGJ: /* Leaflet-exempel */

2019-01-12T21:09:57Z

Leaflet-exempel

← Äldre version		Versionen från 12 januari 2019 kl. 21.09
Rad 19:		Rad 19:
	Låt säga att vi skulle vilja se var Soltorgsgymnasiet i Borlänge ligger. Då kunde vi göra som i följande exempel.		Låt säga att vi skulle vilja se var Soltorgsgymnasiet i Borlänge ligger. Då kunde vi göra som i följande exempel.

	<codepen pen="adJmEj" tab="js" height="550">		<codepen pen="adJmEj" tab="js,result" height="550">
	</codepen>		</codepen>