Att skapa interaktivitet med Leaflet
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:
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.