erm..... uh... what is happening here: A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

are you doing interop?

usually a missing as-element or something like that

hmm. nah, its not interop..... but maybe I should be looking into as-element?

you shouldn’t need to if you’re not using react libraries

can you narrow down where it is happening?

oh, im a dummy. I figured it out hahaha

so there really doesn't seem to be any actual way for the component itself to know where it's rendered (i.e. it's .getBoundingClientRect)?

you can store the ref to it in an r/atom, but if you use the ref in a rendering function, you'll cause an infinite update loop

@kaosko You can do this without causing infinite loop, this component should give a example of using ref fn to get info from DOM: https://github.com/metosin/komponentit/blob/master/src/cljs/komponentit/scrollbar_width.cljs#L11

I wonder if it would make sense or be feasible to do a leaflet wrapper, what would take layers as children. So you could do something like

[leaflet-map
  [tile-layer url-atom]
  [marker-layer marker-data-atom]]

Right now this is a bunch of functions playing with reagent props and state. Quite a mess.

@tomi.hukkalainen_slac did you check https://github.com/PaulLeCam/react-leaflet already?

@valtteri @tomi.hukkalainen_slac I have example of using react-leaflet here: https://github.com/metosin/komponentit/blob/master/example-src/cljs/example/map.cljs

It is also possible to use Reagent inside custom Leaflet Controls, by calling r/render in Control update method (not optimal solution though). But I don't have public examples for that.

@valtteri I did, but though it handles the basics, it's not very smart regarding updates. So adding one marker to 5000 others will cause it to recreate them all, IIRC.

I guess I should still use that first, and then think if it's worth trying to optimize it :thinking_face:

@tomi.hukkalainen_slac If you use React keys, React should take care of only adding new markers.

Yeah, Leaflet is cool for displaying data. However editing features are quite limited and broken when working with custom projections. I tried direct interop according to https://github.com/Day8/re-frame/blob/master/docs/Using-Stateful-JS-Components.md#example-using-google-maps I ended up switching to OpenLayers using direct interop. I have my Leaflet doodling still in a branch https://github.com/lipas-liikuntapaikat/lipas/blob/leaflet/webapp/src/cljs/lipas/ui/map/map.cljs

Marker (MapLayer) is added to Leaflet in componentDidMount: https://github.com/PaulLeCam/react-leaflet/blob/master/src/MapLayer.js#L33 so if the React key stays the same, it is not added to Leaflet again etc.

I ended up keeping custom controls “outside” Leaflet and passing changes in as props and mutating the map manually.

And now I’m doing the same stuff with OpenLayers

We’ll see how it goes. 🙂

I origianally also had controls outside Leaflet but that didn't work when using Leaflet-fullscreen

Yeah that might be problematic. I’m using divs with fixed position that float on top of the map. I have no idea how that would work fullscreen though.

I guess I misinterpreted react-leaflet earlier. The basic stuff looks good. Would have to hack a bit to get MarkerClusters working.

MarkerClusters is pretty sweet!

This was posted in #jobs yesterday, but in case you are not monitoring that channel...

@juhoteperi ah, yes of course. it's quite enough to avoid the infinite loop by only resetting the ref when you have a value, thanks!