I detta inlägg så tillförs lite funktionalitet som kan vara bra att ha koll på för en inbäddad webbkarta. Framför allt handlar det om att kunna peka ut olika saker i kartan, och att få kartan att hamna där man vill ha den lite mera dynamiskt.
”Pin” med popup
Pins eller knappnålar är flitigt använda på webbkartor. Det kan exempelvis vara för att peka ut en företagsadress, med länkar till företagets hemsida och kanske en bild i en popup-ruta.
// Här är en "pin" på kartan var pin = L.marker([57.66634,14.97231]) .addTo(kartan) .bindPopup("<b>Pop-Up</b><br>En valfri text i HTML.") .openPopup();
Koden ovan kan infogas i javascriptkoden från förra inlägget på slutet, så länge den står innanför den sista klammerparentesen. Vill man ha med citationstecken i html-koden för pop-up-bubblan så skall det vara enkla sådana och inte normala dubbla.
Det går även att anpassa själva markören på flera sätt. Detta görs genom att infoga dessa alternativa inställningar efter positionsangivningen.
var pin = L.marker([57.64634,14.95231], { draggable: true, title: 'Drivmedel', opacity: 0.5 }) .addTo(kartan)
I koden ovan är tre speciellt enkla och användbara alternativ. Draggable gör markören flyttbar, title är en ”hoover” text som visas när man håller musen över och opacity är markörens transparens. Det finns många fler alternativ men dessa kan man själv utforska vidare.
Det går på samma sätt att skapa linjer och polygoner, men detta beskris inte här. Däremot skall det nämnas att man kan hantera dessa markörer, linjer och ytor som ett lager som övriga. Det enda man behöver göra är att skapa en lagergrupp och lägga till markörerna till lagergruppen i stället för kartan. Sedan lägger man till lagergruppen tillsammans med övriga lager i lagerhanteringen.
var grafik = new L.LayerGroup(); // Kod för att skapa en pin finns här... .addTo(grafik) // Nedan kod för att anpassa koden för lagerhantering. var overlayMaps = { ”Pins”: grafik
Använd koden ovan som mall och modifiera det tidigare exemplet för att få lagergruppen att fungera.
Starta på bestämd plats
Det händer att man vill kunna skapa en länk från någon annanstans till en karta som är inzoomad och panorerad till en speciell koordinat. Det går som vi sett tidigare att skapa en sida eller ett javaskript för detta, men det blir lite jobbigt i längden med sådana sidor eller skript om det är många länkar som önskas. Varför inte använda ”GET” och hämta informationen från http-strängen eller länken i sig, och sedan använda samma sida för alla anrop?
Man kan tänka sig att man skapar olika sidor för olika startläge när det gäller lager och bakgrundskartor, men principen blir den samma. Först så behövs en funktion som läser eventuella variabler i URL-länken:
function GetUrlVariabel(Variabel){ var SearchVariabel = window.location.search.substring(1); var VariabelArray = SearchVariabel.split('&'); for(var i = 0; i < VariabelArray.length; i++){ var Nyckelpar = VariabelArray[i].split('='); if(Nyckelpar[0] == Variabel){ return Nyckelpar[1]; } } }
Sedan så skall man skapa variablar för att hantera zoom, longitud och latitud.
var zoom = GetUrlVariabel('z'); var lon = GetUrlVariabel('x'); var lat = GetUrlVariabel('y');
Koden ovan placeras tidigt, eventuellt först, i filen kartan.js som använts tidigare och den befintliga koden modifieras enligt beskrivningen nedan.
När man skapar kartan, så använder man inte bestämda koordinater utan dessa variabler för latitud, longitud och zoom.
kartan = new L.Map('kartan', { center: new L.LatLng(lat,lon), zoom: zoom, attributionControl: false, layers: [osm] });
När man skriver in adressen, eller skapar en länk, till webbsidan, så kommer ingenting att visas om det inte finns med x-, y- och z-variabler i URL-strängen. Variablerna anges som exemplet nedan:
http://192.168.1.42/webbkartor/osm.htm?z=13&y=57.666&x=14.98
Denna typ av länkar kan sedan användas för att öppna en karta med angiven position och zoom.
Principen går att bygga på med fler variabler och ersätta fler värden från skriptet. Varför inte skicka med ett namn eller en text (var namn = GetUrlVariabel(’namn’) ) och skapa en ”Pin” med pop-up på den angivna positionen?
För att långa texter i URL-länkarna skall fungera så krävs dock ett litet trick.
Se skillnad mellan URL och Pop-Up i bilderna ovan.
För att läsa variabeln n i adressfältet i bilden ovan så används decodeURIComponent på strängen:
var namn = decodeURIComponent(GetUrlVarabel('n'))
Sedan är det en vanlig Pin enligt tidigare med .bindPopup(namn).
Nu har du verktygen för att bygga någorlunda allsidiga ”webbappar” med anpassade interaktiva tjänster. Det går att bygga ut med ytterligare funktionalitet, men det lämnar jag här och nu. Det går även att möjliggöra redigering av data via webbgränssnittet, men detta förutsätter en annan typ av kodning med exempelvis PHP, så det får vi ta en annan gång.
I nästa inlägg, som rundar av den här serien med inlägg så kommer det att handla om säkerhet.