Leaflet Layer Control not visible

Question

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>

Answer 1

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);
});

Answer 2

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/

Answer 3

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.

Answer 4

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.