this._getLayer() is undefined

[Wallace911]

Hi! I want to integrate your plugin in my Leaflet map. I add marker with json file:

`jQuery().ready(function` (){   
$.getJSON(
    'recinto_new/json/json_track.php?days=' + days,
    function(data){
        var latlngs = Array();
        var coordinate = Array();
        var coordinate1 = Array();
        var cow = new L.LayerGroup();           
        for ( var i=0; i < data.length; ++i )
        {               
            if (i==0){
                var myIconStart = L.icon({
                iconUrl: 'recinto_new/maps/images/start-cow.png',
                iconRetinaUrl: 'recinto_new/maps/images/start-cow.png',
                iconSize: [69, 70],
                iconAnchor: [9, 21],
                popupAnchor: [0, -14]
                });
                markerArray[i] = L.marker( [data[i].latitude, data[i].longitude], {icon: myIconStart, title: data[i].title } )
                .bindPopup( '<div>' + 'Alla data: ' + data[i].date + '<br/>'
                    + data[i].title + ' si trova'
                    + '<b>Latitudine: </b> ' + data[i].latitude + ' - ' + '<b>Longitudine:</b> ' + data[i].longitude + '</br>'
                    + '<b>Nome: </b>' + data[i].title
                    + '</div>',
                    {direction: 'left'} )
                .addTo( map );
               
            } else if(i == data.length-1){
                var myIconEnd = L.icon({
                iconUrl: 'recinto_new/maps/images/end-cow.png',
                iconRetinaUrl: 'recinto_new/maps/images/end-cow.png',
                iconSize: [69, 70],
                iconAnchor: [9, 21],
                popupAnchor: [0, -14]
                });
                markerArray[i] = L.marker( [data[i].latitude, data[i].longitude], {icon: myIconEnd, title: data[i].title } )
                .bindPopup( '<div>' + 'Il bovino <b>' + data[i].title + '</b> si trova qui: ' + '<br/>'
                    + '<b>Latitudine: </b> ' + data[i].latitude + ' - ' + '<b>Longitudine:</b> ' + data[i].longitude + '</br>'
                    + '<b>Ultima rilevazione: </b>' + data[i].date
                    + '</div>',
                    {direction: 'left'} )
                .addTo( map );
                markerArray[i].openPopup();
                zoomTo(data[i].latitude, data[i].longitude);
               
            } else {
                var myIcon = L.icon({
                iconUrl: 'recinto_new/maps/images/cow.png',
                iconRetinaUrl: 'recinto_new/maps/images/cow.png',
                iconSize: [69, 70],
                iconAnchor: [9, 21],
                popupAnchor: [0, -14]
                });
                markerArray[i] = L.marker( [data[i].latitude, data[i].longitude], {icon: myIcon, title: data[i].title } )
               
                .bindPopup( '<div>' + 'Il bovino si trova qui: ' + '<br/>'
                    + '<b>Latitudine: </b> ' + data[i].latitude + ' - ' + '<b>Longitudine:</b> ' + data[i].longitude + '</br>'
                    + '<b>Nome: </b>' + data[i].title
                    + '</div>',
                    {direction: 'left'} )
                   
                .addTo( map );                  
                    }

I define a LayerGroup with: var cow = new L.LayerGroup(); and add a marker with: markerArray[i].addTo(cow);

I define the property of StyledLayer:

var baseMaps = [
                /*{
                    groupName : "Google Base Maps",
                    expanded : true,
                    layers    : {
                        "Satellite" :  g_satellite,
                        "Road Map"  :  g_roadmap,
                        "Terreno"   :  g_terrain
                    }
                }, {
                    groupName : "OSM Base Maps",
                    layers    : {
                        "OpenStreetMaps" : osm
                    }
                }, {
                    groupName : "Bing Base Maps",
                    layers    : {
                        "Satellite" : bing1,
                        "Road"      : bing2
                    }
                    } */                           
            ];
           
            var overlays = [
                {
                groupName : "Recinto",
                expanded : true,
                    layers    : {
                    " Recinto Marsico" : cow
                    }   
                }];

            cow.StyledLayerControl = {
                removable : false,
                visible : true
            }

            var options = {
                container_width     : "300px",
                group_maxHeight     : "80px",
                //container_maxHeight : "350px",
                exclusive           : true
            };
           
            var control = L.Control.styledLayerControl(baseMaps, overlays, options);
            map.addControl(control);
           
            control.selectLayer(cow);

and I visualize the menu but when I click on the checkbox the console give me a TypeError: this._getLayer(...) is undefined

Can anyone help me please?

[davicustodio]

I suspect two things, I have not had time to test yet, but please check:

1 - I'm not sure if the plugin supports working with L.LayerGroup, because I've never tested it. Try for example putting a L.Layer in place of LayerGroup to see if it works. If it works, we can open here an Issue requesting to write support for L.LayerGroup.

2 - According to your code you are not using any BaseLayer, the code is commented. Try leaving at least one active BaseLayer to see if the error disappears. If it disappears, we can also open an Issue requesting correction in the event that no baselayer is enabled.

Thank you.

[Wallace911]

I don't think is the L.LayerGroup the problem because I have downloaded you ghitub repo and in the file example2.html you put the marker in L.LayerGroup.

The BaseLayer is commented because I don't need anyother group name, I need the Layer with checkbox that clicked on it hide the marker selected

[davicustodio]

sorry for L.LayerGroup, I actually used this in the examples ... but unrelated to basemap, did you try to enable only one map to see if the problem continues?

[Wallace911]

I've tried this

// OSM layers
			var osmUrl='http://{s}.tile.osm.org/{z}/{x}/{y}.png';
			var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
			var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
var baseMaps = [
			                { 
								groupName : "Google Base Maps",
								expanded : true,
								layers    : {
									"Satellite" :  g_satellite,
									"Road Map"  :  g_roadmap,
									"Terreno"   :  g_terrain
								}
					        }, {
							    groupName : "OSM Base Maps",
								layers    : {
									"OpenStreetMaps" : osm
								}
                            }/*, {
							    groupName : "Bing Base Maps",
								layers    : {
									"Satellite" : bing1,
									"Road"      : bing2
							  }
                            } */							
			];

but the problem is not solved

[davicustodio]

Can you send us your full .js?

[davicustodio]

Could you please put the attached file to download to avoid this extra space in issue?

[Wallace911]

index.zip

[javierlduq]

this plugin works with leaflet 1.5.1?