Att skapa interaktivitet med Leaflet

Från Webbling
Hoppa till: navigering, sök

Vi får ju redan i grunden en del automatisk interaktivtet 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

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.

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.

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 popupp med information dyker upp när vi klickar på polygonen. Det gör vi så här:


See the Pen pgedqJ by Patrik Grip-Jansson (@PGJ) on CodePen.

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

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 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 on-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å [Leflets dokumentation] för att se i detalj vilka händeler som är tillgängliga för olika objekttyper.

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.


See the Pen gPmoYE by Patrik Grip-Jansson (@PGJ) on CodePen.

Det viktigaste kodraden är vi kopplar händelsen med on. 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.

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å ha 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. Dessa 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 det inte att tas som en klickhändelser. 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.