CODEWITHSUNDEEP
svgleafletgeojsonpane
Sebastian Thomas
Sebastian Thomas

Reputation: 1324

What is the best way to mix clickable SVG polys and divIcon markers in Leaflet.js?

I have a map which pulls in GeoJSON polygons and points.

I represent these using the standard Leaflet methods to create SVG and html markers respectively.

To get an idea: https://i.sstatic.net/cXiJQ.jpg

SVG = blue, markers = green.

Leaflet creates 'panes', div.leaflet-overlay-pane for the SVG, and div.leaflet-marker-pane for markers. The leaflet-marker-pane (bordered in red) covers half the viewport and has a higher z-index then the leaflet-overlay-pane, thereby making the SVG polys under it unclickable.

If I set the zindex of the overlay pane to be less than the marker pane, all the markers are unclickable as the overlay pane covers the whole view port.

I've read some things in the Leaflet Github issues about createPane(), but so far haven't seen it working. Should/will this be something which fixes this problem? ie, puy all markers and SVG polys in the same pane/div.

For the time being I've set the marker pane to be 1px x 1px. This seems to work fine, leading me to ask, why would the marker pane ever be set to half the viewport size?

Upvotes: 3

Views: 493

Answers (1)

reno184
reno184

Reputation: 114

you have to add your svg into leaflet-marker-pane, for that just use option 'pane' when you add your SVG to the map

  L.svgOverlay(svgOverlayElement, map.getBounds(), { pane: 'markerPane' }).addTo(map)

Upvotes: 0

Related Questions