Locations

Brandenburger Tor

Pariser Platz 1
Berlin

Visit website

Rathaus Hamburg

Rathausmarkt 1
Hamburg

Visit website

Heidelberger Schloss

Schlosshof 1
Heidelberg

Visit website

Kölner Dom

Domkloster 4
Köln

Visit website

Marienplatz

Marienplatz 1
München

Visit website

OpenLayers

OpenLayers ist das schwerste, aber auch feature-reichste Map-Framework. Bietet alles out-of-the-box.

🔄 Layer-Switcher

8 Layer via Select-Menü umschaltbar: OSM, CartoDB (Light/Dark), OpenTopoMap, Esri (Satellite/Street), Wikimedia, Stamen Terrain.

📍 Routenplanung

Ja, via OSRM-API. OpenLayers selbst hat keine Routing-Engine, aber die OSRM-Response kann als LineString-Layer dargestellt werden.

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 => {
    const route = new ol.format.GeoJSON().readFeature(d.routes[0].geometry);
    new ol.layer.Vector({ source: new ol.source.Vector({ features: [route] }), style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'blue', width: 4 }) }) });
  });

🎨 Eigene Icons & Marker

Über ol.style.Style mit ol.style.Icon für Bilder oder ol.style.Text für Text.

✏️ Drawing & Editing

Built-in! ol/interaction/Draw und ol/interaction/Modify – kein Plugin nötig.

map.addInteraction(new ol.interaction.Draw({ source: vectorSource, type: 'Polygon' }));

🗺️ WMS/WMTS

Native Unterstützung für WMS-, WMTS-, XYZ- und TileJSON-Quellen. Ideal für GIS-Integration.

📌 Clustering

Built-in via ol/source/Cluster.

🔄 Projektionen

Unterstützt alle EPSG-Codes (z.B. EPSG:3857, EPSG:4326, EPSG:25832). Leaflet und MapLibre können nur Web Mercator.

🔥 Heatmaps

Ja, via ol/layer/Heatmap.

📦 Bundle-Größe

~400 KB gzip (ol). Kann per Tree-Shaking reduziert werden.

📄 Lizenz

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

Mehr erfahren: openlayers.org