Pan & zoom map from location search and apiary card marker

[fungjj92]

Overview

The client requested additional map interactions. Previously the apiary cards reflected map markers but otherwise didn't interact with the map; location search panned but didn't zoom the map. The added interaction is clicking the apiary marker (A, B, C...AA) and location search both pan & zoom the map down to the coordinate location at map zoom.

To do this I cleaned up the map view handling. The redux state already saved the map center and map zoom, in some cases, but now it is the source of truth for setting the map view.

Connects #531

Demo

Notes

You might be thinking we could not set zoomToResult to true in the geocoder options; unfortunately no, because of a conflicting bounding box bug already documented as a comment in Map.jsx

Testing Instructions

./scripts/beekeepers.sh start Open up the dev tools and see the redux logs expected actions, no duplicates Create some apiaries and click their letter markers. Zoom out and/or pan away and redo this. Search addresses in the geocoder and select.

[rajadain]

Taking a look now.

[rajadain]

Consider rebasing this on develop, as it starts from a commit before the prior release.

[rajadain]

Consider adding

diff --git a/src/icp/apps/beekeepers/sass/06_components/_card.scss b/src/icp/apps/beekeepers/sass/06_components/_card.scss
index 44aedcfc..8aa53211 100644
--- a/src/icp/apps/beekeepers/sass/06_components/_card.scss
+++ b/src/icp/apps/beekeepers/sass/06_components/_card.scss
@@ -82,5 +82,6 @@
     .marker {
         margin-right: 0.6rem;
         padding: 0;
+        cursor: pointer;
     }
 }

to make the mouse cursor into a pointer when hovering over the now clickable marker.

[fungjj92]

Thanks! That's a good suggestion, I've done that and removed the lingering blue button outline.