Fork me on GitHub
#reagent
<
2019-04-12
>
manandearth21:04:40

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?