Leaflet control Joomla issue

Question

I've created a Joomla Component and i have a Leaflet map in the component window. I've used Leaflet with Omnivore plugin to add GPX and KML to my map and I used the Leaflet controls to allow to add and remove the layers.

I've tested the controls in a clean joomla development installation and the controls are OK, as seen in the first image enter image description here

When I use the component in my Joomla site che controls are not OK, there are some dirty entry as seen in the second figures enter image description here

I think this is because of the templates and some script that interfere with Leaflet but I can't fix it. The joomla versions are the same, the template no, the joomla site use gantry. This is the function I used to populate the map:

function showRouteTracks(tracce, baseURI, popup=false, enableLayers=true, enableElevation=false){
var layerControl = new Array();
for (var i = 0; i < tracce.length; i++) {

    var customLayer = L.geoJson(null, {
        style: getStyle(i)
    });

    if(tracce[i][3]=='GPX'){
        var layer = omnivore.gpx(baseURI+tracce[i][2], null, customLayer).on('ready', function() {
                elevation(enableElevation,layer);
            });
        if(popup){
            link='<a href="'+tracce[i][4]+'">'+tracce[i][5]+'</a>'
            layer.bindPopup(tracce[i][0]+"&#10141;"+tracce[i][1]+"<br/>"+link);
        }
        lvrtMap.addLayer(layer);
        layerControl[tracce[i][0]+"&#10141;"+tracce[i][1]]=layer;
    }
    if(tracce[i][3]=='KML'){
        var layer = omnivore.kml(baseURI+tracce[i][2], null, customLayer).on('ready', function() {
            elevation(enableElevation,layer);
        });
        if(popup){
            link='<a href="'+tracce[i][4]+'">'+tracce[i][5]+'</a>'
            layer.bindPopup(tracce[i][0]+"&#10141;"+tracce[i][1]+"<br/>"+link);
        }
        lvrtMap.addLayer(layer);
        layerControl[tracce[i][0]+"&#10141;"+tracce[i][1]]=layer;
    }
}

if(!enableLayers)
    layerControl=null;
if(enableElevation)
    L.control.layers(lvrtMapLayers,layerControl,{'position':'bottomright'}).addTo(lvrtMap);
else
    L.control.layers(lvrtMapLayers,layerControl).addTo(lvrtMap);

}

Answer 1

Currently you're creating an array to store the title/layer items:

var layerControl = new Array();

But L.Control.Layers takes object literals as baselayer/overlay parameters:

var baseLayers = {
    "Mapbox": mapbox,
    "OpenStreetMap": osm
};

var overlays = {
    "Marker": marker,
    "Roads": roadsLayer
};

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

So you should use an object literal:

var layerControl = {};

You can add items the same way as you did before:

layerControl['MyTitle'] = myLayerInstance;

I'll bet you'll have no problem then. What happening now is that your trying to assign string keys to items in an array, which isn't supported (even supposed to work but that aside). A javascript array can only have numeric keys and nothing else.

That it works for you with a clean install and not in your production setup is that probably in production you have a javascript library/framework loaded which adds methods/properties to javascript's native array prototype and they are enumerable. Thus when the layercontrol instance iterates the array it also finds these extra methods/properties and tries to add them to the layercontrol.

Just use a object literal: {} not an Array, you'll be fine, good luck.

EDIT: Got curious and did some digging. As it turns out this is caused by Mootools and then i ran into this question: Looping through empty javascript array returns array object functions which gives some explanation and some other solutions but it's best if you just use a object literal because at the moment you're kind of abusing Array.