I flera tidigare inlägg har jag använt mig av en samling Javaskript som går under benämningen Leaflet. Med hjälp av dessa filer och en webbserver så kan man lägga till kartor på en hemsida ganska enkelt.
I detta och några kommande inlägg så går jag lite djupare in på vad som går att göra och ger exempel på hur du kan bygga upp din egen webbkarta.
Grundförutsättning
Du skall ha en webbserver med stöd för Java och tillgång till katalogen där hemsidorna lagras (Linux Apache: /var/www).
Du skall dessutom ha hämtat och installerat Leaflet i en katalog kallad ”leaflet” i webbserverns rootkatalog (se ovan).
Ytterligare Javaskript och stilmallar (*.js/*.css) som behövs senare skall placeras i samma katalog, medan bilder placeras i undermappen ”images”.
Vill du ha hjälp med installationen så kan du titta i tidigare inlägg (Enkel webbklient till enkel WMS).
Din egen webbkarta
I webbroten skapar du en html fil, exempelvis ”index.html”. Denna skall bestå av <HTML></HTML> taggar och mellan dessa <HEAD></HEAD> samt <BODY></BODY> taggar.
I <HEAD> skall du lägga till följande:
<link rel=”stylesheet” type=”text/css” hret=”leaflet/leaflet.css” />
<style type=”text/css”>
#map { width: 800px; height: 600px; }
</style>
<script type=”text/javascript” src=”leaflet/leaflet.js”></script>
Här bestäms hur stor kartan skall vara i pixlar och det skapas länkar till grundläggande stilar och skript. Senare så kommer vi att lägga till mer kod i <HEAD> taggen men detta räcker så länge.
I <BODY> taggen så kan du skapa vilket innehåll du vill, men här fokuserar vi på kartan. Det första som behövs är en platshållare för kartan. Det är denna som bestämmer var på hemsidan kartan skall uppträda. Den kan placeras för sig själv eller exempelvis i ett fält i en tabell. När du experimenterar så kan du prova att ändra kartans storlek till procent (%) i stället för pixlar (px).
<div id=”map”></div>
Det behövs även ett skript för att hantera den data som skall visas. Detta kan göras i en separat fil och infogas på samma sätt som javaskripten i <HEAD> taggen, men här väljer vi att skriva in koden direkt i html-dokumentet i en <script> tagg:
<script type=”text/javascript”>
// Detta är en kommentar som säger att variabeln nedan skapar ett OSM lager.
var osm = new L.TileLayer(”http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png”);
// Raderna nedan skapar själva kartan med rätt startläge och lager tända
map = new L.map(’map’, {
center: new L.LatLng(57.66634,14.97231),
zoom: 14,
layers: [osm]
});
</script>
Det var allt grundläggande. Testa själv och se att det fungerar, gå sedan vidare. Tänk även på att om du kopierar texten ovan och klistrar in den så måste du ersätta ” och ’ tecken eftersom dessa har fel teckenkod här på bloggen. Du kan även prova att ladda ner hela koden i pdf format: geosupportsystem_Leaflet_del1.
Nästa gång så lägger vi till egna WMS lager och skapar förutsättningar för att hantera dessa lager.
I del 3 så lägger vi till funktioner som zoom-slider, fullskärmsvisning och skalor.
Del 4… har jag ännu inte planerat för!