0

This seems like it should be a common enough problem but somehow I cannot find the solution anywhere.

I have a layer full of polygons (polygons representing districts of a city), and a layer full of markers (points of interest) that is rendered on top of those polygons.

Each marker has a popup associated with it, and each polygon has a tooltip associated with it. The polygon is also highlighted when the cursor is hovering over it. This works.

But when I hover over the marker, the tooltip of the polygon and the highlighted style disappear. How do I fix this? I want to be able to hover over the marker and still have the state highlighted. Hovering above the marker in a state should not mean that the cursor is outside of the state.

I don't want to render the markers below the polygon.

I tried playing with the bubblingMouseEvents option and interactive option but they dont have the desired effect.

I don't want to to pointerevents:none, because then I lose out on al interactivity with the marker. I want to be able to click on it.

Any suggestions?

This is how it is displayed:

1- Cursor is hovering above the state enter image description here 2- Cursor is hovering above the city marker cursor hovers above city 3- Clicked on the city marker cursor cicked on city Since I cannot paste the exact code here, this is a recreation of it with dummy values.

const map = L.map("map", {
        center: [40.0238,-90.5757],
        minZoom: 1,
        maxZoom:14,
        zoom:2.5,
});

L.tileLayer.provider("Stamen.Watercolor").addTo(map);

const statesLayer=L.geoJson.ajax("./states.geojson", {
    onEachFeature: (f, l) => {
        l.bindTooltip(f.properties["name"], { sticky: true });
        l.setStyle({
            color: "blue",
                weight: 1.5,
                fillColor: "blue",
                fillOpacity:0.2
        });
        l.on("mouseover", () => {
         
            l.setStyle({
                color: "blue",
                fillColor: "green",
                fillOpacity: 0.5
            });
        })
        l.on("mouseout", () => {
            l.setStyle({
                color: "blue",
                weight: 1.5,
                fillColor: "blue",
                fillOpacity:0.2
            })
        });
    
    }
}).addTo(map);

const citiesLayer=L.geoJson.ajax("./cities.geojson", {
    onEachFeature: (f, l) => {
        l.bindPopup(f.properties["NAME"]);
    }
}).addTo(map);
4
  • There is no marker creation in the code above.
    – TomazicM
    Aug 5 at 13:36
  • If you want marker to be interactive, this is not achievable without some hacked programming, condition being also that each polygon must has unique ID and each marker has property with the ID of the polygon marker belongs to.
    – TomazicM
    Aug 5 at 14:24
  • I see. So if I understand correctly, I need to make sure that there is some cross reference between the point layer and the polygon layer for the functionality to work. Otherwise, there is no way for it to recognize that the cursor is in the same polygon when I hover over a city. Is my understanding correct? Aug 6 at 8:03
  • Yes, exactly. And as I wrote, then there is some coding needed to handle mouse enter and leave events for polygons and markers.
    – TomazicM
    Aug 6 at 8:09
0

Ok I found a way to do it.

The leaflet-pip plugin helps find all the polygons (in a layergroup) in which a given point resides.

I simply found the used this to find the polygon over which the point resides and highlight it

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.