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

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"  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

CodePudding user response：

I am trying to add an event that occurs on click/on layer add (but not of every layer only specific region layers)

Then do just that, and don't overcomplicate things by trying to find workarounds.

All leaflet layers are event targets, and fire add and remove events, as documented, as well as on/off methods for attaching/detaching event handlers.

So if you have a layer in a variable layer_NorthEastnoinvert_7 ...

layer_NorthEastnoinvert_7.on('add', function(ev) {
   // Do stuff
});

Which in your case should be something like

layer_NorthEastnoinvert_7.on('add', function(ev) {
    map.panTo([54.04598, -2.73656])
});

Or, since the second parameter to the on/off method is a function,

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

layer_NorthEastnoinvert_7.on('add', NEPanTo);

Note that the parameter to on is a reference to the function, and not the result of a function call. Also note that event handler functions can ignore the event passed as first parameter.

My experience with JavaScript [is] outdated (apparently OnClick is deprecated?)

Not really - it's still there, for HTMLElements; but there are downsides.