Leaflet – enkelt att bädda in karta på hemsida

Många drar åt sig öronen när de börjar titta på Open Layers för att skapa inbäddade kartor på en hemsida, och i många fall så kanske Open Layers är mer än vad som behövs.

Då finns Leaflet som är ett Java bibliotek på endast 28 kb som många tycker är betydligt enklare att arbeta med.

Ladda hem Leaflet från deras hemsida.

Packa upp filerna och spara mappen ”dist” på din webserver. Döp om den till ”leaflet” för tydlighetens skull.

För att få igång en enkel karta behövs två filer, nåja det behövs ett HTML dokument och det behövs javaskript. Jag väljer att skapa detta i två filer, en med kartans egenskaper och en med kartans platshållare.

Först filen ”karta.js” som sparas i den omdöpta leaflet mappen:

var map;
function startakarta() {
    // Skapa kartan
    map = new L.Map(‘map’);

    // Lägg till kartlager.
    var osmUrl=’http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’;
    var osm = new L.TileLayer(osmUrl, {minZoom: 5, maxZoom: 17});        

    // Sätt startpunkt och zoom.
    map.setView(new L.LatLng(57.667, 14.972),14);
    map.addLayer(osm);

}

Sedan så skapas filen leaflet.htm i webroten (samma plats där leaflet mappen finns):

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”leaflet/leaflet.css” />
<script type=”text/javascript” src=”leaflet/leaflet.js”></script>
<script type=”text/javascript” src=”leaflet/karta.js”></script>
</head>

<body>
<b>Min karta</b>
<div id=”map” style=”width:900px; height:500px;”></div>

<script type=’text/javascript’>
startakarta();
</script>

</body>
</html>

Japp, det är allt som behövs! Koppla upp din webbläsare mot servern och skriv in ”leaflet.htm”.

Mer exempelkod kan man hitta på leafletjs.com.

Annonser

Taggar:,

4 responses to “Leaflet – enkelt att bädda in karta på hemsida”

  1. Lunken says :

    Hej där. Försöker lite lätta slänga upp ett test på binero men kommer inte igång alls. Kartan vill inte visas. Troligen något enkelt fundamentalt fel… försöker hitta fler nybörjartutorials där man verkligen börjar från början men går bet… har du några tips?

    • Klas Karlsson says :

      Det viktiga med webbservern är att den har stöd för Java. En del servrar tillåter bara skript i vissa kataloger. Prova din sida på en vanlig dator utan webbserver (vanlig htm-fil), men med stöd för Java. Och glöm inte Java biblioteket för Leaflet.

    • Klas Karlsson says :

      Jag har nu testat lite och det fungerar, men det finns ett riskmoment.
      Om du använder copy-paste från texten ovan så kan en del tecken få en annan teckenkod och då fungerar det inte! För att fixa detta så måste du ersätta alla enkel- och dubbelfnuttar (‘ och ”). Ett tips kan vara att högerklicka på hemsidan och välja att visa källa, så går det att se vilka tecken som är felaktiga.

  2. Lunken says :

    Aha, det förklarar det hela. Nu fungerar det. tack för tipset!

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: