A minimalistic ClojureScript interface to React.js
zackteo 2021-05-24T12:46:51.001300Z

Does anyone have an example of using leaflet from clojurescript? Am using `reagent` I can't quite understand how to get a minimal example working via shadow-cljs

rgm 2021-05-26T20:51:11.035Z

I’m a bit late to this party but we put out our example reagent/re-frame leaflet component here … it’s not the most efficient thing in the world (it blows away all the markers every time, for example) but hopefully it’s enough to get started.

p-himik 2021-05-24T12:48:56.001400Z

Is there something that you have tried but doesn't work?

tatut 2021-05-24T12:49:29.001600Z <- very old, don’t know how well that works nowadays

zackteo 2021-05-24T12:53:36.001900Z

@p-himik have been looking at cljs repo that have used leaflet, but most examples are quite dated. I'm not too sure how to go about initialising a div for the leaflet map component and then specifying the map to correspond to that div

tatut 2021-05-24T12:55:42.002100Z

you either use ready made react components like or you call the leaflet methods from you component init

zackteo 2021-05-24T12:57:31.002400Z

was planning on using react-leaflet but is MapContainer something I can import and then call from hiccup? Don't quite understand how to go about doing it

p-himik 2021-05-24T12:59:06.002600Z

I think you should go through Reagent examples. I'm not sure whether Leaflet specifically is handled there, but pretty much all of the major cases of interop with the JS world are there.

p-himik 2021-05-24T13:00:36.002800Z

I really doubt there's any use in Reagent-specific wrappers around JS libraries. More often than not they don't bring anything special to the table or are straight up abandoned. There's some value in React-specific wrappers, if they are maintained. Because it's trivial to use React components from Reagent and you won't have to deal with the state yourself.

p-himik 2021-05-24T13:01:17.003Z

So to answer your question about MapContainer - yes, it is possible. Importing and using React components in Reagent is well polished, well documented, and there's plethora of examples.

zackteo 2021-05-24T13:03:41.003200Z

I was trying to do

(ns ... (:require [reagent.core :as reagent]
            [reagent.dom :as rdom]
            ["leaflet-react" :refer MapContainer]))
(rdom/render [:div
                [:h3 "Leaflet map"]
               (.getElementById js/document "app"))
but I don't think it works that way

zackteo 2021-05-24T13:05:15.003400Z

Is there a specific place for where the major cases of JS interop with Reagent are documented ?

zackteo 2021-05-24T13:08:25.003900Z

Thanks! I seem to have missed that

juhoteperi 2021-05-24T13:08:51.004100Z

One example with React-leaflet, but not sure if I'd use that now. It might have had some problems as I've recently just used it directly:

zackteo 2021-05-24T13:11:37.004400Z

ohhh! I think reagent/adapt-react-class was what I needed ooo

emccue 2021-05-24T13:12:49.004700Z


emccue 2021-05-24T13:12:56.004900Z

(rdom/render [:div
                [:h3 "Leaflet map"]
                [:&gt; MapContainer]]
               (.getElementById js/document "app"))

emccue 2021-05-24T13:13:14.005100Z

that :&gt; works as a shortcut

zackteo 2021-05-24T13:14:01.005300Z

let me try .... 🙂

p-himik 2021-05-24T13:14:07.005500Z

And it is all in the documentation that I linked. :)

zackteo 2021-05-24T14:04:16.005700Z

Is there a way to resize an element in hiccup?

zackteo 2021-05-24T14:05:10.005900Z

I think i got leaflet working - but the tilelayer I added is behaving very very strangely. Like it is all jumbled up - not too sure what might be causing it to behave that way

p-himik 2021-05-24T14:15:00.006100Z

Yes, depending on what kind of element it is. Same as with the initial problem. Figure out what's wrong using the DevTools inspector, then see how it should be fixed via the component API or the surrounding markup.

zackteo 2021-05-24T14:18:39.006300Z

I did

