🔄 Style-Wechsel

Oben rechts können 4 Grundkarten-Stile umgeschaltet werden: Light (Positron), Dark, OSM (Liberty), Satellite.

🌍 Globe-Modus

MapLibre GL JS v5+ unterstützt projection: 'globe'. Rauszoomen = runder Globus, reinzoomen = flach. Wie Google Maps. Der Button "Globe" oben rechts schaltet zwischen Globe und Mercator um.

const map = new maplibregl.Map({ projection: 'globe' });

📍 Routenplanung

Nicht integriert, aber via OSRM-API + eigener Source möglich. Beispiel mit OSRM:

fetch('https://router.project-osrm.org/route/v1/driving/13.4,52.5;11.6,48.1?geometries=geojson')
  .then(r => r.json()).then(d => {
    map.addSource('route', { type: 'geojson', data: d.routes[0].geometry });
    map.addLayer({ id: 'route', type: 'line', source: 'route', paint: { 'line-color': '#3b82f6', 'line-width': 4 } });
  });

🎨 Eigene Icons & Marker

Marker können als HTML-Overlays oder als Symbole im GL-Style definiert werden.

new maplibregl.Marker({ element: customDiv }).setLngLat([13.4, 52.5]).addTo(map);

🏢 3D-Gebäude

MapLibre kann 3D-Extrusion für Gebäude darstellen – direkt im Style JSON oder per FillExtrusionLayer.

map.addLayer({ id: '3d-buildings', source: 'composite', 'source-layer': 'building', type: 'fill-extrusion',
  paint: { 'fill-extrusion-height': ['get', 'height'], 'fill-extrusion-color': '#aaa' } });

🔥 Heatmaps

Native Heatmap-Unterstützung via type: 'heatmap' im Style.

📌 Clustering

GeoJSON-Quellen unterstützen natives Clustering. Einfach cluster: true setzen.

🗺️ GeoJSON

Polygone, Linien, Punkte direkt via map.addSource() + map.addLayer().

📦 Bundle-Größe

~350 KB gzip (maplibre-gl). Größer als Leaflet, aber vector-basiert.

📄 Lizenz

BSD-3-Clause – frei für kommerzielle Projekte.