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: