Issues around loss of Virtual DOM?

[bigethan]

This is a question, not an issue :-)

I'm looking at doing some map work with leaflet, and was wondering what using it within react does for the better rather than using just leaflet since react loses the DOM after the initial render. I enjoy react, but am new to it. I'm in a similar situation with Leaflet. So I know just enough to be dangerous, but at least I know that.

Is this better/worse for certain types of maps? Any other caveats? What pain did the creation of this library ease?

Thanks for your time, and for this library.

[PaulLeCam]

I don't think you would get any performance benefit using this lib rather than Leaflet directly, it only uses React as an abstraction over Leaflet.

It works well with static maps, in my opinion the biggest advantage is that you don't have to switch between Leaflet objects and React components, as this lib does it for you. For dynamic maps, especially if they refresh often, you'll probably want more imperative control so interact directly with Leaflet objects.

Hope this helps, don't hesitate if you have any other question!

[gambit3]

I'll actually disagree with the creator of this lib and say that this is exactly what I was looking for when creating a dynamic map using react. You won't get a performance boost thats true but if you wan't to build a map ui using some kind of client side framework in my opinion this is the way to go. I've done exactly the same work as I'm doing now before with: vanilla Leaflet and Backbone and the react way seems to be the way to go in terms of code structure and maintenance.

I've been working with react and react-leaflet for several months now and I can say that this library is capable of driving a dynamic ui but not out of the box. I just issued a dump of some pull request of changes I had to make to make it work the way I needed to. And I know there still some issues.

So my answer to the original question would be:

• you will get all the benefit of the react declarative code structure
• as the author mentioned this is perfect if you already have a react app around a map and just wan't to display a map and not interact with it very much
• you won't get any speed boost
• depending on the size on your project and your requirements you'll run into some issues when building dynamic behaviours and probably you will have to familiarise yourself with the internals of react-leaflet and be able to make improvements to it

[luqmaan]

Do you have a link to what you've built @gambit3?

[gambit3]

It's not live yet. I can show you this: http://mapwidget-staging.elasticbeanstalk.com/24 which is an old backbone version of the map I'm working on.

The full map will live inside app.socialbicycles.com which is behind a paywall :(

The full map is the same as the widget version but has more features and it's connected to the back end using web-sockets so the markers and basically everything else updates live. This really works great with react-leaflet it's just like writing server side templates and it all magically works!

I use react state to control marker icon css and html, popup content, popping markers in and out of clusters, rendering reversed polygons depending on zoom, and obviously adding removing markers and polygons. The only thing that I wasn't able to manage using state are map position/center and popup state (open closed). This is tricky but probably solvable.

[tsemerad]

@gambit3 Were you able to track map zoom state? I want to keep the map's zoom level in a store so that various components can react to it (for example, turn off a layer when zoomed out enough).