(rdom/render [:div
                [:h1 "Leaflet map"]
                ;; [:&gt; Map
                ;;  {:center [65.6583 26.1475]}]
                [:&gt; MapContainer {:center [1.352, 103.851] :zoom 12 :scrollWheelZoom false}
                 [:&gt; TileLayer {:attribution "&amp;copy; &lt;a href=\"<>\"&gt;OpenStreetMap&lt;/a&gt; contributors"
                                :url "https://{s}.<{z}/{x}/{y}.png%22|{z}/{x}/{y}.png">}]]]
               (.getElementById js/document "app"))

zackteo 2021-05-24T14:19:35.006500Z

but not really sure how to debug something like this

p-himik 2021-05-24T14:21:38.006900Z

Doesn't look like a sizing problem, unless each tile is a separate HTML block element. Looks more like an X/Y/Z coordinate issue problem, where some of the coordinates are misplaced.

p-himik 2021-05-24T14:22:46.007100Z

Can you provide a bigger picture that includes full tiles?

zackteo 2021-05-24T14:24:19.007400Z

zackteo 2021-05-24T14:25:33.007800Z

I checked the tile-layer url "https://{s}.<{z}/{x}/{y}.png|{z}/{x}/{y}.png>" and it seems to be working fine in other places

zackteo 2021-05-24T14:26:08.008Z

Unless I'm somehow having issues with react-leaflet :thinking_face:

p-himik 2021-05-24T14:26:22.008200Z

What do you mean by "other places" exactly?

zackteo 2021-05-24T14:27:16.008400Z

Had a sample html file running a small leaflet script, tried the tile later there

p-himik 2021-05-24T14:27:55.008600Z

And judging by the bigger image, it's almost certainly a problem with tile coordinates. I would try reproducing it without react-leaflet.

p-himik 2021-05-24T14:29:16.008800Z

Also check browser's JS console for any errors/warnings, just in case.

zackteo 2021-05-24T14:38:22.009Z

Now that you mention it ... Maybe I'm somehow missing some css DevTools failed to load SourceMap: Could not parse content for <http://localhost:8081/assets/css/>: Unexpected token &lt; in JSON at position 0

p-himik 2021-05-24T14:41:11.009200Z

It's talking about source maps for the CSS, not the CSS itself. That message is harmless.

zackteo 2021-05-24T14:50:46.009400Z

Right right :x will try it without react-leaflet then

Joni Hiltunen 2021-05-24T19:18:35.010200Z

I have a weird problem... If I uncomment this line that conditionally disables a button, I can't change the text inputs anymore? Am I doing something wrong o_O

p-himik 2021-05-24T19:21:24.010300Z

login-panel is a form-1 component. It cannot both use and define ratoms within itself. If you define a ratom within a component, you almost always want to use a form-2 or a form-3 component. Or just reagent.core/with-let .

Joni Hiltunen 2021-05-24T19:24:02.010900Z


zackteo 2021-05-24T22:02:42.011400Z

Not sure if I should try using react-leaflet via [cljsjs/react-leaflet "2.4.0-0"] instead of via npm

p-himik 2021-05-24T22:04:37.011600Z

No difference, but NPM is better because the versions are generally more recent and there can be no issues with pregenerated externs.

p-himik 2021-05-24T22:05:22.011800Z

And it also works with the rest of the NPM ecosystem if there are common dependencies. When mixing cljsjs and NPM, you can easily end up with duplicated dependencies in your bundle.

p-himik 2021-05-24T22:05:28.012Z

Long story short, don't use cljsjs.

p-himik 2021-05-24T22:08:58.012200Z

If you still have a problem and have no idea what's causing it, try getting rid of stuff. Get rid of as much code as possible. Then of any wrappers of that library. Then of Reagent. Then of ClojureScript. Then of React. If it still doesn't work, you should end up with a minimal reproducible example on your hand that you can directly post in a new issue on their GitHub.

Joni Hiltunen 2021-05-24T23:31:14.013500Z

Re-com related question... Any tips on how I could make the buttons "fill the whole space" of their box container? So that the empty space is "inside the button"... image source