Mer om Leaflet kartor på webben – Del 3

Har du inte läst tidigare inlägg så skall du nog börja med det. Detta inlägg bygger vidare på det HTML dokument som skapats och som visar en bakgrundskarta med tänd- och släckbara WMS lager. Nu är det dags att lägga till funktioner och anpassa kartan ytterligare några steg.

Leaflet är byggt för att vara resurssnålt och därför är många avancerade funktioner borttagna från start. Det finns däremot en hel del funktionalitet att lägga till om man så önskar och är man en fena på programmering så kan man skriva sina egna tillägg.

Det finns ”plugin” att hämta på Leaflet hemsida och gemensamt för alla är att de består av javaskript (*.js) och i vissa fall stilmallar (*.css) samt bilder. Det finns även med filer som beskriver hur man använder funktionen. javaskript och stilmallar kopierar man till leafletkatalogen på webbservern och bilder läggs med fördel i imagekatalogen. CSS filer och/eller exempel kan ibland behöva redigeras så att sökvägarna stämmer men se till att läsa och förstå så skall det säkert ordna sig.

Vi börjar med en ”Zoom Slider”. Filerna packas upp och alla ”L.Control.Zoomslider”-filer kopieras till leafletkatalogen. ”zoom-slider.png” kopieras till imagekatalogen.

Den tidigare koden kompletteras med några rader och tillägg. Först en hänvisning till stilmallen:

<link rel=”stylesheet” type=”text/css” href=”leaflet/L.Control.Zoomslider.css” />

Denna placeras på raden under hänvisningen till ”leaflet.css”, och under hänvisningen till ”leaflet.js” lägger vi till en rad med hänvisning till zoomslidern.

<script type=”text/javascript” src=”leaflet/L.Control.Zoomslider.js” ></script>

Vill vi ha kvar de mindre +/- knapparna så måste vi lägga till en rad i ”map” variabeln.

map=new L.Map(’map’, {
center: new L.LatLng(57.64791,14.98673),
zoom: 10,
layers: [osm],
zoomControl: true,
});

Nästa steg blir att lägga till en funktion för att visa kartan i helskärm. Även här skall javaskriptfilen kopieras till leafletkatalogen och en bild till imagekatalogen.

På samma sätt som med zoomslidern så läggs en hänvisning till javaskriptet till under de andra.

<script type=”text/javascript” src=”leaflet/Control.FullScreen.js”></script>

Dessutom så läggs ett antal rader till i <style> taggen.

<style type=”text/css”>
#map { width: 700px; height: 800px; }
.leaflet-control-zoom-fullscreen { background-image: url(leaflet/images/icon-fullscreen.png); }
#map:-webkit-full-screen { width: 100% !important; height: 100% !important; }
#map:-moz-full-screen { width: 100% !important; height: 100% !important; }
#map:full-screen { width: 100% !important; height: 100% !important; }
</style>

Nu behövs det vara en knapp och den läggs till i ”map” variabeln längre ner i koden.

map=new L.Map(’map’, {
center: new L.LatLng(57.64791,14.98673),
zoom: 14,
layers: [osm, promenad],
zoomControl: true,
fullscreenControl: true
});

Sedan är det bara att spara och testa. Observera att det inte säkert fungerar med alla webbläsare och att det går att anpassa för exempelvis IE8 med lite extra kod (läs i instruktionen som laddas ner med Control Fullscreen).

Avslutningsvis så lägger vi till en skala och ändrar leaflettexten i nedre högerhörnet. Först infogas nedanstående rad i slutet på <script> taggen.

L.control.scale().addTo(map);

Det lägger till en skala i nedre vänster hörn. För att ändra eller ta bort texten i nedre högra hörnet så skriv in en rad till på samma ställe.

map.attributionControl.setPrefix(”);

I exemplet ovan så är texten tom och därmed borttagen men du kan välja att skriva vilken text du vill.

Hela koden så här långt kan du ladda hem här: geosupportsystem_Leaflet_del3.