Interaktive Karte des Landkreis Ahrweiler mit leaflet.js darstellen

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/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""/>
        <script src="https://unpkg.com/leaflet@1.7.1/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; }