react-leaflet.clj

(ns carder-devcards.map
  (:require [taoensso.timbre :as timbre]
            [cljsjs.react-leaflet] ;; js/ReactLeaflet
            )
  (:require-macros [devcards.core :as dc :refer [defcard defcard-doc defcard-om-next noframe-doc deftest dom-node]]))


(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})

;; result screenshot https://infinit.io/_/3f9V2NU