Cannot read property '_leaflet_id' of undefined

[xaadim]

Hi, I would like to put your plugin into my project with GeoJSON already in place in my database. I already also a json configuration for my layers like:

[
    {
        "order" : 1,
        "id": "default", 
        "clustering": false,
        "name": "Map", 
        "center": {
            "lat": 45.3902213,
            "lng": 6.8629282,
            "zoom": 11
        },
        "layers": { 
            "baselayers": [
                {
                    "name": "LandMap",
                    "type": "xyz",
                    "url": "http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png",
                    "active": false,
                    "options":{}
                },
                {
                    "name": "OpenCycleMap",
                    "type": "xyz",
                    "url": "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
                    "active": false,
                    "options":{}
                },
                {
                    "name": "OpenStreetMap",
                    "type": "xyz",
                    "url": "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
                    "active": true,
                    "options":{}
                }
            ]
        }
    }
]

There must be corresponding to your plugin to make it work.

Thank you, Sorry for my english, I'm french.

[xaadim]

if I could get in your source code something that could jon read this way:

               {
                    "name": "LandMap",
                    "type": "tileLayer",
                    "url": "http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png",
                    "active": false,
                    "options":{}
                }

And not this:

               {
                    "name": "Open Cycle Map",
                    "layer": {
                        "type": "tileLayer",
                        "args": [
                            "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png"
                        ]
                    }
                }

having url and type outside layer and url instead of args @stefanocudini

Your code:

_instanceLayer: function(layerDef) {
        if(layerDef instanceof L.Class)
            return layerDef;
        else if(layerDef.type && layerDef.url)
            return this._getPath(L, layerDef.type).apply(window, layerDef.url);
    },

    _addLayer: function (layer, overlay, group) {

        var layerLayer = this._instanceLayer(layer.layer),
            id = L.stamp(layerLayer);

        if(layer.active)
            this._layersActives.push(layerLayer);

        this._layers[id] = {
            layer: layerLayer,
            name: layer.name,
            icon: layer.icon,
            overlay: overlay,
            group: group
        };

        if (this.options.autoZIndex && layerLayer.setZIndex) {
            this._lastZIndex++;
            layerLayer.setZIndex(this._lastZIndex);
        }
    },

[stefanocudini]

the format configuration of the plugin can not 'be changed to your specific use case... I think the best way is change it before passing the json to the plugin to fit the formats.

For example:

var baseLayers = [],
    yourlayers = yourConfig.layers.baselayers,

for(var i in yourlayers)
{
  baseLayers.push({
            "active": yourlayers[i].active,
            "name": yourlayers[i].name,
            "type": yourlayers[i].type,
            "layer": {
                "type": "tileLayer",
                "args": [
                    yourlayers[i].url
                ]
            }
     });
}
map.addControl( new L.Control.PanelLayers(baseLayers) );

[xaadim]

hank you, it works for tileLayer layers but not others like IGN. Have ideas? @stefanocudini

[stefanocudini]

what is IGN layer? what's leaflet class use for create this layer? I advise you to watch all code of examples because implement various use cases

in the filed layer.type = "tileLayer" you can use any leaflet class to create any layer type. for example "geoJson" , "featureGroup" and other created from you.

[xaadim]

it's something like that:

             {
                    "name": "IGN ",
                    "type": "ign",
                    "layer":"GEOGRAPHICALGRIDSYSTEMS.MAPS",
                    "key":"mykeys",
                    "url": "https://gpp3-wxs.ign.fr/' + layerdata.key + '/geoportail/wmts?LAYER='+layerdata.layer+'&EXCEPTIONS=text/xml&FORMAT=image/jpeg&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&STYLE=normal&TILEMATRIXSET=PM&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}",
                    "active": false,
                    "options":{}
                }

https://github.com/mylen/leaflet.TileLayer.WMTS and when I add the IGN in kind provided for, I get this error: " Cannot read property 'apply' of undefined at L.Control.PanelLayers.L.Control.Layers.extend._instanceLayer (leaflet-panel-layers.js:68)"