CODEWITHSUNDEEP
leafletclojurescriptreact-leaflet
user4148098
user4148098

Reputation:

React-leaflet map partialy loading in Clojurescipt code

I am using react-leaflet, clojurescript and hx to draw a map on a webpage. But is is only loading partially. I create the component in one namespace but call it in another. I also try to only mount the map only once it is initialized. 

;; In the map name space

(hx/defnc draw-map [props]
(let [!ref (react/useRef nil)
    [!map-view map-view-update-fn] (react/useState nil)]

(hooks/useEffect
 (fn []
   (when-not !map-view (let [m (-> js/L
                                 (.map !ref.current)
                                 (.setView #js [-26.718 30.384] 8))
                             tile1 (-> js/L
                                     (.tileLayer tile-layer-url
                                       #js{:maxZoom     13
                                           :attribution "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors"}))])

             geo-json-data (-> js/L (.geoJSON (clj->js data/geojson))))

   (.addTo tile1 m)
   (.addTo geo-json-data m)
   (.bindPopup geo-json-data get-loc-name)
   (.invalidateSize m)
   (.setView m #js[-26.718 30.384] 8)
   (fn create-map-cleanup []
     (.remove m)))
 [!ref])
[:div {:ref !ref} "Map loading ..."]))

In a separate namespace I create a new hx component that I use to render the map.

(hx/defnc map-view [props]
   [map/draw-map])

Upvotes: 0

Views: 201

Answers (1)

user4148098
user4148098

Reputation:

Adding the react-leaflet stylesheet, in my index file I added:

[:link {:rel "stylesheet"
                     :href "https://unpkg.com/[email protected]/dist/leaflet.css"
                     :integrity "sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
                     :crossorigin ""}]]

Upvotes: 1

Related Questions