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

[Zhurzhiu]

I am trying to move your implementation to ES6/React. And found problems with that, which I described in this StackOverflow question. Can you please give advice or comment on this?

[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 notifications@github.com 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 https://github.com/humangeo/leaflet-dvf/issues/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.