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: