Clojurescript реагирует-листовка не отображают плитки правильно

Question

Я пытаюсь использовать реагировать-листовку ClojureScript, но у меня есть проблема с тем, как плитками делают:

• некоторые плитки не отображаются
• есть плитка показ рядом друг с другом в разных городах

Вот код, у меня есть:

(ns carder-devcards.map 
    (:require [taoensso.timbre :as timbre] 
      [cljsjs.react-leaflet] ;; js/ReactLeaflet 
      ) 
    (:require-macros [devcards.core :as dc :refer [defcard]])) 


(defn build 
    ([component props] 
    (build component props (array))) 
    ([component props & children] 
    (.createElement js/React 
        component 
        (clj->js props) 
        (array children)))) 


(def tile-layer (partial build js/ReactLeaflet.TileLayer)) 
(def leaflet-map (partial build js/ReactLeaflet.Map)) 
(def marker (partial build js/ReactLeaflet.Marker)) 
(def popup (partial build js/ReactLeaflet.Popup)) 



(defcard simple-leaflet 
    (fn [state] 
    (let [{:keys [pos zoom] :as st} @state 
      tl (tile-layer {:url "http://{s}.tile.osm.org/{z}/{x}/{y}.png" 
          :attribution "&copy; <a href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors"}) 
      mk (marker {:position pos})] 
     (leaflet-map {:center pos :zoom zoom} 
        tl 
        mk 
        ))) 
    {:pos [51.505, -0.09] 
    :zoom 13} 
    {:header true}) 

И вот результат у меня локально.

Примечание: изменение размера браузера, кажется, есть эффект, так что это может быть проблемой CSS, а также (?). Я попробовал включая следующие без эффекта:

.leaflet-container { 
    height: 400px; 
    width: 100%; 
} 

Answer 1

Просто разместить свой собственный очень простой первый вырезать листовку на всякий случай, что это помогает:

(def URL-OSM "http://{s}.tile.osm.org/{z}/{x}/{y}.png") 

(defn create-map [] 
    (let [m (-> js/L 
       (.map "mapid2") 
       (.setView (array -33.8675 151.2070) 9))  ;; Sidney 
     tile1 (-> js/L (.tileLayer URL-OSM 
            #js{:maxZoom  16 
             :attribution "OOGIS RL, OpenStreetMap ©"})) 
     base (clj->js {"OpenStreetMap" tile1}) 
     ctrl (-> js/L (.control.layers base nil))] 
    (.addTo tile1 m) 
    (.addTo ctrl m))) 

Я использую [cljsjs/leaflet "0.7.7-4"].

Редактировать А вот листовки-ориентированный вариант а разметка:

(hiccup/html 
    [:head 
    [:meta {:charset "UTF-8"}] 
    [:meta {:name "viewport" :content "width=device-width, initial-scale=1"}] 
    [:link {:rel "stylesheet" :href "http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" :type "text/css"}] 
    [:script {:src "http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js" :charset "utf-8"}] 
    [:body 
    [:div {:id "mapid"}] 
    [:div {:id "main-app-area"}] 
    [:script {:src "/reconnect/js/main.js" :type "text/javascript"}]]) 

Answer 2

Ответ от @ Криса Мерфи поставил меня на правильном пути, так как у меня был такой же ошибка с ним.

Получается, что мне не хватало файлов css leaflet.js, в том числе и у меня была проблема.