Notice removed Canonical answer required by Geographos

occurred Aug 16, 2021 at 13:19

Bounty Ended with TomazicM's answer chosen by Geographos

occurred Aug 16, 2021 at 13:19

Notice added Canonical answer required by Geographos

occurred Aug 13, 2021 at 10:50

Bounty Started worth 100 reputation by Geographos

occurred Aug 13, 2021 at 10:50

error text added

Source Link

edited Aug 12, 2021 at 10:59

Geographos

4k
3
32
100

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?

code added

Source Link

edited Aug 11, 2021 at 11:29

Geographos

4k
3
32
100

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?

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?

Source Link

asked Aug 11, 2021 at 10:40

Geographos

4k
3
32
100

Leaflet - problem with groupedLayerControl plugin

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/

leaflet javascript

Stack Exchange Network

Return to Question

Leaflet - problem with groupedLayerControl plugin