CODEWITHSUNDEEP
leafletcontrolslayer
Jack E
Jack E

Reputation: 1

layer control in leaflet with no basemap option

Completely new at this. Trying to activate layer controls using an open street map basemap. I dont need to toggle the basemap, but I do need to switch layers on/off. The example leaflet tutorial only shows how to do it with different basemaps used as layers too.

So far my code looks like this:

<html>

<head>
  <title>Solomon Islands Tourist Map</title>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />

  <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
  <script type='text/javascript' src='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js?2'></script>
  <script src="jquery-2.1.1.min.js"></script>
</head>

<body>



  <div id="map" style="height: 100%; border: 1px solid #AAA;"></div>
  <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
  <script>
    var Islands = new L.LayerGroup();

    L.marker([-9.616, 159.85]).addTo(Islands);

    var Basemap = L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Produced by <a href="http://haloscotia.com/index.html" title="Halo Scotia" target="_blank">Halo Scotia</a><a href="http://haloscotia.com/index.html" title="Halo Scotia" target="_blank"><img src="HaloScotia.png" alt="Halo Scotia" style="width:120px;height:30px;"></a>',
      subdomains: ['otile1', 'otile2', 'otile3', 'otile4']
    }).addTo(map);

    var map = L.map('map', {
      center: [-9.616, 159.85],
      minZoom: 6,
      zoom: 6
      layers: [Islands, Basemap]
    });

    var Base = {
      "Basemap": Basemap
    };

    var overlays = {
      "Islands": Islands
    };


    L.control.layers(null, overlays).addTo(map);
  </script>

</body>

</html>

....no joy at all :/ how do I just have the overlays as layers?

Upvotes: 0

Views: 4159

Answers (1)

ghybs
ghybs

Reputation: 53185

You have a missing comma (,) after zoom: 6.

You cannot add Basemap to map before the latter variable is assigned and the map is created. Simply remove the .addTo(map).

Your last code instruction L.control.layers(null, overlays).addTo(map); will correctly create a Layers Control without the radio buttons to switch the basemap, but with checkbox(es) to show / hide your overlay(s).

var Islands = new L.LayerGroup();

L.marker([-9.616, 159.85]).addTo(Islands);

var Basemap = L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Produced by <a href="http://haloscotia.com/index.html" title="Halo Scotia" target="_blank">Halo Scotia</a><a href="http://haloscotia.com/index.html" title="Halo Scotia" target="_blank"><img src="HaloScotia.png" alt="Halo Scotia" style="width:120px;height:30px;"></a>',
  subdomains: ['otile1', 'otile2', 'otile3', 'otile4']
})/*.addTo(map)*/;

var map = L.map('map', {
  center: [-9.616, 159.85],
  minZoom: 0,
  zoom: 6,
  layers: [Islands, Basemap]
});

var Base = {
  "Basemap": Basemap
};

var overlays = {
  "Islands": Islands
};


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

Demo: http://plnkr.co/edit/KbnQr6CBbAXHKrSVCPze?p=preview

Upvotes: 1

Related Questions