core.cljs

(def m-chan (chan (sliding-buffer 100)))
(def map-state (r/atom {:pressed? false              ; if mouse down is pressed?
                        :transform-map [1 0 0 1 0 0] ; transform map position ;TODO: add zoooming
                        :start-point {:x 0 :y 0}     ; start point for move the map
                        :end-point {:x 0 :y 0}       ; last point for map move
                        :move-point {:x 0 :y 0}}))   ; current point of map move

(defn pan [x y]
  (swap! map-state update-in [:transform-map] assoc 4 x 5 y))

(defn map-state! [& arg]
  (apply swap! map-state assoc arg))

(defn handle-mouse-event []
  (go (while true
        (let [[evt-type point] (<! m-chan)]
          (case evt-type
            :down (map-state! :pressed? true :start-point point)
            :up (map-state! :pressed? false :end-point (:move-point @map-state))
            :leave (map-state! :pressed? false :end-point (:move-point @map-state))
            :move (if (true? (:pressed? @map-state))
                    (let [move-x (+ (-> @map-state :end-point :x) (- (:x point) (-> @map-state :start-point :x)))
                          move-y (+ (-> @map-state :end-point :y) (- (:y point) (-> @map-state :start-point :y)))]
                      (map-state! :move-point {:x move-x :y move-y})
                      (pan move-x move-y)
                      )))))))

(defn put-point-on-chan [type e]
  (put! m-chan [type {:x (.-clientX e) :y (.-clientY e)}]))

(defn country-view [id title class d]
  [:path {:key id :ref id :d d :title title :class-name class}])

(defn map-view [width height]
  (handle-mouse-event)
  (fn []
     [:svg {:style {:border "1px solid black"}
            :width (or width 600)
            :height (or height 600)
            :on-mouse-down #(put-point-on-chan :down %)
            :on-mouse-up #(put-point-on-chan :up %)
            :on-mouse-move #(put-point-on-chan :move %)
            :on-mouse-leave #(put-point-on-chan :leave %)}
      [:g {:transform (string/join "" ["matrix(" (string/join " " (:transform-map @map-state)) ")"])}
       (for [c data/country-def] (country-view (:id c) (:title c) "land" (:d c)))
       ]]
     ))

running on https://salty-bastion-6078.herokuapp.com/