Praca z Leaflet -

Wprowadzenie do map webowych typu open source.

Leaflet to jedna z najpopularniejszych bibliotek JavaScript do tworzenia interaktywnych map w aplikacjach webowych. Jest lekka, wydajna, open source, a przy tym niezwykle elastyczna — pozwala w prosty sposób integrować dane geoprzestrzenne, warstwy kafelkowe, markery, pop-upy czy geolokalizację użytkownika. Praca z Leaflet to przyjemność.

W porównaniu z cięższymi frameworkami (np. OpenLayers czy Mapbox GL JS), Leaflet wyróżnia się prostotą i szybkością działania. Świetnie sprawdza się w projektach, w których kluczowa jest interaktywna wizualizacja danych przestrzennych – od prostych map kontaktowych po złożone systemy GIS.

Architektura i podstawy działania

Leaflet został zaprojektowany przez Vladimira Agafonkina z Mapboxa jako biblioteka zorientowana na renderowanie mapy w przeglądarce przy użyciu:

warstw kafelkowych (tile layers) — zwykle serwowanych przez OpenStreetMap lub inne źródła,

wektorowych nakładek (vector layers) — takich jak markery, linie, poligony,

interakcji użytkownika — przesuwanie, powiększanie, kliknięcia, zdarzenia.

Renderowanie odbywa się w warstwie HTML + CSS + SVG, dzięki czemu Leaflet jest kompatybilny z większością przeglądarek i urządzeń mobilnych.

Podstawowy szkielet aplikacji Leaflet

Minimalny przykład mapy wygląda tak:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Mapa Leaflet – przykład</title>
  <link rel="stylesheet" href="https://przyklad.com/leaflet/dist/leaflet.css" />
  <style>#map { height: 500px; }</style>
</head>
<body>
  <div id="map"></div>

  <script src="https://przyklad.com/leaflet/dist/leaflet.js"></script>
  <script>
    // Inicjalizacja mapy
    const map = L.map('map').setView([52.2297, 21.0122], 13); // Warszawa

    // Dodanie warstwy kafelkowej (OpenStreetMap)
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);

    // Dodanie markera
    L.marker([52.2297, 21.0122]).addTo(map)
      .bindPopup('Centrum Warszawy<br>Leaflet w akcji!')
      .openPopup();
  </script>
</body>
</html>

Warstwy i dane geoprzestrzenne

Leaflet pozwala łatwo dodawać dane wektorowe w formacie GeoJSON, co czyni go kompatybilnym z systemami GIS (np. QGIS, PostGIS, ArcGIS).

Przykład wczytania danych GeoJSON:

fetch('dane/punkty.geojson')
  .then(res => res.json())
  .then(data => {
    L.geoJSON(data, {
      onEachFeature: (feature, layer) => {
        layer.bindPopup(`<strong>${feature.properties.nazwa}</strong>`);
      },
      pointToLayer: (feature, latlng) => {
        return L.circleMarker(latlng, { radius: 6, color: 'red' });
      }
    }).addTo(map);
  });

Dzięki temu możesz wyświetlać dane pochodzące z serwerów GIS, baz danych (np. PostgreSQL + PostGIS) lub API REST.

Integracja z backendem i bazą danych

Leaflet nie wymaga specjalnego backendu, ale bardzo często współpracuje z:

PostgreSQL/PostGIS – do przechowywania i filtrowania danych przestrzennych (np. ST_DWithin, ST_Intersects),

GeoServer lub MapServer – do publikacji danych w formacie WMS/WFS,

API REST – które zwraca dane w formacie GeoJSON.

Przykładowy schemat:

Frontend (Leaflet)
     ↓
Backend (API REST, np. Flask / Express / Spring Boot)
     ↓
Baza danych przestrzennych (PostGIS)

Takie podejście pozwala dynamicznie renderować dane przestrzenne w zależności od widoku użytkownika.

Zaawansowane funkcje Leaflet

Klastery markerów

Przy dużej liczbie punktów warto użyć wtyczki Leaflet.markercluster:

const markers = L.markerClusterGroup();
data.forEach(p => markers.addLayer(L.marker([p.lat, p.lng])));
map.addLayer(markers);

Dzięki temu mapa pozostaje czytelna i wydajna.

Warstwy kontrolne

Można zdefiniować wiele warstw kafelkowych i przełączać je w panelu:

const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
const satellite = L.tileLayer('https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', { subdomains: ['mt0','mt1','mt2','mt3'] });
L.control.layers({ 'OSM': osm, 'Satellite': satellite }).addTo(map);

Interakcje użytkownika

Leaflet obsługuje pełny zestaw zdarzeń:

map.on('click', e => {
  alert(`Kliknięto: ${e.latlng}`);
});

Animacje i rysowanie

Z pomocą wtyczek takich jak Leaflet.Draw można dodawać interaktywne rysowanie poligonów, ścieżek i punktów na mapie.

Ekosystem i rozszerzenia

Leaflet posiada ogromny ekosystem rozszerzeń:

Leaflet.draw – edycja geometrii, rysowanie poligonów,

Leaflet.heat – mapy cieplne (heatmaps),

Leaflet.fullscreen, Leaflet.Geocoder, Leaflet.Routing.Machine – geokodowanie, routing i nawigacja,

Leaflet.timeline – wizualizacja danych w czasie,

Turf.js – geoprzetwarzanie po stronie klienta (np. odległości, bufory, przecięcia).

Rozszerzenia te można łatwo łączyć, tworząc pełnoprawne aplikacje mapowe z analizą przestrzenną.

Podsumujmy co daje praca z Leaflet

Leaflet to jedna z najbardziej eleganckich i praktycznych bibliotek GIS dla web developerów.Łączy prostotę API z dużą mocą rozszerzeń, dzięki czemu sprawdza się zarówno w prostych mapach kontaktowych, jak i zaawansowanych systemach analitycznych.To idealne narzędzie do wdrożeń GIS w architekturze mikroserwisowej lub aplikacjach SPA (React, Vue, Angular).Dzięki otwartemu ekosystemowi i wsparciu dla standardów OGC może pełnić rolę warstwy prezentacji w profesjonalnych rozwiązaniach geoprzestrzennych.

Przejdź do szkolenia >>