CODEWITHSUNDEEP
leaflet
neubert
neubert

Reputation: 16792

changing the default layer in leafletjs

In https://leafletjs.com/examples/layers-control/example.html there are two layers - Grayscale and Streets. It defaults to Grayscale but how would one change the default to Streets instead?

In that example there's this:

    var map = L.map('map', {
        center: [39.73, -104.99],
        zoom: 10,
        layers: [grayscale, cities]
    });

I tried swapping the order of the variables in layers but that didn't do anything.

There's also this:

    var baseLayers = {
        "Grayscale": grayscale,
        "Streets": streets
    };

I tried reversing that, as well, without success.

I even tried renaming the names of the layers, thinking that it might be done alphabetically, but no such luck.

Any ideas?

Upvotes: 0

Views: 807

Answers (1)

kboul
kboul

Reputation: 14570

It has to do with which layer has been added to the map. So remove the array layers from the map instance and add streets layer to the map. That will define the preselected layer.

<!DOCTYPE html>
<html>

  <head>

    <title>Layers Control Tutorial - Leaflet</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

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


    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }

      #map {
        width: 600px;
        height: 400px;
      }

    </style>


  </head>

  <body>

    <div id='map'></div>

    <script>
      var cities = L.layerGroup();

      L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
        L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
        L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
        L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);


      var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

      var map = L.map('map', {
        center: [39.73, -104.99],
        zoom: 10,

      });

      var grayscale = L.tileLayer(mbUrl, {
        id: 'mapbox/light-v9',
        tileSize: 512,
        zoomOffset: -1,
        attribution: mbAttr
      });

      var streets = L.tileLayer(mbUrl, {
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        attribution: mbAttr
      }).addTo(map)



      var baseLayers = {
        "Streets": streets,
        "Grayscale": grayscale
      };

      var overlays = {
        "Cities": cities
      };

      L.control.layers(baseLayers, overlays).addTo(map);

    </script>



  </body>

</html>

Upvotes: 1

Related Questions