Att skapa interaktivitet med Leaflet - Versionshistorik

PGJ den 18 september 2024 kl. 07.14

2024-09-18T07:14:44Z

← Äldre version		Versionen från 18 september 2024 kl. 07.14
Rad 16:		Rad 16:
	Vi behöver ha en instansvariabel som pekar på det kartobjekt som vi vill koppla vår popup till. I vårt exempel har vi sparat undan vårt objekt i <code>polygon</code>. I detta objekt finns en metod som heter <code>bindPopup</code> med vilken vi kan koppla till popup-funktionalitet.		Vi behöver ha en instansvariabel som pekar på det kartobjekt som vi vill koppla vår popup till. I vårt exempel har vi sparat undan vårt objekt i <code>polygon</code>. I detta objekt finns en metod som heter <code>bindPopup</code> med vilken vi kan koppla till popup-funktionalitet.

	I den enklaste varianten tar <code>bindPopup</code> en sträng som input. Strängen innehåller det som ska visas när användaren klickar. Strängens innehåll kommer att tolkas som HTML-kod. Vi kan alltså använda så gott som alla HTML-taggar här och på så vis bygga upp en relativt snygg popup. Vi skulle även kunna skicka med ett redan existerande HTML-element ~~och~~ då skulle ~~detta~~ visas i popup:en.		I den enklaste varianten tar <code>bindPopup</code> en sträng som input. Strängen innehåller det som ska visas när användaren klickar. Strängens innehåll kommer att tolkas som HTML-kod. Vi kan alltså använda så gott som alla HTML-taggar här och på så vis bygga upp en relativt snygg popup. Vi skulle även kunna skicka med ett redan existerande HTML-element som då skulle visas i popup:en.

	Vanligtvis utgår popup:ens position ~~ifrån~~ den punkt där användaren klickade. Det går även att ange på vilken latitud och longitud som popup:en ska hamna. Dessa anges då som sista parametrar till metoden, t.ex.		Vanligtvis utgår popup:ens position från den punkt där användaren klickade. Det går även att ange på vilken latitud och longitud som popup:en ska hamna. Dessa anges då som sista parametrar till metoden, t.ex.

	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
