Menu
  • Hem
  • Dokument
  • Om Mig
Geosupportsystem

Mer om Leaflet kartor på Webben – Del 1

Posted on 2013-04-13

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

Skärmbild från 2013-04-13 14:52:14

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!

Lämna ett svar Avbryt svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *

Translate with Google

GBR In English
GER Auf Deutch
FRA En Français
ESP En Español
Swedish is a hard language for a machine to translate. Nuance and detail will likely be lost.
     

Bok om QGIS på Svenska

Bok

Beställ Boken/E-bok genom att klicka på bilden (även förhandsgranskning).

Senaste kommentarer

  • klakar om Laga hål i höjddata
  • Per Ekström om Laga hål i höjddata
  • Sur om Mera verktyg i QGIS
  • Anton om ”Mobile *.Geodatabase”
  • Fredrik Ekberg om Ingen är oskyldig

Arkiv

Prenumerera på Geosupportsystem

Skriv in namn och epost för att prenumerera på meddelanden från denna blogg.
Loading

geosupport

TrueNAS bygge. @fractaldesignna Define R5 är rikt TrueNAS bygge. @fractaldesignna Define R5 är riktigt trevlig att bygga i, och den sväljer väldigt mycket disk. Här skall virtualiseras både PostGis, WebODM och Geonode så småningom.
Då har jag lite att bläddra i ett tag framöver. Då har jag lite att bläddra i ett tag framöver.
YouTube video to frames. Processed in OpenDroneMap YouTube video to frames. Processed in OpenDroneMap and visualized in QGIS 3.17.
Ladda mer...

Meta

  • Logga in
  • Flöde för inlägg
  • Flöde för kommentarer
  • WordPress.org
©2021 Geosupportsystem | WordPress Theme by Superbthemes.com