clojurescript google maps API

core.clj

(declare *map*)
(def user-events (atom []))

(defn handler-events [res]
  ;; clear markers from the map
  (doseq [e @user-events]
    (.setMap (:marker e) nil))
  (let [m (map #(assoc % :marker (event-marker %)) res)]
    (reset! user-events m)))

(defn fetch-events []
  (GET "/api/v1/areas/events"
       {:headers {:Authorization (str "Bearer " (str (get-in @current-user ["token"]))) }
        :handler handler-events}))

(defn follow-events [id]
  (POST "/api/v1/follow/events"
        {:headers {:Authorization (str "Bearer " (str (get-in @current-user ["token"])))}
         :format :json
         :params {:id id}
         :handler handler-events}))

(defn m-p [m p]
  (get-in m ["properties" p]))

(defn create-lat-lng [lat lng]
  (js/google.maps.LatLng. lat lng))

(defn create-marker [name lat lng]
  (js/google.maps.Marker. (clj->js {"position" (create-lat-lng lat lng) "title" name})))

(defn create-infowindow [id]
  (js/google.maps.InfoWindow. (clj->js {"content" (str "<div id='info-"id"'></div>")})))

(defn create-map [lat lng]
  (let [map-opts (clj->js {"center" (create-lat-lng lat lng) "zoom" 15 "mapTypeId" "roadmap"})]
    (set! *map* (js/google.maps.Map. (.getElementById js/document "map-canvas") map-opts))))

(defn event-info-window [event]
  [:div
   [:div (m-p event "description")]
   [:div "When event start's " [:b (.format (js/moment (m-p event "date")) "MMMM Do YYYY, h:mm:ss a")]]
   (if (= (get-in @current-user ["email"]) (m-p event "user"))
     [:div "This is your event"]
     [:div "Follow this event "
      [:button {:on-click #(follow-events (get-in event ["_id"]))} "follow"]]
     )
   ])

(defn event-marker [event]
  (let [marker (create-marker (m-p event "name") (m-p event "lat") (m-p event "lon"))
        infowindow (create-infowindow (get-in event ["_id"]))]

    (js/google.maps.event.addListener
     marker
     "click"
     (fn []
       (js/console.log "click")
       (.open infowindow *map* marker)
       ))

    (js/google.maps.event.addListener
     infowindow
     "domready"
     (fn []
       (js/console.log "domready")
       (reagent/render (event-info-window event) (js/document.getElementById (str "info-"(get-in event ["_id"]))))
       ))

    marker))

(defn map-component-render []
  [:div#map-canvas])

(defn map-component-did-mount []
  (create-map 50.04119 21.99912)
  (js/console.log "did-mount" *map*))

(defn map-component []
  (reagent/create-class {:reagent-render map-component-render
                         :component-did-mount map-component-did-mount}))

(defn render-events-in-my-areas []
  (fetch-events)
  (fn []
    (doseq [e @user-events]
      (.setMap (:marker e) *map*))

    [:div "Events from my area:"
     [:ul (for [event @user-events] ^{:key (get-in event ["_id"])}
               [:li
                [:div "created: " (m-p event "created") " user: " (m-p event "user")]
                [:div (m-p event "name")]])]
     [map-component]
     ]
    ))