Visa källa för Att skapa interaktivitet med Leaflet

Vi får ju redan i grunden en del automatisk interaktivitet när vi använder oss av Leaflet. Användaren kan panorera och zooma runt i kartan. Vi ska nu titta på hur man kan lägga till mer saker som gör att användaren kan interagera med kartan.

== Popups ==
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">
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>

=== 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:
<codepen pen="pgedqJ" tab="js,result" height="650">
</codepen>

==== <code>bindPopup</code> ====
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.

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.

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

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.

== 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.

==== 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.
<codepen pen="gPmoYE" tab="js,result" height="875">
</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. 

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">
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.
</div>

== Nästa aktivitet ==
I nästa aktivitet ska vi gå igenom ett litet fylligare Leaflet-exempel.

[[En exempelapplikation i Leaflet]]