Я использую реактивную листовку, clojurescript и hx для рисования карты на веб-странице. Но загружается только частично. Я создаю компонент в одном пространстве имен, но вызываю его в другом. Я также стараюсь монтировать карту только после ее инициализации.
;; 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 "© <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 ..."]))
В отдельном пространстве имен я создаю новый компонент hx, который использую для рендеринга карты.
(hx/defnc map-view [props]
[map/draw-map])