'A simple OnClick event for a Leaflet control box map using PanTo

So I'm in the process of making a web map of previous projects. My experience with JavaScript and general web programming languages are limited and outdated (apparently OnClick is deprecated?)

Either way, I'm using QGIS2Web alongside Leaflet to produce this map and then had planned to further fine tune it through the source.

All has been well so far but now I am trying to add an event that occurs on click/on layer add (but not of every layer only specific region layers) which would then pan the map to the centroid of that region.

I started by first defining the function

    function NEPanTo(){
    map.panTo([54.04598, -2.73656])
    }

I know that it is somewhere within the L.Control.layers, as below, which for this region it calls layer_NorthEastnoinvert_7

    var baseMaps = {};
    L.control.layers(baseMaps, {
        '<img src="legend/NorthEastnoinvert_7.png" /> North East nointestvert': layer_NorthEastnoinvert_7,
        '<img src="legend/Transport_6.png" /> Transport': layer_Transport_6,
        '<img src="legend/Strategy_5.png" /> Strategy': layer_Strategy_5,
        '<img src="legend/Multipledeliverablesother_4.png" /> Multipledeliverablesother': layer_Multipledeliverablesother_4,
        '<img src="legend/Regeneration_3.png" /> Regeneration': layer_Regeneration_3,
        '<img src="legend/HealthAndEquality_2.png" /> HealthAndEquality': layer_HealthAndEquality_2,
        '<img src="legend/Development_1.png" /> Development': layer_Development_1,
        "Positron": layer_Positron_0,
        }, {
        collapsed: false
        }).addTo(map);
    setBounds();

I wasn't sure if you would add the event listener in that section but since it already calls layer_NorthEastnoinvert_7, below, which calls an onEachFeature: pop_NorthEastnoinvert_7 at which point I tried to add a listener for click and then calling that function

                onEachFeature: {pop_NorthEastnoinvert_7,
                        click: NEPanTo},

Which, obviously, didn't work and resulted in the control box disappearing. So I then put it one layer down within pop_NorthEastnoinvert_7 where it actually calls the layer.on function including a mouseout and mouseover but this then makes me think this is a popup box rather than the control box and once again, the PanTo did not work.

My issue is that I feel I know necessarily what I need to do but not where I need to do it - as the HTML is generated by the JavaScript it isn't as easy as just editing the div to include a class and use that function within the class - I could edit the javascript that generates the HTML, which is below, but then that changes all of them which will affect non-region layers too.

   _createRadioElement: function(t, i) {
            var e = '<input type="radio" class="leaflet-control-layers-selector" name="' + t + '"' + (i ? ' checked="checked"' : "") + "/>",
                n = document.createElement("div");
            return n.innerHTML = e, n.firstChild
        },
        _addItem: function(t) {
            var i, e = document.createElement("label"),
                n = this._map.hasLayer(t.layer);
            t.overlay ? ((i = document.createElement("input")).type = "checkbox", i.className = "leaflet-control-layers-selector", i.defaultChecked = n) : i = this._createRadioElement("leaflet-base-layers_" + u(this), n), this._layerControlInputs.push(i), i.layerId = u(t.layer), ki(i, "click", this._onInputClick, this);
            var o = document.createElement("span");
            o.innerHTML = " " + t.name;
            var s = document.createElement("div");
            return e.appendChild(s), s.appendChild(i), s.appendChild(o), (t.overlay ? this._overlaysList : this._baseLayersList).appendChild(e), this._checkDisabledLayers(), e
        },

What is the best approach for doing this with only some layers



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source