leaflet layer picker

Leaflet map with a layer picker appearing the top right. We initialise a selection of different base maps and overlay maps, and add them to a L.control.layers

<html>
<head>
   <title>leaflet layer picker</title>
   <script src="leaflet/leaflet.js"></script>
   <link rel="stylesheet" href="leaflet/leaflet.css" />

// Initialise base map layers
        var osmStandard =
          L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
            maxZoom: 19
          })

var wikimedia =
          L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors. Base map: <a href="https://www.mediawiki.org/wiki/Maps#Production_maps_cluster">wikimedia maps</a>',
            maxZoom: 18
          })

var toner =
          L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors. Base map: <a href="http://maps.stamen.com/toner/">toner by stamen</a>',
            maxZoom: 18
          })

// Initialise overlay layers
        var hiking =
          L.tileLayer('//tile.lonvia.de/hiking/{z}/{x}/{y}.png', {
            maxZoom: 18
          })

var cycling =
          L.tileLayer('//tile.waymarkedtrails.org/cycling/{z}/{x}/{y}.png', {
            maxZoom: 18
          })

// Add our preferred default layer choice directly to the map
        map.addLayer(osmStandard);

// Name the layers
        var baseMaps = {
            'OpenStreetMap standard': osmStandard,
            'Wikimedia maps': wikimedia,
            'Stamen toner': toner
        };

var overlayMaps = {
            'Lonvia hiking routes': hiking,
            'Lonvia cycling routes': cycling
        };

// Add the layer picker control
        var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);

map.attributionControl.setPrefix(''); // Don't show the 'Powered by Leaflet' text. Attribution overload

var london = new L.LatLng(51.505, -0.09);
        map.setView(london, 13);
      }
   </script>

</head>
<body onLoad="javascript:init();">
   <div id="map"></div>
   
</body>
</html>

view directly

Home
Blog
About
Maps
Other
Contact

Harry Wood

leaflet layer picker