Clojurians Log v2

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

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

https://github.com/tatut/reagent-leaflet <- very old, don’t know how well that works nowadays

@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

you either use ready made react components like https://react-leaflet.js.org or you call the leaflet methods from you component init

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

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.

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.

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.

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"]
                [MapContainer]]
               (.getElementById js/document "app"))

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

https://github.com/reagent-project/reagent/blob/master/doc/InteropWithReact.md

Thanks! I seem to have missed that

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: https://github.com/metosin/komponentit/blob/master/example-src/cljs/example/map.cljs

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

@zackteo

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

that :> works as a shortcut

let me try .... 🙂

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

Is there a way to resize an element in hiccup?

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

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.

I did

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

but not really sure how to debug something like this

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.

Can you provide a bigger picture that includes full tiles?

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

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

What do you mean by "other places" exactly?

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

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

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

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/bootstrap.css.map>: Unexpected token &lt; in JSON at position 0

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

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

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 https://gist.github.com/Sose/5d4f6a9941295fd6e065dafa4a4172d9#file-login-cljs-L52

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 .

https://github.com/reagent-project/reagent/blob/master/doc/CreatingReagentComponents.md

Thanks

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

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

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.

Long story short, don't use cljsjs.

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.

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 https://imgur.com/GILRt7F source https://gist.github.com/Sose/06e7234f8daa79ebe60ba17f8220abe7#file-buttons-cljs-L36