Map Tiles
Die Map Tiles (Vector) API liefert MapLibre GL / Mapbox GL-kompatible Style-JSON-Dateien und Vektor-Tiles, die direkt in Leaflet (via leaflet-maplibre-gl), MapLibre GL JS oder OpenLayers integriert werden können.
Endpunkte
Style
Stlye JSON zum einbinden in maplibre-gl oder leaflet.js:
https://map02.gdpr-map.eu/styles/{style}/style.json
{style}
Eines der folgenden styles: osm-bright-gl-style, basic-gl-style, positron-gl-style, dark-matter-gl-style
Tiles
https://map02.gdpr-map.eu/tiles/world/{x}/{y}/{z}?key=[API_KEY]
Fonts
https://map02.gdpr-map.eu/font/Open%20Sans%20Regular/{x-y}?key=[API_KEY]
API-Call Beispiele
maplibre-gl
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>MapLibre GL – Vector Tiles - Beispiel</title>
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<!-- MapLibre GL JS -->
<link href="https://unpkg.com/maplibre-gl@5.0.0/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl@5.0.0/dist/maplibre-gl.js"></script>
</head>
<body>
<div id="map"></div>
<script>
// Dein API-Key
const apiKey = '[API_KEY]'; // ← hier deinen echten Key einfügen
// Verfügbare Stile (du kannst die Nummer im Array ändern: 0 = Bright, 1 = Basic, 2 = Positron, 3 = Dark)
const styles = [
'https://map02.gdpr-map.eu/styles/osm-bright-gl-style/style.json',
'https://map02.gdpr-map.eu/styles/basic-gl-style/style.json',
'https://map02.gdpr-map.eu/styles/positron-gl-style/style.json',
'https://map02.gdpr-map.eu/styles/dark-matter-gl-style/style.json'
];
// Map initialisieren
const map = new maplibregl.Map({
container: 'map',
style: `${styles[1]}?key=${apiKey}`, // styles[1] = Basic – ändere bei Bedarf
center: [10.447683, 51.163361], // Deutschland-Mittelpunkt
zoom: 7,
minZoom: 1,
maxZoom: 22,
// Optional: verhindert extreme Zoom-/Pan-Probleme
attributionControl: true
});
// Optional: NavigationControls (Zoom, Rotate, etc.)
map.addControl(new maplibregl.NavigationControl(), 'top-right');
// Optional: Marker für Deutschland
new maplibregl.Marker()
.setLngLat([10.447683, 51.163361])
.setPopup(new maplibregl.Popup().setHTML("<strong>Deutschland</strong>"))
.addTo(map)
.togglePopup();
</script>
</body>
</html>
leaflet.js
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Beispiel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html,
body,
#map {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
<!-- Maplibre GL -->
<link href="https://unpkg.com/maplibre-gl@5/dist/maplibre-gl.css" rel='stylesheet' />
<script src="https://unpkg.com/maplibre-gl@5/dist/maplibre-gl.js"></script>
</head>
<body>
<div id="map"></div>
<!-- JS-Plugin (https://github.com/maplibre/maplibre-gl-leaflet) -->
<!-- Dieses Plugin muss lokal gehostet werden -->
<script src="./leaflet-maplibre-gl.js"></script>
<script>
var api_key = '[API_KEY]';
var styles = [
'https://map02.gdpr-map.eu/styles/osm-bright-gl-style/style.json', // OSM Bright
'https://map02.gdpr-map.eu/styles/basic-gl-style/style.json', // OSM Basic
'https://map02.gdpr-map.eu/styles/positron-gl-style/style.json', // Positron
'https://map02.gdpr-map.eu/styles/dark-matter-gl-style/style.json' // Dark Matter
];
var map = L.map('map', {
maxBounds: [[180, -Infinity], [-180, Infinity]], // restrict bounds to avoid max latitude issues with MapLibre GL
maxBoundsViscosity: 1, // make the max bounds "solid" so users cannot pan past them
minZoom: 1 // prevent sync issues at zoom 0
}).setView([51.163361, 10.447683], 7);
L.marker([51.163361, 10.447683])
.bindPopup("Deutschland")
.addTo(map)
.openPopup();
var gl = L.maplibreGL({
style: styles[1] + '?key=' + api_key
}).addTo(map);
</script>
</body>
</html>
OpenLayers
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>OpenLayers – Vector Tiles - Beispiel</title>
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<!-- OpenLayers CSS + JS (aktuellste stabile Version) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.5.0/ol.css" />
<script src="https://cdn.jsdelivr.net/npm/ol@v10.5.0/dist/ol.js"></script>
</head>
<body>
<div id="map"></div>
<script>
// Dein API-Key
const apiKey = '[API_KEY]'; // ← hier deinen echten Key einfügen
// Verfügbare Stile
const styles = [
'https://map02.gdpr-map.eu/styles/osm-bright-gl-style/style.json',
'https://map02.gdpr-map.eu/styles/basic-gl-style/style.json',
'https://map02.gdpr-map.eu/styles/positron-gl-style/style.json',
'https://map02.gdpr-map.eu/styles/dark-matter-gl-style/style.json'
];
// Karte initialisieren
const map = new ol.Map({
target: 'map',
layers: [
new ol.layer.WebGLTile({
style: `${styles[1]}?key=${apiKey}`, // styles[1] = Basic – ändere bei Bedarf (0–3)
// Optional: falls du später klassische Raster-Tiles nutzen willst:
// source: new ol.source.XYZ({ url: 'https://map02.gdpr-map.eu/tiles/{z}/{x}/{y}.png?key=' + apiKey })
})
],
view: new ol.View({
center: ol.proj.fromLonLat([10.447683, 51.163361]), // Deutschland-Mittelpunkt
zoom: 7,
minZoom: 1,
maxZoom: 22
})
});
// Optional: Marker / Popup für Deutschland
const marker = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([10.447683, 51.163361]))
});
const vectorSource = new ol.source.Vector({
features: [marker]
});
const vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
image: new ol.style.Icon({
src: 'https://openlayers.org/en/latest/examples/data/icon.png', // Beispiel-Icon
scale: 0.8
})
})
});
map.addLayer(vectorLayer);
// Popup bei Klick auf Marker
const popup = new ol.Overlay({
element: document.createElement('div'),
positioning: 'bottom-center',
stopEvent: false,
offset: [0, -15]
});
popup.getElement().innerHTML = '<div style="background:white; padding:8px; border:1px solid #333; border-radius:4px;">Deutschland</div>';
map.addOverlay(popup);
map.on('click', function (evt) {
const feature = map.forEachFeatureAtPixel(evt.pixel, f => f);
if (feature) {
popup.setPosition(evt.coordinate);
} else {
popup.setPosition(undefined);
}
});
</script>
</body>
</html>