How can I bind d3 map tooltips to Leaflet's popupPane?

3
votes

I've got an adaptation of Crosslet that sets a few map layers on top of one another:

  • Layer 1: Satellite Imagery tiles (In leaflet-tile-pane)
  • Layer 2: D3-based vector Polygons (In leaflet-overlay-pane)
  • Layer 3: Labels/Roads reference tiles (In leaflet-top-pane, added with this method)

Application here

Source here

The problem with this is that the hover tooltips - bound to mouseover of the D3 polygons - are showing up underneath the reference tiles:

enter image description here

I've tried changing the z-index of the hover tooltip element, but the elements are sort of trapped within their respective panes. How can I bind the D3-generated popups to the leaflet popup pane?

Thanks!

1
javascriptbackbone.jsd3.jsz-indexleaflet
There's no z-index in SVG -- the elements are rendered in the order in which they appear. So if you want an element to appear on top, you have to make sure that it comes last in the DOM. – Lars Kotthoff
That explains why that doesn't work; but my question is exactly that: how can I add the <g class="hover"> element last (i.e. after the top-pane tiles)? – Bill Morris
Run that code after the code that adds those tiles. Sorry to be not more specific, but your application is rather large. – Lars Kotthoff
Many apologies; I blame backbone :) But the <g class="hover"> element is already appended to the SVG after the tiles are added to the top pane. – Bill Morris
The .leaflet-top-pane {pointer-events: none;} saved me. I needed to keep interaction on my D3 pane while there was a label pane on top and this did the trick. cheers – jotamon

1 Answers

2
votes

It seems that the only way is to make yet another pane for the tooltips (layer 4) and hack the d3 tooltip code to add the element in that pane.