CODEWITHSUNDEEP
javascriptleafletgeojson
Sancho Pansen
Sancho Pansen

Reputation: 5

How to realize two overlaying layers? One with Popups, the other one with Info-div

I'm trying to display two overlaying layers (geojson). Layer1 should give me information by hovering over it (works fine based on the Leaflet Choropleth Map Example. Layer2 is situated within Layer1 and should give me information by clicking which does not work. It seems as if Layer1 is in front and disables the interaction with the other one.

I already tried the bringToFront() and bringToBack() methods to handle the problem.

To checkout what I mean look here: http://jsfiddle.net/uFPwB/2/

Upvotes: 0

Views: 96

Answers (1)

hassassin
hassassin

Reputation: 5054

It's right there in the highlight feature function.

if (!L.Browser.ie && !L.Browser.opera) {
    layer.bringToFront();
}

This, when you mouseover, will bring the layer above the other one. I updated the fiddle without this line and it seems to work just fine. http://jsfiddle.net/uFPwB/3/

If you want to keep it over and test clicks on the other polygon, you will need to capture the event and directly test it on the bounds of the other polygon.

EDIT: it's not pretty but here is how to manually trigger the popup, if the click is over geojson2 but the click is on geojson1: http://jsfiddle.net/uFPwB/4/

var ll = e.latlng;
if (geojson2.getBounds().contains(ll)) {
    geojson2.openPopup();
}

Hope this helps!

Upvotes: 0

Related Questions