Mer om Leaflet kartor på webben – Del 2

I förra inlägget skapades en grund med Open Street Map. Den här gången skall vi lägga till och hantera olika WMS lager.

Det kan vara WMS tjänster från en egen server, men här visar jag tjänster från Länsstyrelsen (Naturreservat) och Trafikverket (Planerade och framtida vägar/järnvägar). Tänk om man planerar att bygga väg genom naturreservat, ”hu-jeda-mej”.

Som kuriosa kan nämnas att Länsstyrelsens WMS kommer från ESRI ArcGIS Server och Trafikverket från Carmenta Server. Kan också passa på att nämna att SGU har en hel del WMS tjänster från GeoServer.

Det finns massor med WMS tjänster tillgängliga på nätet bara man letar lite…

Jag får dock börja med att påpeka att WordPress verkar ändra framför allt citationstecken till andra symboler mer eller mindre godtyckligt, så om det är något som ser konstigt ut så kontrollera i PDF dokumentet med hela koden längst ner.

Startläget är det HTML dokument som skapades i förra inlägget, så vill du följa med själv eller göra egna redigeringar så skall du börja där.

I <script> taggen i <BODY> delen i dokumentet så infogar man nedanstående kod anpassad till de egna förutsättningarna.

var naturreservat=new L.TileLayer.WMS(”http://ext-geoservices.lansstyrelsen.se/arcgis/services/skyddadeomraden/MapServer/WMSServer&#8221;, {
layers: ‘0’,
format: ‘image/png’,
transparent: true,
minZoom: 7
});

Den första raden skapar en lagervariabel som i detta fall döps till ”naturreservat”. Variabeln tilldelas ett nytt WMS lager (new L.TileLayer.WMS) vars adress anges följt av information om vilket lager i tjänsten man vill välja samt bildformat, om lagret skall vara transparent och om det skall finnas en minsta eller största zoomnivå där lagret skall visas.

Det ovanstående upprepas för varje lager man vill ha med och exempel på detta kan du se i den kompletta koden med länken längre ner.

Har man många lager så kan man skapa ett grupplager och hänvisa till detta på samma sätt som de individuella lagerna.

var trafikverket=L.layerGroup([vagnat_planerad, vagnat_framtida, jarnvag_framtida]);

I exemplet ovan så används redan skapade lagervariabler (se ovan) som hämtats från Trafikverket och beskriver planerade och framtida vägar och järnvägar. Grupplagret döps till ”trafikverket”.

För att lägga till något av ovanstående lager som standard så lägger man till lagernamnet i kartdefinitionen enligt nedan:

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

Jag har inte valt att ha några av WMS lagerna tända som standard utan skapar en lagerhanterare där användaren själv kan tända de lager hen vill.

var baseMaps = {
”Open Street Map”: osm,
};
var overlayMaps = {
”Naturreservat”: naturreservat,
”Planerat V&auml;gn&auml;t”: vagnat_planerad,
”Framtida V&auml;gn&auml;t”: vagnat_framtida,
”Framtida J&auml;rnv&auml;g”: jarnvag_framtida,
”Trafikverket Totalt”: trafikverket
};

// Lägg till en lagerkontroll
L.control.layers(baseMaps, overlayMaps).addTo(map);

Först så definieras vilka lager som är ”baskartor” och vilka som är lager. Skillnaden är att baskartor bara kan vara tända en åt gången medan lager kan tändas och släckas oberoende.

Sist så läggs lagerkontrollen till i kartan.

Skärmbild från 2013-04-13 16:33:36

Du kan själv titta närmare på hela koden eller testa själv genom att ladda hem: geosupportsystem_Leaflet_del2.

I nästa inlägg skall jag visa hur du kan anpassa utseendet men framför allt lägga till extra funktioner som exempelvis karta i fullskärm.

[EDIT]

Fixat felaktig PDF.

Annonser

Taggar:

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut / Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut / Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut / Ändra )

Google+ photo

Du kommenterar med ditt Google+-konto. Logga ut / Ändra )

Ansluter till %s

%d bloggare gillar detta: