Карта React-leaflet частично загружается в код Clojurescipt

Я использую реактивную листовку, 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 "&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 ..."]))

В отдельном пространстве имен я создаю новый компонент hx, который использую для рендеринга карты.

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

person Community    schedule 18.07.2019    source источник


Ответы (1)


Добавив таблицу стилей react-leaflet, в свой индексный файл я добавил:

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