; Following code is WRONG, see comments for details. | |
(defn google-map [] | |
(let [pos (subscribe [:current-position])] | |
(reagent/create-class | |
{:reagent-render | |
(fn [] | |
[:div | |
[:h4 "Map"] | |
[:div#map-canvas {:style {:height "400px"}}]]) | |
:component-did-mount | |
(fn [] | |
(let [map-canvas (.getElementById js/document "map-canvas") | |
map-options (clj->js {"zoom" 9}) | |
gmap (js/google.maps.Map. map-canvas map-options) | |
marker (js/google.maps.Marker. (clj->js {:map gmap :title "Drone"}))] | |
(reagent.ratom/run! | |
(let [latlng (js/google.maps.LatLng. (:latitude @pos) (:longitude @pos))] | |
(.setPosition marker latlng) | |
(.panTo gmap latlng)))))}))) | |
; Another attempt, using props and lifecycle to udpate marker position | |
(defn gmap-component [] | |
(let [gmap (atom nil) | |
options (clj->js {"zoom" 9}) | |
update (fn [comp] | |
(let [{:keys [latitude longitude]} (reagent/props comp) | |
latlng (js/google.maps.LatLng. latitude longitude)] | |
(.setPosition (:marker @gmap) latlng) | |
(.panTo (:map @gmap) latlng)))] | |
(reagent/create-class | |
{:reagent-render (fn [] | |
[:div | |
[:h4 "Map"] | |
[:div#map-canvas {:style {:height "400px"}}]]) | |
:component-did-mount (fn [comp] | |
(let [canvas (.getElementById js/document "map-canvas") | |
gm (js/google.maps.Map. canvas options) | |
marker (js/google.maps.Marker. (clj->js {:map gm :title "Drone"}))] | |
(reset! gmap {:map gm :marker marker})) | |
(update comp)) | |
:component-did-update update | |
:display-name "gmap-component"}))) | |
(defn gmap-wrapper [] | |
(let [pos (subscribe [:current-position])] | |
(fn [] | |
[gmap-component @pos]))) |
4
was just a consequence of putting the run!
at the wrong place, initial comment updated accordingly.
I don't think it was wrong per se but it's now unnecessary once run!
is called where it should be.
run!
is very wrong here (if following re-frame approach).
Discussion here: https://clojurians-log.clojureverse.org/reagent/2015-08-05.html
I rewrote it, see https://gist.github.com/jhchabran/e09883c3bc1b703a224d#file-2_google_map-cljs if you're interested :)
It should use will-receive-props
for update
as we don't interact with the dom as opposed to http://nils-blum-oeste.net/clojurescripts-reagent-using-props-in-lifecycle-hooks/ example.
When using this I have found it important to run :component-will-unmount to dispose of the stateful component
I feel like if's correct enough it would be a nice addition to https://github.com/reagent-project/reagent-cookbook/tree/master/recipes/google-maps given the re-frame part is replaced with a ratom.