Das Folgende Beispiel zeigt das Gebiet um den Landkreis Bad Ahrweiler als Übersichtskarte. Als Kartenmaterial wird Stamen Terrain verwendet, um einen guten Überblick über die physische Geographie zu geben – weiterhin bietet Stamen den Vorteil, dass kein API-Key benötigt wird und somit auch keine spezifischen Einschränkungen für die Nutzung vorhanden sind:
<html> <head> <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> <script type="text/javascript" src="https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js?v1.3.0"></script> <style> #ahrweiler-map { width: 500px; height: 500px; } </style> </head> <body> <div id="ahrweiler-map"></div> <script type="text/javascript"> var layer = new L.StamenTileLayer("terrain"); var map = new L.Map("ahrweiler-map", { /* Zentrum: Landkreis Bad Ahrweiler */ center: new L.LatLng(50.48, 7.09), /* Zoom 9.5, um den ganzen Landkreis zu zeigen */ zoom: 9.5 }); map.addLayer(layer); </script> </body> </html>
Interaktives Beispiel
Größe der Karte anpassen:
Die Breite und Höhe der Karte kann in der Folgenden Zeile auf eigene Bedürfnisse angepasst werden:
#ahrweiler-map { width: 500px; height: 500px; }