Question about React integration with Leaflet 1.2.0 and Leaflet-dvf 0.3.1 about leaflet-dvf

[sfairgrieve]

It looks like things are working, but it's a layer order/z-index problem. I assume you're including the leaflet CSS? In leaflet.css the z-index values are set for those various layers, with leaflet-overlay-pane having a higher z-index value than the other layers.

…

On Tue, Nov 28, 2017 at 7:26 AM Zhurzhiu ***@***.***> wrote: I am trying to move your implementation to ES6/React. And found problems with that, which I described in this StackOverflow question <https://stackoverflow.com/questions/47513470/leaflet-dvf-reactjs-implementation>. Can you please give advice or comment on this? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#121>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADQmZp8w2x_AzC4bImTxfUPdcdVK4ou2ks5s6_vzgaJpZM4QtKB3> .

[Zhurzhiu]

Thanks for response. Actually, I was trying following things:

1. CSS files in combined mode
   Added leaflet.css via html template (I didn't managed how to import it via ES6 import/webpack)
   Added leaflet-dvf.css via import

2. CSS files in html template:
   Added leaflet.css via html template
   Added leaflet-dvf via html template straight after leaflet.css

3. Chaneged z-index via Leaflet panes:
   map.getPane("overlayPane").style.zIndex = 650;
   map.getPane("overlayPane").style.position = "relative";

   When I removed "position:absolute" from leaflet-overlay-pane it will show Choropleth, but incorrect size and with other mismatch.

This didn't help. Hovever, I didn' see in dvf.css anything related to z-index or leaflet-overlay-pane

[sfairgrieve]

@Zhurzhiu if you inspect element on the leaflet-overlay-pane element, does it have an assigned z-index value of 400? Same with leaflet-tile-pane, does it have an assigned z-index value of 200 from leaflet.css?

[Zhurzhiu]

I added screenshots from three panes:

1. leaflet-tile-pane
2. leaflet-overlay-pane
3. leaflet shadow pane

Changing z-index on any of them didn't make any effect at all.

[sfairgrieve]

Hmmm. This is definitely a weird one. Any chance you could post a jsfiddle or similar example that I can take a look at? I haven't used React with Leaflet or Leaflet-DVF before, so it's hard for me to fully grasp what the problem could be.

[Zhurzhiu]

Thanks @sfairgrieve for your advice to make and example. I created example and it worked. So I checked other things, and found one CSS conflicting with DVF.
You can close this issue, because it's not issue anymore. Leaflet-dvf is playing really good with React. Thanks for this library!

[sfairgrieve]

@Zhurzhiu glad to hear it! I'll close this one, but let me know if you run into any other issues.