Etikettarkiv | webbkarta

Nästan för enkelt…

Igår pratade jag om PNG vs JPG i tiles för webbkartor. I dag tänkte jag lite snabbt visa vad det är jag hållit på med och som rubriken antyder så var det faktiskt förvånansvärt enkelt.

Jag säger inte att vem som helst klarar av det, för du behöver skapliga kunskaper i java-skript, men det mesta kan man faktiskt googla sig till, och modifiera efter önskemål.

Skärmbild från 2015-11-07 17:38:22 Läs mer…

Leaflet 1.0 närmar sig

Det är väldigt många som använder sig av Leaflet för att visualisera kartor i webbläsare. Det är en liten, snabb, effektiv motor för att fixa det mesta man kan tänka sig för den här typen av uppgifter.

Version 0.7.3 släpptes 23 Maj 2014 och anses i huvudsak vara komplett, och även Vladimir Agafonkin som står bakom Leaflet tycker att versionen är mer eller mindre perfekt.

Version 1.0 har varit på gång ganska länge, men har av flera skäl dragit ut på tiden. Nu är det dock snart dags…

Skärmbild från 2015-07-12 12:04:25Det finns milstolpar för såväl beta1 som beta2 ute på GitHub, men det är några procent kvar innan vi får se en ”officiell” beta från Leaflet. Det går dock att testa koden genom att ladda hem den från GitHub redan nu.

Det finns massor med förbättringar och en del fixar till kända fel och om dessa går det att läsa i ändringsloggen.

Jag går inte in på några specifika detaljer eftersom då Leaflet inte skall vara fokus i webbapplikationen utan kartan, så är det inga dramatiska visuella förändringar att vänta. Använder du Leaflet mycket så kommer du dock att märka av många av dessa förändringar. Inte minst så kommer en del kod att behöva skrivas om för att fullt ut dra nytta av en del förbättringar.

En liten varning

En del förändringar är ganska påtagliga. Detta påverkar inte så mycket Leaflet i sig, men däremot så behöver många plug-in anpassas. Då Leaflet är tunn på inbyggd funktionalitet så är det många som förlitar sig på sådana plug-in för olika saker.

Innan du implementerar Leaflet 1.0 så måste du därför säkerställa att de plug-in du behöver fortfarande fungerar som det är tänkt.

Om du själv utvecklat plug-in för Leaflet så är det hög tid att se över om dessa är kompatibla med 1.0.

[EDIT]

Beta 1 släpptes under eftermiddagen onsdag Svensk tid.

http://leafletjs.com/2015/07/15/leaflet-1.0-beta1-released.html

Mapbender3

Då var det dags att titta på något för mig helt nytt, nämligen Mapbender.

Mapbender är ett php, javascript, xml-ramverk för att sätta upp webb-kartklienter med lite utökad funktionalitet utan att behöva koda javascript själv i exempelvis OpenLayers och Leaflet. Mapbender är dock baserad på OpenLayers för karthanteringen.

