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