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.
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.
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:
bindPopup
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 polygon. I detta objekt finns en metod som heter bindPopup med vilken vi kan koppla till popup-funktionalitet.
I den enklaste varianten tar bindPopup 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 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.
polygon.bindPopup("Hej", <latitud>, <longitud>);
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 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å 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.
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 klickade 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 options. I vårt fall vill vi alltså ta fram färgen, vilken vi kommer åt med options.color. Om denna är satt till gul, vilket den är från starten, ändrar vi den till röd. Metoden setStyle 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.
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.
Nästa aktivitet
I nästa aktivitet ska vi gå igenom ett litet fylligare Leaflet-exempel.