This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-10-02
Channels
- # 100-days-of-code (1)
- # announcements (2)
- # beginners (122)
- # boot (5)
- # calva (5)
- # cider (54)
- # cljdoc (1)
- # clojure (132)
- # clojure-brasil (1)
- # clojure-italy (4)
- # clojure-nl (6)
- # clojure-uk (105)
- # clojurescript (43)
- # core-async (17)
- # cursive (14)
- # datomic (60)
- # emacs (35)
- # figwheel-main (44)
- # fulcro (70)
- # graphql (1)
- # jobs (19)
- # jobs-discuss (5)
- # leiningen (5)
- # luminus (2)
- # off-topic (40)
- # onyx (2)
- # overtone (5)
- # re-frame (36)
- # reagent (29)
- # ring-swagger (20)
- # rum (13)
- # shadow-cljs (19)
- # testing (5)
- # tools-deps (25)
- # vim (5)
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.
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]]
I suppose I would have to override quite a lot, since when the layer data changes, the layers need to be able to remove and add themselves to the parent map.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.
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.
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!