Die Webkarte Vektor Bayern ist eine hochaktuelle, flexible und amtliche Webkarte für Bayern im Vector Tiles Format. Sie eignet sich hervorragend für die Einbindung in Webanwendungen und Smartphone-Apps. In diesem Repository werden u.a. Code-Beispiele zur Nutzung der Webkarten mit verschiedenen Rendering-Bibliotheken wie Mapbox GL JS, MapLibre GL JS, Leaflet oder OpenLayers bereitgestellt.
Für die Integration der Webkarte Vektor Bayern in Webanwendungen werden auf der Produktwebsite URLs zu den verfügbaren Kartenstilen bereitgestellt. Die zugrundeliegenden Kachelarchive können bei Bedarf den Stil-Dateien entnommen werden. Die Datenmodelle für die Webkarte Vektor Bayern sowie für die zugehörigen Höhenlinien sind online verfügbar.
Die bereitgestellten Kartenstile können in eigenen Kartenanwendung verwendet und mittels verschiedener Rendering-Bibliotheken eingebunden werden. Code-Beispiele zur Verwendung der Kartenstile in den genannten Bibliotheken sind hier zu finden.
Zur Darstellung der Webkarte Vektor Bayern wird die frei nutzbare Software-Bibliothek MapLibre GL JS empfohlen. Eine Einbindung ist auch mit weiteren Bibliotheken wie Mapbox GL JS, OpenLayers oder Leaflet möglich.
- MapLibre GL JS
Folgendes HTML-Code-Beispiel ist auch hier zum Download verfügbar.
<!DOCTYPE html>
<html>
<head>
<title>MapLibre GL JS Demo - Webkarte Vektor Bayern</title>
<script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
<link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var map = new maplibregl.Map({
container: 'map',
style: 'https://vtod1.bayernwolke.de/styles/by_style_standard.json', // URL zum Style. Zu finden auf der Produkwebsite der Webkarte Vektor Bayern: https://www.ldbv.bayern.de/produkte/karten/webvektor.html
center: [11.55, 49],
zoom: 7,
});
</script>
</body>
</html>- Mapbox GL JS
Folgendes HTML-Code-Beispiel ist auch hier zum Download verfügbar. Für die Nutzung von Mapbox GL JS ist eine Registrierung notwendig. Zudem können Kosten ab einer bestimmten Anzahl an Kartenaufrufen entstehen.
<!DOCTYPE html>
<html>
<head>
<title>Mapbox GL JS Demo - Webkarte Vektor Bayern</title>
<script src="https://api.mapbox.com/mapbox-gl-js/v3.13.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v3.13.0/mapbox-gl.css">
<style>
body {margin: 0; padding: 0;}
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
mapboxgl.accessToken = '<your access token here>'; // Um die Tools, APIs oder SDKs von Mapbox nutzen zu können, wird ein Mapbox access token benötigt.
var map = new mapboxgl.Map({
container: 'map',
style: 'https://vtod1.bayernwolke.de/styles/by_style_standard.json', // URL zum Style. Zu finden auf der Produkwebsite der Webkarte Vektor Bayern: https://www.ldbv.bayern.de/produkte/karten/webvektor.html
center: [11.55, 49],
zoom: 7,
});
</script>
</body>
</html>- Leaflet
Folgendes HTML-Code-Beispiel ist auch hier zum Download verfügbar.
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Demo - Webkarte Vektor Bayern</title>
<link rel="stylesheet" href="hhttps://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/@maplibre/maplibre-gl-leaflet@0.1.2/leaflet-maplibre-gl.js"></script>
<script>
var map = L.map('map', {
minZoom: 6,
maxZoom: 18,
});
var gl = L.maplibreGL({
style: 'https://vtod1.bayernwolke.de/styles/by_style_standard.json', // URL zum Style. Zu finden auf der Produkwebsite der Webkarte Vektor Bayern: https://www.ldbv.bayern.de/produkte/karten/webvektor.html
}).addTo(map);
map.setView([49, 11.55], 8);
</script>
</body>
</html>- OpenLayers
Für die optimale Einbindung mit OpenLayers benötigen Sie mehrere Ressourcen, welche hier zu finden sind. Weitere Informationen dazu finden Sie auf der OpenLayers-Website. Für die Verwendung von OpenLayers ist die Nutzung einer Erweiterung sinnvoll.
Es können sich Änderungen und Erweiterungen in den bereitgestellten Ressourcen ergeben. Es wird keine Gewähr oder Garantie für die Richtigkeit, Vollständigkeit oder Eignung der bereitgestellten Ressourcen für einen bestimmten Zweck übernommen.