Leaflet Separated Div Element Interaction

I am struggling for a bit now with this interaction and finding the right solution on that matter is a quite difficult task (for now). So, I have created map with some basic point

Solution 1:

What you describe is a common use case. I am pretty sure there should be plenty resources (in particular on SO) that provide the same functionality.

As for the TypeError you report, note that jQuery's $.getJSON returns a jqXHR object, not an array.

As to implement your functionality, you already know that you can perform instructions for each GeoJSON feature through the onEachFeature option of L.geoJSON constructor. Therefore, why not simply building your list items in there, instead of trying to parse your people array separately? This is actually what your code seems to do, by appending a new row into #feature-list table.

The biggest advantage of this approach is that you can directly link your external item "click" event listener to the appropriate layer / marker, since it is available as parameter of the onEachFeature function:

functiongoTo(layer) {
    map.panTo(layer.getLatLng());
    layer.openPopup();
}

L.geoJSON(null, {
    onEachFeature: function (feature, layer) {
        // Whatever you want to add to your layer.// Build your external item.// Then attach the "click" event listener.
        item.addEventListener("click", function () {
            goTo(layer);
        });
    }
});

Solution 2:

One way of doing this is to bind a new popup to the same position on the map...

function openPopup(elementRightSide){
   L.popup() 
            .setLatLng(elementRightSide.lat, elementRightSide.lng])
            .setContent(elementRightSide.content)
            .openOn(map);
}