0

What am I doing wrong here? Everything is working fine, except that the layer control is not showing at all.. hhLayer and wpLayer are L.geoJson(); in case that helps.

<script type="text/javascript">
    var map = L.map('map').setView([23.27, 85.37], 12);
    var tileUrl='http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
    var tileAttrib='Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community';
    var tile = new L.TileLayer(tileUrl, {minZoom: 8, maxZoom: 17, attribution: tileAttrib, opacity:1}).addTo(map);
    map.addLayer(tile);  

    var hybUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var hybAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
    var hyb = new L.TileLayer(hybUrl, {minZoom: 8, maxZoom: 14, attribution: hybAttrib, opacity:0.7}).addTo(map);
    map.addLayer(hyb);

      var hhMarkerOptions = {};
      var wpMarkerOptions = {};

      var hhLayer;
        $.getJSON('fxb_hh.geojson', function(data) {
            hhLayer = L.geoJson(data, {
            pointToLayer: function(feature, latlng) {
              return L.circleMarker(latlng, hhMarkerOptions);
                },
            onEachFeature: function (feature, layer) {
               layer.bindPopup(feature.properties.id}
            });
        //hhLayer.addTo(map);
        map.addLayer(hhLayer);
        });

      var wpLayer;
      $.getJSON('fxb_wp.geojson', function(data) {
            wpLayer = L.geoJson(data, {
            pointToLayer: function(feature, latlng) {
              return L.circleMarker(latlng, wpMarkerOptions);
                },
            onEachFeature: function (feature, layer) {
               layer.bindPopup(feature.properties.id);
                },
            style: function (feature) {
                    if (feature.properties["Water Testing Report"] == 'BLACK') {return {fillColor: '#1D1061'}};
                    if (feature.properties["Water available at visit"] == "No") {return {fillColor: '#dd0022'}}
                }
            });
        //wpLayer.addTo(map);
          map.addLayer(wpLayer);
        });

      var baseLayer = { 
           "Satellite": tile,
           "OSM Data": hyb
       };
       var overlay = {
         "Household Data": hhLayer,
         "Water Points": wpLayer
       };
      //var layerControl = new L.control.layers(baseLayer, overlay, {collapsed: false});
      //map.addControl(layerControl);
      L.control.layers(baseLayer, overlay, {collapsed: false}).addTo(map);


  </script>
  • Did you figure it out yet? I cannot repro this issue, and so I suspect there may be something off with one of your baseLayer or overlay objects. Can you show the code that creates these layers, including base layers? I recreated a working example from your code here: jsfiddle.net/1ov0nLqb – nothingisnecessary Sep 23 '15 at 3:20
  • Hey, thanks for checking in @nothingisnecessary, I couldn't get the layer control working and I was planning to share the rest of the code. The working example you've linked to is pretty close to what I did, but since I am new to leaflet, I think I missing something fundamental. I'll share my code in a bit. – mr_november Sep 24 '15 at 4:46
  • updated with full code @nothingisnecessary – mr_november Sep 24 '15 at 5:12
1

Check your JavaScript console (usually F12 or something on Windows) and you can see the errors. You were missing a closing parenthesis on this line: layer.bindPopup(feature.properties.id}

Also, you were using an asynchronous method to create hhLayer and wpLayer, but you are trying to add these overlays to the layers control before they are created (which happens in the callback)

Here are the corrected calls to $.getJSON (see Fiddle link below for full working example)

    var layerControl;
    var hhLayer;
    $.getJSON('fxb_hh.geojson', function(data) {
        hhLayer = L.geoJson(data, {
        pointToLayer: function(feature, latlng) {
          return L.circleMarker(latlng, hhMarkerOptions);
            },
        onEachFeature: function (feature, layer) {
           layer.bindPopup(feature.properties.id)
        }});
      map.addLayer(hhLayer);
      layerControl.addOverlay(hhLayer, "Household Data");
    });
  var wpLayer;
  $.getJSON('fxb_wp.geojson', function(data) {
        wpLayer = L.geoJson(data, {
        pointToLayer: function(feature, latlng) {
          return L.circleMarker(latlng, wpMarkerOptions);
            },
        onEachFeature: function (feature, layer) {
           layer.bindPopup(feature.properties.id);
            },
        style: function (feature) {
                if (feature.properties["Water Testing Report"] == 'BLACK') {return {fillColor: '#1D1061'}};
                if (feature.properties["Water available at visit"] == "No") {return {fillColor: '#dd0022'}}
            }
        });
      map.addLayer(wpLayer);
      layerControl.addOverlay(wpLayer, "Water Points");
    });

  var baseLayer = { 
       "Satellite": tile,
       "OSM Data": hyb
   };
  layerControl = L.control.layers(baseLayer, overlay, {collapsed: false}).addTo(map);

See working Fiddle here: (of course, your custom API is on a diff server and so data will not be returned, but JS issues are resolved) http://jsfiddle.net/d69d56fy/

  • Thanks so much! This worked smoothly. Btw, I realised after 5 minutes of intense scrutiny, that the missing paranthesis was just a copy paste error – mr_november Sep 24 '15 at 18:02
2

You should be able to just add the layer control without declaring it as a variable.

L.control.layers(baseLayer, overlay,{collapsed: false}).addTo(map);

This should do the trick, according to Leaflet's documentation.

  • Thanks for the response. That was my first attempt actually, didn't work either. – mr_november Sep 20 '15 at 4:34
2

Use either new L.Control.Layers() or L.control.layers(). In your case something like

var layerControl = new L.Control.Layers(baseLayer, overlay, {collapsed: false});
map.addControl(layerControl);

should work or even

L.control.layers(baseLayer, overlay, {collapsed: false}).addTo(map);

as posted before - take care of the new you don't need here.

  • The function name is case sensitive? I tried both. I have updated the code above, I think the issue is somewhere else. – mr_november Sep 24 '15 at 5:19
2

I think you try to add the control before the ajax call (for loading the json) returns. This results in the layer not being created (you should see an error in the console, saying that leaflet_id of the object is incorrect or something similar).

Try creating the layer before adding the data:

var wpLayer = L.geoJson(null, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, wpMarkerOptions);
    },
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.id);
    },
    style: function (feature) {
        if (feature.properties["Water Testing Report"] == 'BLACK') {
            return {
                fillColor: '#1D1061'
            }
        };
        if (feature.properties["Water available at visit"] == "No") {
            return {
                fillColor: '#dd0022'
            }
        }
    }
});

$.getJSON('fxb_wp.geojson', function (data) {
    wpLayer.addData(data);
    wpLayer.addTo(map);
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.