Leaflet - problem with groupedLayerControl plugin

Question

I would like to implement the GroupedLayerControl plugin to my leaflet map.

Unfortunately, after applying the L.control it stops working.

My layers look as this:

 var maptiles = {
"OpenStreetMap": osm,
"Hybrid": hybridMutant
};


 var overlays = {
  "Eclipses" :{
    "Annular" : annular,
    "Hybrid" : hybrid,
    "Total" : total
  },
  "Places" : {
      "Places": places
  }
 };

I've tried:

 var layers = L.control.groupedLayers(maptiles, overlays);
 map.addControl(layers);

and

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

neither first nor second example was working. After this code, the map is crashed and I see only the OpenStreetMap canvas and everything, which is above this line of code.

I've checked the console, which for the first case says:

Uncaught TypeError: Cannot read property '_leaflet_id' of undefined

https://github.com/Leaflet/Leaflet/issues/1074 https://github.com/stefanocudini/leaflet-panel-layers/issues/6

and for the second one:

Uncaught TypeError: Cannot read property 'minZoom' of undefined

discussed also here:

L.control.layers: Uncaught TypeError: Cannot read property 'minZoom' of undefined

Is there something wrong with my layers? I've defined variables, which include a bunch of separate .geojson layers.

Full JSfiddle is here:

https://jsfiddle.net/okezw4dL/

It starts working, when the grouped L.GeoJSON layers are switched off. The one example of this group is below.

var hybrid = L.geoJSON([H23, H31, H49, H50, H67], {
 style: function (feature) {
   return {
    fillColor: '#0000FF',
    weight: 2,
    opacity: 0.5,
    color: 'blue',
    fillOpacity: 0.25
   };
  },
  coordsToLatLng: function (coords) {
  var latLng = L.CRS.EPSG3857.unproject(L.point(coords));
  return latLng;
 },
 onEachFeature: function (feature, layer) {
         layer.on({                    
                                    mouseover: function (e) {
                                        this.setStyle({
                                            'fillColor': 'yellow',
                                            'color': 'yellow'
                                            
                                        });
                                    },  
                                    mouseout: function (e) {
                                        this.setStyle({
                                            'fillColor': 'blue',
                                            'color': 'blue'
                                        });
                                    }       
                  });
                 }
             }).bindPopup(function (layer) {
          return layer.feature.properties.descriptio || 
         layer.feature.properties.description ;
        }).addTo(map);

        hybrid.addData(H23);
        hybrid.addData(H31);
        hybrid.addData(H49);
        hybrid.addData(H50);
        hybrid.addData(H67);

What should I do to make it running?

Occasionally I have also an error like this:

Control.Layers.js:246 Uncaught TypeError: Cannot read property 'setZIndex' of undefined

all of these says nothing to me. Is anyone able to advise?

Answer 1

There is some simple JS debugging and understanding of JS logic needed to find out what and why it goes wrong.

When you get error

Uncaught TypeError: Cannot read property '_leaflet_id' of undefined

at statement

var layers = L.control.groupedLayers(maptiles, overlays);

, you go to browser debugger, set a breakpoint at this statement and inspect values of maptiles and overlays. You'll notice that overlays annular, hybrid and total in overlays object are undefined at the time of statement execution. If you look at the code flow, that's logical, since object overlays, which uses those overlays, is defined before overlays are defined. This means that overlays definition and control creation should go after overlays definition.

When you do that, you'll notice that places overlay is not selected in the layer control, although layer itself is shown on the map. If you then try to select it, you'll get error:

Uncaught Error: The provided object is not a Layer.

Reason for this is that places is not overlay but source GeoJSON object for the overlay. At the time of overlay creation, you have to assign it to some variable, let's say placesOverlay and then use this in overlays definition.

So code for places overlay should look something like this:

var placesLayer = L.geoJSON(places, {
  pointToLayer: function (feature, latlng) {
    return L.circleMarker(latlng, geojsonMarkerOptions);
  }
}).addTo(map);

Code for overlays group and control creation should be put at the end and could look something like this:

var overlays = {
  "Eclipses" :{
    "Annular" : annular,
    "Hybrid" : hybrid,
    "Total" : total
  },
  "Places" : {
    "Places": placesLayer
  }
 };


var layers = L.control.groupedLayers(maptiles, overlays);
layers.addTo(map);

This is how the map looks like then (with limited set of data and without extra controls):