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.
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?
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.
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.
Aha, det förklarar det hela. Nu fungerar det. tack för tipset!