This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-04-12
Channels
- # announcements (1)
- # aws (1)
- # beginners (182)
- # boot (33)
- # calva (87)
- # cider (3)
- # clj-kondo (2)
- # clojure (108)
- # clojure-dev (73)
- # clojure-europe (2)
- # clojure-italy (27)
- # clojure-nl (22)
- # clojure-norway (1)
- # clojure-spec (1)
- # clojure-uk (122)
- # clojurescript (78)
- # cursive (5)
- # datomic (17)
- # duct (2)
- # emacs (25)
- # events (3)
- # figwheel (1)
- # figwheel-main (1)
- # fulcro (88)
- # kaocha (6)
- # leiningen (2)
- # luminus (1)
- # lumo (4)
- # nrepl (4)
- # off-topic (37)
- # onyx (1)
- # re-frame (35)
- # reagent (1)
- # reitit (4)
- # shadow-cljs (8)
- # spacemacs (22)
- # specter (2)
- # sql (19)
- # tools-deps (12)
- # vim (11)
Hello. I am trying to AJAX GET (cljs-ajax) some json :
(defn fetch-data! [a]
(GET "/transit" {:response-format :json
:keywords? true
:handler (fn [response] (reset! a (transform-df response)))})) ;the transform-df is just a bit of format spec magic
it works fine for calling oz/vega
component:
(defn oz-viz []
(let [d (r/atom nil)]
(fetch-data! d) ;<- HERE
(fn []
[:div
[oz/vega (schema @d)]]))) ;;schema is the spec map for rendering the vega component
But for a Leaflet (https://leafletjs.com/) :
First the leaflet view and tile with the AJAX call to populate an atom:
(defn homes-did-mount []
(let [atm (r/atom nil)]
(fetch-data! atm)
(fn []
(let [map (.setView (.map js/L "map") #js [36.253 -5.965] 17)
centered (-> (.tileLayer js/L URL-OSM
(clj->js {:attribution attribution
:maxZoom 19}))
(.addTo map))]
(doseq [e @atm]
(-> (circle e)
(.addTo map)))))))
The function in the doseq
is:
(defn circle [entry]
(let [lon (:longitude entry)
lat (:latitude entry)]
(.circle js/L #js [lat lon]
(clj->js {:color "red"
:fillColor "#f03"
:fillOpacity 0.5
:radius 5}))))
then the reagent component is rendered in:
(defn home []
(fn []
(r/create-class
{:component-did-mount (homes-did-mount)
:reagent-render (fn [] [:div#map {:style {:height "640px" :width "1024px"}}])})))
I tried many variations of the anonymous function and I moved the let
between all the functions and handlers,
The result is that the atom atm
will render nil ( Ajax call failed or didn't happen...) if I replace the atom with a mock collection it does render.
There's an interesting talk about reagent and Leaflet by @maleghast https://github.com/maleghast/conj-guide/blob/master/src/cljs/conj_guide/maps.cljs , I don't think that that method answers the ajax call issue.
Anyone?