Leaflet

Minimal leaflet.js example with Stamen terrain tiles

This minimal self-contained HTML example can serve as a good starting point for your own leaflet application. Using Stamen Terrain tiles not only provides a nice view of the physical geography but has the added advantage of not requiring any API key.

<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>

Look and feel of the example:

Posted by Uli Köhler in HTML, Javascript, Leaflet