Rad 27:		Rad 27:

	== Händelser ==		== Händelser ==
	Vi kan även koppla så att kod körs när ~~diverse~~ händelser inträffar. I stort sett fungerar detta som händelser vanligtvis gör när vi kodar mot webbläsaren. ~~Händelsehanterare fungerar på liknande vis som i [[jQuery]]~~ och ~~man använder~~ en ~~<code>on</code>-metod för att koppla ihop dem~~. Det finns flera olika händelsetyper. Några av dessa är unika ~~för~~ för vissa typer av kartobjekt, medan andra är universiella för alla typer av kartobjekt. Vi kan inte täcka alla varianter här, så kolla gärna på [http://leafletjs.com/reference.html Leflets dokumentation] för att i detalj se vilka händelser som är tillgängliga för de olika objekttyperna.		Vi kan även koppla så att kod körs när olika händelser inträffar. I stort sett fungerar detta som händelser vanligtvis gör när vi kodar mot webbläsaren. Vi kopplar en händelsehanterare till vald Leaflet komponent och den triggas igång när en händelse inträffar. Det finns flera olika händelsetyper. Några av dessa är unika för vissa typer av kartobjekt, medan andra är universiella och gäller för alla typer av kartobjekt. Vi kan inte täcka alla varianter här, så kolla gärna på [http://leafletjs.com/reference.html Leflets dokumentation] för att i detalj se vilka händelser som är tillgängliga för de olika objekttyperna.

	==== Klickhändelser ====		==== Klickhändelser ====
Rad 34:		Rad 34:
	</codepen>		</codepen>

	Den viktigaste kodraden är den där vi kopplar händelsen till vår händelsehanterarande funktion~~, dvs <code>on</code>~~. Vi kan använda denna metod på de flesta typer av Leaflet-objekt. Precis som i fallet med [[jQuery]] tar metoden händelsetypen som första parameter. Den andra parametern är den funktion som vi vill ska triggas igång när händelsen inträffar.		Den viktigaste kodraden är den där vi kopplar händelsen till vår händelsehanterarande funktion. Vi kan använda denna metod på de flesta typer av Leaflet-objekt. Precis som i fallet med [[jQuery]] tar metoden händelsetypen som första parameter. Den andra parametern är den funktion som vi vill ska triggas igång när händelsen inträffar.

	Vår funktion <code>klickade</code> kommer alltså att köras när användaren klickar i vår polygon. I den kollar vi först vilken färg vår polygon har för tillfället. Vi kan komma åt alla utseende-inställningarna via <code>options</code>. I vårt fall vill vi alltså ta fram färgen, vilken vi kommer åt med <code>options.color</code>. Om denna är satt till gul, vilket den är från starten, ändrar vi den till röd. Metoden <code>setStyle</code> möjliggör alltså att vi kan gå in och redigera ett objekts utseende efter det att det har skapats. Dess inparameter är ett objekt som innehåller alla de inställningar vi vill förändra.		Vår funktion <code>klickade</code> kommer alltså att köras när användaren klickar i vår polygon. I den kollar vi först vilken färg vår polygon har för tillfället. Vi kan komma åt alla utseende-inställningarna via <code>options</code>. I vårt fall vill vi alltså ta fram färgen, vilken vi kommer åt med <code>options.color</code>. Om denna är satt till gul, vilket den är från starten, ändrar vi den till röd. Metoden <code>setStyle</code> möjliggör alltså att vi kan gå in och redigera ett objekts utseende efter det att det har skapats. Dess inparameter är ett objekt som innehåller alla de inställningar vi vill förändra.

PGJ den 23 oktober 2021 kl. 10.51

2021-10-23T10:51:16Z

← Äldre version		Versionen från 23 oktober 2021 kl. 10.51
Rad 10:		Rad 10:
	=== Exempel ===		=== Exempel ===
	Vi utgår ifrån det sista exemplet i förra aktiviteten. Där ritade vi ut en polygon kring Soltorgsgymnasiet. Vi ska nu göra så att en popup med information dyker upp när vi klickar på polygonen. Det gör vi så här:		Vi utgår ifrån det sista exemplet i förra aktiviteten. Där ritade vi ut en polygon kring Soltorgsgymnasiet. Vi ska nu göra så att en popup med information dyker upp när vi klickar på polygonen. Det gör vi så här:

	<codepen pen="pgedqJ" tab="js,result" height="650">		<codepen pen="pgedqJ" tab="js,result" height="650">
	</codepen>		</codepen>
Rad 32:		Rad 31:
	==== Klickhändelser ====		==== Klickhändelser ====
	Vi ska titta på hur man kan lägga till en händelse som triggas när användaren klickar på ett kartobjekt.		Vi ska titta på hur man kan lägga till en händelse som triggas när användaren klickar på ett kartobjekt.

	<codepen pen="gPmoYE" tab="js,result" height="875">		<codepen pen="gPmoYE" tab="js,result" height="875">
	</codepen>		</codepen>

PGJ den 23 oktober 2021 kl. 09.57

2021-10-23T09:57:29Z

← Äldre version		Versionen från 23 oktober 2021 kl. 09.57
Rad 22:		Rad 22:

	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	polygon.bindPopup("Hej", ''latitud'', ''longitud'');		polygon.bindPopup("Hej", <latitud>, <longitud>);
	</syntaxhighlight>		</syntaxhighlight>

PGJ den 31 oktober 2020 kl. 12.19

2020-10-31T12:19:31Z

← Äldre version		Versionen från 31 oktober 2020 kl. 12.19
Rad 21:		Rad 21:
	Vanligtvis utgår popup:ens position ifrån den punkt där användaren klickade. Det går även att ange på vilken latitud och longitud som popup:en ska hamna. Dessa anges då som sista parametrar till metoden, t.ex.		Vanligtvis utgår popup:ens position ifrån den punkt där användaren klickade. Det går även att ange på vilken latitud och longitud som popup:en ska hamna. Dessa anges då som sista parametrar till metoden, t.ex.

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	polygon.bindPopup("Hej", ''latitud'', ''longitud'');		polygon.bindPopup("Hej", ''latitud'', ''longitud'');
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~


	Denna variant kan vara bra att använda om du alltid vill att popup:en ska placeras på en likformig plats, oavsett vilken position som användaren klickar på. En orsak till att göra detta kan vara att man vill undvika att popup:en täcker viss information på kartan.		Denna variant kan vara bra att använda om du alltid vill att popup:en ska placeras på en likformig plats, oavsett vilken position som användaren klickar på. En orsak till att göra detta kan vara att man vill undvika att popup:en täcker viss information på kartan.

PGJ: /* bindPopup */

2019-02-12T08:00:45Z

bindPopup

← Äldre version		Versionen från 12 februari 2019 kl. 08.00
Rad 21:		Rad 21:
	Vanligtvis utgår popup:ens position ifrån den punkt där användaren klickade. Det går även att ange på vilken latitud och longitud som popup:en ska hamna. Dessa anges då som sista parametrar till metoden, t.ex.		Vanligtvis utgår popup:ens position ifrån den punkt där användaren klickade. Det går även att ange på vilken latitud och longitud som popup:en ska hamna. Dessa anges då som sista parametrar till metoden, t.ex.

	<~~code~~>polygon.bindPopup("Hej", ''latitud'', ''longitud'');</~~code~~>		<div class="well well-cyanide-light">
			<syntaxhighlight lang="JavaScript">
			polygon.bindPopup("Hej", ''latitud'', ''longitud'');
			</syntaxhighlight>
			</div>


	Denna variant kan vara bra att använda om du alltid vill att popup:en ska placeras på en likformig plats, oavsett vilken position som användaren klickar på. En orsak till att göra detta kan vara att man vill undvika att popup:en täcker viss information på kartan.		Denna variant kan vara bra att använda om du alltid vill att popup:en ska placeras på en likformig plats, oavsett vilken position som användaren klickar på. En orsak till att göra detta kan vara att man vill undvika att popup:en täcker viss information på kartan.

PGJ: /* Händelser */

2019-01-12T21:12:35Z

Händelser

← Äldre version		Versionen från 12 januari 2019 kl. 21.12
Rad 31:		Rad 31:
	Vi ska titta på hur man kan lägga till en händelse som triggas när användaren klickar på ett kartobjekt.		Vi ska titta på hur man kan lägga till en händelse som triggas när användaren klickar på ett kartobjekt.

	<codepen pen="gPmoYE" tab="js" height="875">		<codepen pen="gPmoYE" tab="js,result" height="875">
	</codepen>		</codepen>

PGJ: /* Exempel */

2019-01-12T21:12:15Z

Exempel

← Äldre version		Versionen från 12 januari 2019 kl. 21.12
Rad 11:		Rad 11:
	Vi utgår ifrån det sista exemplet i förra aktiviteten. Där ritade vi ut en polygon kring Soltorgsgymnasiet. Vi ska nu göra så att en popup med information dyker upp när vi klickar på polygonen. Det gör vi så här:		Vi utgår ifrån det sista exemplet i förra aktiviteten. Där ritade vi ut en polygon kring Soltorgsgymnasiet. Vi ska nu göra så att en popup med information dyker upp när vi klickar på polygonen. Det gör vi så här:

	<codepen pen="pgedqJ" tab="js" height="650">		<codepen pen="pgedqJ" tab="js,result" height="650">
	</codepen>		</codepen>

PGJ: /* Händelser */

2016-01-13T21:04:59Z

Händelser

← Äldre version		Versionen från 13 januari 2016 kl. 21.04
Rad 26:		Rad 26:

	== Händelser ==		== Händelser ==
	Vi kan även koppla så att kod körs när diverse händelser inträffar. I stort sett fungerar detta som händelser vanligtvis gör när vi kodar mot webbläsaren. Händelsehanterare fungerar på liknande vis som i [[jQuery]] och man använder en <code>on</code>-metod för att koppla ihop dem. Det finns flera olika händelsetyper. Några av dessa är unika för för vissa typer av kartobjekt, medan andra är universiella för alla typer av kartobjekt. Vi kan inte täcka alla varianter här, så kolla gärna på [[http://leafletjs.com/reference.html Leflets dokumentation]] för att i detalj se vilka händelser som är tillgängliga för de olika objekttyperna.		Vi kan även koppla så att kod körs när diverse händelser inträffar. I stort sett fungerar detta som händelser vanligtvis gör när vi kodar mot webbläsaren. Händelsehanterare fungerar på liknande vis som i [[jQuery]] och man använder en <code>on</code>-metod för att koppla ihop dem. Det finns flera olika händelsetyper. Några av dessa är unika för för vissa typer av kartobjekt, medan andra är universiella för alla typer av kartobjekt. Vi kan inte täcka alla varianter här, så kolla gärna på [http://leafletjs.com/reference.html Leflets dokumentation] för att i detalj se vilka händelser som är tillgängliga för de olika objekttyperna.

	==== Klickhändelser ====		==== Klickhändelser ====

PGJ: /* Händelser */

2016-01-07T15:09:41Z

Händelser

← Äldre version		Versionen från 7 januari 2016 kl. 15.09
Rad 26:		Rad 26:

	== Händelser ==		== Händelser ==
	Vi kan även koppla så att kod körs när diverse händelser inträffar. I stort sett fungerar detta som händelser vanligtvis gör när vi kodar mot webbläsaren. ~~Händelserna kopplas~~ liknande ~~hur de kopplas~~ i [[jQuery]] ~~med~~ en <code>on</code>-metod. Det finns ~~lite olika händelser som går att koppla till~~ olika typer av kartobjekt. Vi kan inte täcka alla varianter här, så kolla gärna på [[http://leafletjs.com/reference.html Leflets dokumentation]] för att se i detalj vilka händelser som är tillgängliga för olika ~~objekttyper~~.		Vi kan även koppla så att kod körs när diverse händelser inträffar. I stort sett fungerar detta som händelser vanligtvis gör när vi kodar mot webbläsaren. Händelsehanterare fungerar på liknande vis som i [[jQuery]] och man använder en <code>on</code>-metod för att koppla ihop dem. Det finns flera olika händelsetyper. Några av dessa är unika för för vissa typer av kartobjekt, medan andra är universiella för alla typer av kartobjekt. Vi kan inte täcka alla varianter här, så kolla gärna på [[http://leafletjs.com/reference.html Leflets dokumentation]] för att i detalj se vilka händelser som är tillgängliga för de olika objekttyperna.

	==== Klickhändelser ====		==== Klickhändelser ====
Rad 34:		Rad 34:
	</codepen>		</codepen>

	~~Det~~ viktigaste kodraden är den där vi kopplar händelsen till vår funktion, dvs <code>on</code>. Vi kan använda denna metod ~~med~~ de flesta typer av Leaflet-objekt. Precis som i fallet med [[jQuery]] tar metoden händelsetypen som första parameter. Den andra parametern är den funktion som vi vill ska ~~köras~~ när händelsen inträffar.		Den viktigaste kodraden är den där vi kopplar händelsen till vår händelsehanterarande funktion, dvs <code>on</code>. Vi kan använda denna metod på de flesta typer av Leaflet-objekt. Precis som i fallet med [[jQuery]] tar metoden händelsetypen som första parameter. Den andra parametern är den funktion som vi vill ska triggas igång när händelsen inträffar.

	Vår funktion <code>klickade</code> kommer alltså att köras när användaren klickar i vår polygon. I den kollar vi först vilken färg vår polygon har för tillfället. Vi kan komma åt alla utseende-inställningarna via <code>options</code>. I vårt fall vill vi alltså ha färgen, vilken vi kommer åt med <code>options.color</code>. Om denna är satt till gul, vilket den är från starten, ändrar vi den till röd. Metoden <code>setStyle</code> möjliggör alltså att vi kan gå in och redigera ett objekts utseende efter det att det har skapats. ~~Dessa~~ inparameter är ett objekt som innehåller alla de inställningar vi vill förändra.		Vår funktion <code>klickade</code> kommer alltså att köras när användaren klickar i vår polygon. I den kollar vi först vilken färg vår polygon har för tillfället. Vi kan komma åt alla utseende-inställningarna via <code>options</code>. I vårt fall vill vi alltså ta fram färgen, vilken vi kommer åt med <code>options.color</code>. Om denna är satt till gul, vilket den är från starten, ändrar vi den till röd. Metoden <code>setStyle</code> möjliggör alltså att vi kan gå in och redigera ett objekts utseende efter det att det har skapats. Dess inparameter är ett objekt som innehåller alla de inställningar vi vill förändra.

	<div class="well well-meadow">		<div class="well well-meadow">
	Lägg märke till att om du klickar flera gånger och råkar klicka för "fort", kommer ~~det~~ inte att tas som en klickhändelse. Istället ses det som ett dubbelklick. Då körs förstås inte vår händelse-hanterare.		Lägg märke till att om du klickar flera gånger och råkar klicka för "fort", kommer dina klick inte att tas som en klickhändelse. Istället ses det som ett dubbelklick. Då körs förstås inte vår händelse-hanterare.

	Så som exemplet ser ut nu, tar Leaflet ett dubbelklick som en zoom-gest.		Så som exemplet ser ut nu, tar Leaflet ett dubbelklick som en zoom-gest.

PGJ: /* Popups */

2016-01-07T15:04:36Z

Popups

← Äldre version		Versionen från 7 januari 2016 kl. 15.04
Rad 2:		Rad 2:

	== Popups ==		== Popups ==
	~~Ett~~ bra sätt att visa extra information som gäller för ~~vissa intressedelar av~~ kartan ~~är att använda sig av popups~~. Det finns bra stöd i Leaflet för detta och det är mycket enkelt att koppla popups till objekt som lagts till på kartan. Popup triggas igång och visas när användaren klickar på det objekt till vilket popup:en är kopplad.		Popups är ett bra sätt att visa upp extra information som gäller för intressepunkter på kartan. Det finns bra stöd i Leaflet för detta och det är mycket enkelt att koppla popups till objekt som lagts till på kartan. Popup triggas igång och visas när användaren klickar på det objekt till vilket popup:en är kopplad.

	<div class="well well-meadow">		<div class="well well-meadow">
	Man kan bara ha en popup framme samtidigt. Om ~~den~~ redan är öppen och användaren klickar ~~så att~~ en ~~annan ska visas~~, kommer den ~~föregående~~ att stängas ned ~~först~~. Om vi klickar på samma objekt ~~som öppnade~~ en popup, så kommer den kopplade popup:en att stängas ned. Likaså försvinner popup:er även om vi klickar utanför det kopplade objektet, oavsett om en ny popup triggas igång eller ej. Självklart kan användaren även klicka på det lilla krysset i popup:en för att stänga denna.		Man kan bara ha en popup framme samtidigt. Om en popup redan är öppen och användaren klickar på en ny popup, så kommer den första popup:en att stängas ned. Om vi klickar en gång till på samma objekt ifrån vilket det öppnades en popup, så kommer den kopplade popup:en att stängas ned. Likaså försvinner popup:er även om vi klickar utanför det kopplade objektet, oavsett om en ny popup triggas igång eller ej. Självklart kan användaren även klicka på det lilla krysset i popup:en för att stänga denna.
	</div>		</div>