På hemsidan (http://www.mapbender.org) talar man även om mekanismer för autensiering med användare och grupper.

Mapbender3 är en ganska ny release som är baserad på Symfony2, JQuery och OpenLayers.

Screenshot from 2015-02-15 09:59:27

Det finns flera exempel på Internet med organisationer som använder Mapbender, exempelvis Geoportal.de (bilden ovan).

För att skapa en ”portal” eller tjänst så behöver man ”bara” logga in och välja ”Create New Application”. Sedan väljer man en mall/template och lägger till de komponenter man vill ha med.

Screenshot from 2015-02-15 10:27:53

Beroende på vilken mall man valde så finns det olika områden där man kan lägga till innehåll, lite som Widgets i andra sammanhang.

Det går att styra utseendet via CSS och det finns instruktioner för hur man skapar egna mallar på hemsidan.

Nu har jag inte detaljstuderat allt, men det första intrycket är att det ser snyggt ut och att det är ett smart koncept att sätta upp karttjänster via den här typen av portal. Sedan känns det lite rörigt och jag har inte riktigt fått grepp om hur man går till väga för att få igång en karttjänst som jag vill. Dokumentationen är inte helt tydlig, men man får väl jobba lite…

Man skall först lägga till WMS källor, sedan skapa ett Lagerset, som man lägger till lagerinstanser i, som man sedan lägger till i den kartwidget som man placerar i sin layout…

Det går att lägga till OGC-WMS lager och använda dessa i de kartor man skapar, men dessa WMS-tjänster får skapas någon annanstans. Mapbender tillhandahåller ingen kartserver, utan är en så kallad ”front-end” för sådana.

Vill du testa Mapbender3 så kan du använda OSGeoLive som jag skrev om igår…

Annars finns det flera exempel på http://mapbender3.org/en/gallery. Jag tycker att Gütersloh har en sida som ganska bra belyser hur man skulle kunna använda Mapbender3 för att sätta upp en portal för exempelvis en Kommun.

Nu kanske mina första intryck är lite reserverade, men det här känns faktiskt ganska bra. Är man lite tveksam inför att satsa på en kartplattform med mycket kodskrivande så kan Mapbender absolut vara något att titta närmare på. Det borde inte vara krångligare än exempelvis CMS/DMS tjänster som Drupal, Nuxeo eller för den delen Microsoft Share Point.

Det är öppen källkod, och i och med OSGeoLive så är det som sagt inte ens svårt att prova.

Vad har jag gjort i jul?

Jaha då var jul och nyår över och de flesta av oss är väl tillbaka i normala rutiner igen.

Vad har ni gjort under ledigheten? Varit med familj och vänner utgår jag från, men mer då?

Själv har jag haft så många påbörjade projekt att jobba med, så jag hade kunnat fylla minst tre gånger så mycket ledig tid och ändå inte blivit färdig.

Vad är det då för projekt jag hållit på med. En del foto och filmprojekt har det blivit, men det kan vi lämna här och nu.

Jag har sedan börjat titta på panoramabilder och hur man kan skapa dessa så snabbt och enkelt som möjligt, utan att det för den skull blir dåligt. Och nej, en panorama app i telefonen duger inte.

Det blev en lång process med massor av experiment och 3D utskrifter. Resultatet blev en ”panoramarobot” som när den är helt klar tar de bilder som behövs för ett helt sfäriskt panorama på ungefär en minut. Bilderna skall sedan bearbetas, och detta har jag också skapat en process för så att det blir riktigt bra panoramabilder med drygt 50 megapixels upplösning. Jag har sedan tidigare en större mycket mera avancerad ”robot” som kan ta ännu mycket bättre bilder och med högre upplösning (gigapixel), men den har jag inte byggt själv.

Är du nyfiken på roboten jag byggt så finns en tidig prototyp på ”Thingiverse” och jag gjorde även en film på YouTube.

Den färdiga roboten har mindre elektronik och färre gummiband… Dessutom eftersom den är lättare så ”svajjar” den mycket mindre.

När jag nu kan skapa såväl ”ekvirektangulära” (standard 360×180) som ”stereografiska” (se bild nedan) panoraman, så blev nästa steg att se vad man kan göra sedan.

EKSJOchurchJag har tidigare använt lite olika javaskript för att visa panoraman på webbsidor, vilket fungerat bra även om det funnits en del problem och nackdelar.

Nu råkade jag på Pannellum.org som är öppen källkod för en panoramavisare i HTML5, vilket lät intressant att titta närmare på. En skillnad som jag gillar med pannellum jämfört med andra javaskript är navigeringen och panoreringen inne i panoramat (jämför PTviewer här). Det finns dessutom väldigt få javaskript för panoramavisning som är fria/öppen källkod.

I praktiken så är all nödvändig kod för panoramat inbakad i en html-fil och konfiguration görs antingen via URL-strängen eller en JSON-fil.

För att visa enkla panoraman så görs det enklast via URL-strängen (exempel).

Men det går som sagt att skapa ganska komplicerade rundturer med skräddarsydda JSON skript (exempel). Dessa rundturer skriver man koden till manuellt, vilket kan bli nog så krångligt inte minst när man skall placera ut alla hyperlänkar och info-symboler. Därför så skapade jag ett skriptprogram och lite metoder för att även detta skulle kunna göras smidigt.

Ett problem med HTML5 och Pannellum är att man måste vara lite försiktig med upplösningen i bilderna, då mobila klienter inte kan hantera bilder större än 4096 pixlar. Desktop klienter brukar klara minst 8192 pixlar, och några klienter med bra grafikhantering ännu större.

Mina bilder i exemplen ovan är 5000 pixlar, vilket innebär att om du använder en mobil klient, så kommer du inte att kunna se några panoraman, sorry! Jag hade redan skapat och skalat ned bilderna till 5000 pixlar, när jag fick reda på begränsningen för mobila klienter. Om du vill kan du testa samma panorama i olika upplösningar, inklusive för mobila klienter genom att klicka här. Dessutom så är den en skillnad mellan Android och iOS, som man också måste planera för.

Det går att komma runt det här med upplösning genom att använda en variant av ”tiles”, men detta har jag inte tittat närmare på än.

En annan begränsning är att några funktioner kräver en modern webbläsare för att exempelvis kunna köras i helskärmsläge. Dessutom så måste alla filer läsas från en webbserver och inte från en lokal, eller delad katalog… (säkerhetskrav).

Vad är då kopplingen till GIS?

Jo, det går ju att skapa en webbkarta, med exempelvis Leaflet eller OpenLayers och där lägga ut klickbara punkter som öppnar dessa panoraman. Kombinerar man exempelvis med mitt exempel på ”Story Map” så går det att bygga upp väldigt interaktiva rundturer i en mängd olika syften.

Allt som krävs är öppen källkod, lite javaskript, JSON, HTML5 och så förstås en panoramarobot…

Webbkartor från Skogsstyrelsen

För ett tag sedan tittade jag lite på Länsstyrelsernas webbkartor, vilket inte fungerade alls eftersom man använder Silverlight, som inte stöds av Linux samt många mobila plattformar.

Nu tänkte jag titta lite kort på Skogsstyrelsens webbkartor (länk), där de bland annat publicerat en karta för den stora branden utanför Sala och Fagersta.

Screenshot from 2014-08-31 12:35:45Klicka på bilden ovan för att starta Brandkartan i ett nytt fönster

Det går att välja bland flera olika bakgrundskartor och flygbilder. Exempelvis finns en före-efter karta där man kan jämföra bilder före branden, men nytagna bilder efter (se bild nedan).

brand

Det går även att lägga på lager med utförda avverkningar samt natur- och kulturhänsyn, vilket i sammanhanget kan vara av intresse.

Om tjänsten då. Det mesta fungerar och man får fram det man önskar även om det inte är helt intuitivt. Sedan så verkar det vara något lite galet med en del lager som gör att kartan inte vill visas helt ut till kanten överallt. Kanske något med WMTS tjänsterna någonstans? Å andra sidan så med tanke på det jag beskriver härnäst så kanske det bara är en slump och om jag provar att ladda om sidan några gånger så kanske det blir bättre.

Det jag först reagerade på var nämligen att det tog en hiskelig tid att starta tjänsten och innan olika funktioner svarade på kommandon. Det kan bero på att servrar var i vila, men det kan finnas andra skäl också.

När jag tittar på tjänsten i Firebug (tillägg i Firefox) så framgår det tydligt att tjänsten är baserad på Open Layers (2.12) och GeoExt, men det som jag reagerar på är att det finns över 260 hänvisningar till javascriptfiler som skall läsas in, och då har jag bara räknat de som rör Open Layers!

Namnlös

När dessutom huvuddelen av dessa skriptfiler är många hundra rader långa så förstår man att det är fruktansvärt mycket kod som skall läsas in i datorn och sedan hanteras av webbläsaren för att allt skall fungera.

Jag kan inte tillräckligt mycket om javascript för att säga något definitivt, men det här känns fel.

Screenshot from 2014-08-31 17:05:08

När jag testkör sidan genom http://www.webpagetest.org så blir det lite intressanta resultat. Dels blir den initiala laddningstabellen otroligt lång och redovisas som 12,4 sekunder till ”document load” och drygt 21 sekunder tills sidan är klar, medan återbesök tar knappt två sekunder.

Det som sticker ut lite förutom att det är väldigt många skript som skall läsas in är ArcGIS 9.3 REST API som tar väldigt lång tid att läsa in (bild nedan).

Screenshot from 2014-08-31 17:13:14

Som avslutning så kan man utläsa från testet att av den totala mängden anrop vid första visningen så står javascript för 272 stycken, vilket utgör över 4 Mb i storlek.

Screenshot from 2014-08-31 17:17:12

Diagrammen ovan gäller för första visningen. Efterföljande visningar har betydligt lägre andel javascript (av naturliga skäl) och en större andel bildinnehåll även om mängden bilddata inte ökar.

Egen server för geodatatjänster – Del 8

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.

bok21

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

bok22

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

Egen server för geodatatjänster – Del 7

Jag kan lite för lite om OpenLayers3 för att avgöra om det är det som är framtiden, men exempelkoden från förra inlägget ser faktiskt ganska enkel ut. För tillfället så lämnar jag dock OpenLayers och fokuserar på Leaflet.js. Främsta anledningen är att det är många där ute som föredrar Leaflet av olika anledningar, inte minst på grund av storleken och att det fungerar bra på mobila klienter.

Exempel på WebbApp

Egentligen skulle det nog heta ”webbsida med interaktiv karta”, men det är ju populärt att kalla just sådana för ”webbappar” så låt gå för det.

Jämfört med exemplet från förra inlägget så kommer det att göras några justeringar.

För det första: GIS-användare är sällan de bästa på webbdesign, och för det andra så är webbdesigners sällan bäst på GIS. Om man kan så bör man låta webbdesigners sköta sitt område och GIS-ansvariga sitt, och hur detta kan gå till kommer att belysas här.

Webbdesignern är ansvarig för sidorna generellt och i samverkan med GIS-ansvariga sätter man upp regler för kartorna. Det kan vara rent tekniska saker som hur stor kartan måste vara eller hur liten den kan bli innan det blir ohanterligt. Det kan också vara mjukare frågor som vilken ”känsla” som skall finnas på sidan. Det duger inte att ha en varm och mjuk webbsida med en kall och hård karta.

Det senare kan man uppnå exempelvis med fastställda färgpaletter och val av typsnitt och stilar.

Sedan kan man som GIS-ansvarig överlämna själva webbsidorna till designern, så länge några specifika rader finns med i koden.

<html>
<head>
<link rel="stylesheet" type="text/css" href="script/leaflet.css" />
<style type="text/css">
   #kartan {width: 100%; height: 100%;}
</style>
<script type="text/javascript" src="script/leaflet.js"></script>
<script type="text/javascript" src="script/kartan.js"></script>
</head>
<body>
   <div id=”kartan”></div>
</body>
</html>

Först så skall det finnas en rad som hämtar kartans stilmall och här har kartstorleken satts till 100 x 100 % med en annan stilmall. Det går att sätta storleken på annat sätt, men såhär så kan man hålla ihop koden på ett snyggt sätt. Finessen med att sätta storleken till 100% är att då kan webbdesignern enkelt skapa en ”hållare” för kartan och kartan kommer att fylla ut hela detta utrymmet.

Det skall finnas en rad som hänvisar till javaskriptet för Leaflet, men även en rad som hänvisar till alla skript som rör själva kartan. Tidigare så skrevs skriptet i html koden, men genom att bryta ut koden så går det enkelt att skilja på ansvarsuppgifterna mellan webbdesigners och GIS-ansvariga. I exemplet ovan så finns alla skript på den relativa sökvägen ”script” på webbservern.

Slutligen så skall det finnas en ”platshållare” för själva kartan i koden för sidan. Det är detta som är ”<div>”-taggen.

På detta sätt så har man två små ”block” med kod som sköter hela kartan i själva webbsideskoden. Det är betydligt fler rader i den utbrutna filen ”kartan.js”.

Kartan.js

I grunden så är det det skript som fanns innanför ”<script>”-taggen i det tidigare exemplet som skall finnas i denna fil, men för att kunna ha hänvisningen i ”<head>”-taggen som beskrivits ovan, så måste hela skriptet omslutas av en funktion som gör att skriptet inte körs förrän sidan laddat färdigt.

window.onload = function () { här hamnar skriptet }

Först och främst byggs kartan upp av olika lager. Dessa definieras med var sitt uttryck. I exemplet nedan så är det två bakgrundslager från olika tjänster på nätet och två egna lager från QGIS-Server. Det går enkelt att lägga till flera bakgrundskartor och lager, såväl från källor på Internet som från den egna servern genom att modifiera dessa rader. Det finns många fler typer av lager man kan använda, men dessa utelämnas tills vidare.

window.onload = function () {
  // Detta är en kommentar

  // Open Street Map som lager
  var osm = new L.TileLayer(”http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png”, {
    attribution: 'Open Street Map'
    }); 

  // Stamen Toner (ersätt toner med watercolor om så önskas)
  var toner = new L.TileLayer("http://tile.stamen.com/toner/{z}/{x}/{y}.png", {
    attribution: 'Stamen'
    }); 

  // Eget lager från QGIS Server, anpassa lagernamn, filnamn och WMS-lagernamn
  var lagernamn = new L.TileLayer.WMS(”http://192.168.1.42/cgi-bin/qgis_mapserv.fcgi?VERSION=1.3.0&map=/qgis/filnamn.qgs”, {
    layers: 'WMS-lagernamn',
    format: 'image/png',
    transparent: true,
    minZoom: 7
    }); 

  // Eget lager från GeoServer, anpassa lagernamn2, filnamn2 och WMS-lagernamn2
    var lagernamn2 = new L.TileLayer.WMS("http://192.168.1.42:8080/geoserver/Geoserver/wms?service=WMS", {
    layer: 'WMS-lagernamn2',
    format: 'image/png',
    transparent: true,
    minZoom: 7,
    });

  // Observera att koden fortsätter längre ner på sidan...

Det går att ha andra format än png, men om man vill ha transparenta lager så måste man välja png. MinZoom är bra för att begränsa när ett lager skall visas eller inte. Ett lager med exempelvis ortnamn över Sverige blir snabbt ohanterligt när man zoomar ut över ett stort område. Det går även att använda maxZoom för att begränsa lagervisning när man zoomar in. När lager är definierade så skall kartan skapas och ställas in.

Vill man använda andras lagertjänster så kan dessa ställa villkor för användandet, där ett vanligt sådant är att man ”tillskriver” källan på kartan med raden ”attribution”. Det går att använda enklare html-kod som exempelvis en länk med taggen ”<a>”. Det går att använda attribution på såväl baslager som egna transparenta lager.

bok20

Vill man ta bort tillskrivningen så lägger man till en rad med texten: attributionControl: false, där kartan deklareras (ej med i koden nedan). Sedan kan man skapa en helt egen skräddarsydd med ett kommando av typen:

L.control.attribution({position: 'topright', prefix: 'Min Egen Webbkarta'}).addTo(map);

Vill man inte ha ett ”prefix” så sätter man false här i stället. Jag rekommenderar inte att man tar bort tillskrivning eller struntar i det av respekt till dem som lagt ner en massa jobb på kartorna, men det kan finnas bättre platser än i kartan att placera denna information. Det brukar dock regleras i licensvilkoren för dessa tjänster hur tillskrivningen skall gå till.

  // Detta är fortsättningen av koden ovan
  // Skapa kartan med önskat startläge
  kartan = new L.Map('kartan', {
    center: new L.LatLng(57.66634,14.97231),
    zoom: 12,
    layers: [osm, lagernamn]
    });

Här ovan används samma namn för kartan som i ”<div>”-taggen i htmldokumentet tidigare. Layers anger vilka lager som skall vara tända från start och här nedanför så skapas en lagerkontroll om man vill kunna tända och släcka olika lager.

BaseMaps är en lista med kartor där bara en åt gången kan vara vald och overlayMaps är lager som kan tändas och släckas fritt. Efter definitionen av dessa lager i grupper så skapas kontrollen för lagerna.

  // Lagerhantering
  var baseMaps = {
    ”Open Street Map”: osm,
    ”Stamen Toner”: toner
    };
  var overlayMaps = {
    ”Eget WMS lager QGIS”: lagernamn,
    ”Eget WMS lager GeoServer”: lagernamn2
    };
  L.control.layers(baseMaps, overlayMaps).addTo(kartan);
}
// Detta är sista raden i kartan.js

Variabeln ”kartan” i sista raden är åter igen samma som tidigare. Den avslutande klammerparentesen stänger den inledande ”window.onload” funktionen.

Med utgångspunkt i det ovanstående så kan man själv skapa den karta man önskar för en enkel webbapplikation.

I nästa inlägg så tittar vi på lite finesser i ”webbappen”.