Broschyr Snabbstart ¶

Leaflet är ett JavaScript-bibliotek för webbläsarbaserade, mobilvänliga, interaktiva kartor. Det är lättviktigt, men har ändå alla funktioner som de flesta utvecklare någonsin behöver för onlinekartor. Leaflet är utformat med enkelhet, prestanda och användbarhet i åtanke.

Kör ¶

Innan du kör denna snabbstart bör du starta MapProxy. På OSGeoLive finns detta under GeospatialWeb Services\MapProxy\Starta MapProxy. Detta kommer att ge bakgrundsbilder som kommer att användas i denna demo.

Se example

Tips

Om du läser den här snabbstarten utanför OSGeoLive kanske du föredrar att läsa originaldemonstrationen på: https://leafletjs.com/examples/quick-start/, eftersom den här demonstrationen använder tilestache på OSGeoLive.

Förbereda din sida ¶

Innan du skriver någon kod för kartan måste du göra följande förberedande steg på din sida:

Inkludera Leaflets CSS-filer i huvudavsnittet i ditt dokument

<link rel="stylesheet" href="/leaflet/leaflet.css" />

Inkludera Leaflet JavaScript-fil:

<script src="/leaflet/leaflet.js"></script>

placera ett div-element med ett visst id där du vill att din karta ska vara:

<div id="map"></div>

Se till att kartbehållaren har en definierad höjd, t.ex. genom att ange den i CSS:

#map { height: 180px; }

Nu är du redo att initiera kartan och göra lite saker med den.

Konfigurera kartan ¶

Låt oss skapa en karta över Firenze, Italien med en indikation på 2022 FOSS4G-konferensen. Först initialiserar vi kartan och ställer in dess vy till våra valda geografiska koordinater och en zoomnivå:

var map = L.map('map').setView([43.77913, 11.24938], 15);

Som standard (eftersom vi inte angav några alternativ när vi skapade kartinstansen) är alla mus- och pekinteraktioner på kartan aktiverade, och den har zoom- och attributkontroller.

Observera att setView-anropet också returnerar map-objektet - de flesta Leaflet-metoder fungerar på detta sätt när de inte returnerar ett explicit värde, vilket möjliggör bekväm jQuery-liknande metodkedjning.

Därefter lägger vi till ett kakelskikt på vår karta. I det här fallet kommer vi att använda de kakelbilder som tillhandahålls av MapProxy på live-dvd: n. Observera att användning av trevligare bakgrundskartor som openstreetmap kommer att resultera i en mycket bättre användarupplevelse.

När du skapar ett kakelskikt måste du vanligtvis ange URL-mallen för kakelbilderna, attributtexten och den maximala zoomnivån för skiktet:

L.tileLayer('http://localhost:8011/wmts/mapnik_tile/GLOBAL_WEBMERCATOR/{z}/{x}/{y}.png',{}).addTo(map);

Om du har tillgång till internet kan du använda en snyggare tilemap som bakgrund:

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:18, attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

Se till att all kod anropas efter inkluderingen av div och leaflet.js. Nu är det klart! Du har en fungerande Leaflet-karta nu.

Det är värt att notera att Leaflet är leverantörsagnostiskt, vilket innebär att det inte tvingar fram ett visst val av leverantörer för tiles, och det innehåller inte ens en enda leverantörsspecifik kodrad, så det står dig fritt att använda andra leverantörer om du behöver.

Markörer, cirklar och polygoner ¶

Förutom kakelskikt kan du enkelt lägga till andra saker på din karta, inklusive markörer, polylinjer, polygoner, cirklar och popup-fönster. Låt oss lägga till en markör:

var marker = L.marker([43.77913, 11.24938]).addTo(map);

Att lägga till en cirkel går till på samma sätt (förutom att radien anges i meter som ett andra argument), men du kan styra hur den ser ut genom att ange alternativ som sista argument när du skapar objektet:

var circle = L.circle([43.777, 11.255], 250, {
   color: 'red',
   fillColor: '#f03',
   fillOpacity: 0.5
}).addTo(map);

Det är lika enkelt att lägga till en polygon:

var polygon = L.polygon([
    [43.775, 11.247],
    [43.784, 11.240],
    [43.778, 11.238]
]).addTo(map);

Arbeta med popup-fönster ¶

Popup-fönster används vanligtvis när du vill bifoga information till ett visst objekt på en karta. Leaflet har en mycket praktisk genväg för detta:

var popup = L.popup()
   .setLatLng([43.77913, 11.24938])
   .setContent("FOSS4G is here this year!")
   .openOn(map);

Här använder vi openOn i stället för addTo eftersom det hanterar automatisk stängning av en tidigare öppnad popup när en ny öppnas, vilket är bra för användbarheten.

Hantering av händelser ¶

Varje gång något händer i Leaflet, t.ex. att användaren klickar på en markör eller att kartzoomen ändras, skickar motsvarande objekt en händelse som du kan prenumerera på med en funktion. Det gör att du kan reagera på användarinteraktion:

function onMapClick(e) {
   alert("You clicked the map at " + e.latlng);
}

map.on('click', onMapClick);

Varje objekt har sin egen uppsättning händelser - se dokumentation för detaljer. Det första argumentet i lyssnarfunktionen är ett händelseobjekt - det innehåller användbar information om den händelse som inträffade. Exempelvis har kartans klickhändelseobjekt (e i exemplet ovan) egenskapen latlng som är en plats där klicket inträffade.

Låt oss förbättra vårt exempel genom att använda en popup istället för en alert:

var popup = L.popup();

function onMapClick(e) {
   popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
         .openOn(map);
}

map.on('click', onMapClick);

Försök att klicka på kartan så visas koordinaterna i en popup. Visa hela example

What next?¶

Nu har du lärt dig grunderna i Leaflet och kan börja bygga kartappar direkt! Glöm inte att ta en titt på den detaljerade dokumentationen eller andra exempel.