TechOverflow Logo
TechOverflow

Minimalbeispiel für leaflet.js mit Stamen-Terrain-Kacheln

English Deutsch

Dieses minimale in sich geschlossene HTML-Beispiel kann als guter Ausgangspunkt für eine eigene Leaflet-Anwendung dienen. Die Verwendung von Stamen-Terrain-Kacheln bietet nicht nur eine schöne Ansicht der physischen Geografie, sondern hat auch den Vorteil, dass kein API-Schlüssel erforderlich ist.

minimal_leaflet_example.html
<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>
            #mymap { height: 100%; }
        </style>
    </head>
    <body>
        <div id="mymap"></div>
        <script type="text/javascript">
            var layer = new L.StamenTileLayer("terrain");
            var map = new L.Map("mymap", {
                /* Center: Munich, Germany */
                center: new L.LatLng(48.1, 11.5),
                /* Show most of western Europe */
                zoom: 6
            });
            map.addLayer(layer);
        </script>
    </body>
</html>

Aussehen des Beispiels:

Minimalbeispiel einer leaflet.js-Karte mit Stamen-Terrain-Kacheln, zentriert auf München, Deutschland

Check out similar posts by category: HTML, Javascript, Leaflet