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.
Mitt mål var att skapa ett ramverk för en enkel, men funktionell webbkarta som kunde köras i vilken webbläsare som helst (företrädesvis lite nyare) direkt från en USB-disk.
Jag provade såväl Leaflet som OpenLayers3 men fastnade för OpenLayers3 då jag tyckte det var snyggare och bättre hantering av exempelvis panorering och zoom. Dessutom så skulle jag inte behöva en massa extra plugin för varje liten funktion, samtidigt som bandbredd inte var något problem då allt skulle köras via USB.
”Snyggifieringen” började med Bootstrap, som är ett ramverk för att skapa responsiva sidor, men framför allt så blir det väldigt snyggt med många färdiggjorda funktioner och stilar. Sidan består av från början två komponenter. En navigationslist och ett kartfönster, allt utfyllt till kanterna och anpassas till skärmstorleken.
OpenLayers3 används som sagt för att visa mina kartor, och sidan är förberedd för att hantera tiles lagrade i en katalog döpt till ”tiles”. Sidan förutsätter att det är här data finns, men bryr sig inte om vad det är för kartor i övrigt så här är det bara att kasta in de tiles man vill visa.
För att visa koordinater i SWEREF99TM och MGRS så använder jag Proj4JS och mgrsJS, som är en utveckling av Proj4JS. Det enda övriga programbibliotek jag behöver, eller det är framför allt Bootstrap som behöver det, är jQuery.
Sidans format och grundläggande struktur skriver jag in i ”index.htm”. För att anpassa stilar, exempelvis färger och komponenters placering, så har jag skapat en egen CSS-fil (”index.css”) som också läses in. Jag behöver därför inte ändra i de massiva stilfilerna för exempelvis Bootstrap och OpenLayers.
Själva innehållet placerar jag i en tredje fil (”config.js”). Det är här jag från gång till gång enkelt kan göra mina anpassningar.
Det jag enkelt vill kunna ändra finns tidigt i filen som variabler. Jag kommer sannolikt att utöka antalet variabler något, men framför allt så kommer jag att bygga på en annan funktion.
Jag kan nämligen åsidosätta många av variablerna genom att anpassa url-sökvägen. Det är därför inga problem att exempelvis skapa länkar eller bokmärken som direkt tar mig till en specifik plats.
Jag kan tänka mig att exempelvis lägga till en funktion för att välja en alternativ uppsättning tiles, genom att skicka med namnet på en ny tile-katalog. Ett alternativ kan vara att skicka med en lista med ”bokmärken” eller tiles som organiseras automatiskt i länkar i menyn i överkant. Då blir det dock lite mer att göra.
function GetUrlValue(VarSearch){
var SearchString = window.location.search.substring(1);
var VariableArray = SearchString.split('&');
for(var i = 0; i < VariableArray.length; i++){
var KeyValuePair = VariableArray[i].split('=');
if(KeyValuePair[0] == VarSearch){
return KeyValuePair[1];
}
}
}
Funktionen ovan hittade jag på ett forum och den anropas med exempelvis GetUrlValue(”pos”) för att då returnera värdet som är tilldelat pos i sökvägen. Om det inte finns någon variabel med det namnet så returneras ingenting. Jag kan därför testa med en if sats om det finns ett värde för en specifik variabel och om det gör det ersätta en befintlig variabel med detta värde.
Om man kan tänka sig en lösning som hela tiden fungerar med Internet så behöver man heller inte (som jag gjort) spara filer för OpenLayers3 med flera lokalt. Det finns resurser online som fungerar lika bra. Jag vill dock som sagt kunna använda allt helt fristående från ett USB minne, och dessutom så har jag modifierat OpenLayers3 skriptet lite för att exempelvis byta till svenska på lite popup-texter.
Hur mycket kod är det då? Om jag bortser från det som kommer från exempelvis OpenLayers3 och bara räknar min egen kod så är htm-dokumentet 67 rader, config-filen 136 och min stilfil 52. Då har jag även räknat in alla kommentarsrader och tomma rader! Inte mycket alls, för något som jag själv tycker blev riktigt bra.