Zoom flyto refactor

src/components/AnimatedMarker/animated-marker.js

@@ -3,25 +3,23 @@ import mapboxgl from "mapbox-gl";
 import { bboxPolygon, point, booleanPointInPolygon } from "@turf/turf";
 
 class AnimatedMarker {
-  constructor(provider) {
-    this.provider = provider;
-    this.markerElement = this.createMarkerElement(
-      this.provider.id,
-      this.provider.typeId
-    );
-    this.element = this.markerElement.element;
-    this.markerIcon = this.markerElement.icon;
-    this.markerIconHighlight = this.markerElement.highlight;
-    this.marker = new mapboxgl.Marker({
-      element: this.element
-    }).setLngLat(provider.coordinates);
-  }
+    constructor(provider) {
+        this.provider = provider;
+        this.markerElement = this.createMarkerElement(this.provider.id, this.provider.typeId);
+        this.element = this.markerElement.element;
+        this.markerIcon = this.markerElement.icon;
+        this.markerIconHighlight = this.markerElement.highlight;
+        this.marker = new mapboxgl.Marker({
+            element: this.element
+        }).setLngLat(provider.coordinates);
+    }
 
-  isInView = bounds => {
-    const poly = bboxPolygon(bounds.toArray().flat());
-    const pt = point(this.provider.coordinates);
-    return booleanPointInPolygon(pt, poly);
-  };
+    isInView = (map) => {
+        const mapBoundsArray = map.getBounds().toArray().flat();
+        const poly = bboxPolygon(mapBoundsArray);
+        const pt = point(this.provider.coordinates);
+        return booleanPointInPolygon(pt, poly);
+    };
 
   bounceIcon = () => {
     this.markerIcon.classList.add("bounceOn");
@@ -30,21 +28,21 @@ class AnimatedMarker {
     this.markerIcon.addEventListener("animationend", this.remove);
   };
 
-  addTo(map, bounds) {
-    this.marker.addTo(map);
-    if (this.isInView(bounds)) {
-      this.bounceIcon();
-    } else {
-      map.once("moveend", this.bounceIcon);
+    addTo(map) {
+        this.marker.addTo(map);
+        if (this.isInView(map)) {
+            this.bounceIcon()
+        } else {
+            map.once('moveend', this.bounceIcon)
+        }
     }
-  }
 
   remove = () => {
     this.markerIcon.removeEventListener("animationend", this.remove);
     this.marker.remove();
   };
 
-  createMarkerElement = (providerId, typeId) => {
+    createMarkerElement = (providerId, typeId) => {
     const element = document.createElement("div");
     element.id = `marker-${providerId}`;
     element.className = "marker";

src/components/Map/map.container.js

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import {
   initializeVisaFilter,
   displayProviderInformation,
-  setMapObject,
+  selectProvider
 } from "redux/actions";
 import { getMapProviders } from "redux/selectors";
 import Map from "./map";
@@ -19,7 +19,9 @@ const mapStateToProps = state => {
     highlightedProviders: state.highlightedProviders,
     filters: state.filters,
     search: state.search,
-    hoveredProvider: state.hoveredProvider
+    hoveredProvider: state.hoveredProvider,
+    selectProviderId: state.providers.selectProviderId,
+    selectProviderKey: state.providers.selectProviderKey
   };
 };
 
@@ -31,9 +33,9 @@ const mapDispatchToProps = dispatch => {
     displayProviderInformation: id => {
       dispatch(displayProviderInformation(id));
     },
-    setMapObject: mapObject => {
-      dispatch(setMapObject(mapObject));
-    },
+    selectProvider: id => {
+      dispatch(selectProvider(id))
+    }
   };
 };
 

src/components/Map/map.js

@@ -2,7 +2,13 @@ import React, { Component } from "react";
 import ReactDOM from "react-dom";
 import mapboxgl from "./mapbox-gl-wrapper";
 import "./map.css";
-import { circle, point, transformTranslate } from "@turf/turf";
+import {
+  circle,
+  point,
+  transformTranslate,
+  booleanPointInPolygon,
+  bboxPolygon
+} from "@turf/turf";
 import typeImages from "assets/images";
 import distances from "assets/distances";
 import {
@@ -325,6 +331,39 @@ class Map extends Component {
     });
   };
 
+  addDistanceIndicatorLayer = () => {
+    if (!this.map.getSource("distance-indicator-source")) {
+      this.map.addSource("distance-indicator-source", {
+        type: "geojson",
+        data: {
+          type: "FeatureCollection",
+          features: []
+        }
+      });
+    }
+    if (!this.map.getLayer("distance-indicator-fill")) {
+      this.map.addLayer({
+        id: "distance-indicator-fill",
+        type: "fill",
+        source: "distance-indicator-source",
+        paint: {
+          "fill-color": ["get", "color"]
+        }
+      });
+    }
+    if (!this.map.getLayer("distance-indicator-stroke")) {
+      this.map.addLayer({
+        id: "distance-indicator-stroke",
+        type: "line",
+        source: "distance-indicator-source",
+        paint: {
+          "line-color": "#D561B5",
+          "line-width": 2
+        }
+      });
+    }
+  };
+
   geoJSONFeatures = () => {
     let { highlightedProviders, visibleProviders = [], hoveredProvider } = this.props;
     visibleProviders.forEach(
@@ -343,6 +382,7 @@ class Map extends Component {
 
   updatePinAndDistanceIndicator = prevProps => {
     const distance = this.props.filters.distance;
+    const searchKey = this.props.search.searchKey;
     const searchCoordinates = this.props.search.coordinates;
     if (
       distance === prevProps.filters.distance &&
@@ -353,7 +393,6 @@ class Map extends Component {
       // the user starts interacting with the app.
       return;
     }
-    this.updateZoom(this.props.filters.distance);
     removeDistanceMarkers(this.markerList);
     this.addDistanceIndicatorLayer();
     // If no distance filter is set, display all distance indicators.
@@ -405,47 +444,6 @@ class Map extends Component {
       .setData({ type: "FeatureCollection", features: circles });
   };
 
-  updateZoom = distance => {
-    const zoom = distance ? distance : 1.5;
-    this.map.easeTo({
-      center: this.props.search.coordinates,
-      zoom: this.getZoomForDistance(zoom)
-    });
-  };
-
-  addDistanceIndicatorLayer = () => {
-    if (!this.map.getSource("distance-indicator-source")) {
-      this.map.addSource("distance-indicator-source", {
-        type: "geojson",
-        data: {
-          type: "FeatureCollection",
-          features: []
-        }
-      });
-    }
-    if (!this.map.getLayer("distance-indicator-fill")) {
-      this.map.addLayer({
-        id: "distance-indicator-fill",
-        type: "fill",
-        source: "distance-indicator-source",
-        paint: {
-          "fill-color": ["get", "color"]
-        }
-      });
-    }
-    if (!this.map.getLayer("distance-indicator-stroke")) {
-      this.map.addLayer({
-        id: "distance-indicator-stroke",
-        type: "line",
-        source: "distance-indicator-source",
-        paint: {
-          "line-color": "#D561B5",
-          "line-width": 2
-        }
-      });
-    }
-  };
-
   zoomToFit = providerIds => {
     providerIds =
       providerIds ||
@@ -485,42 +483,20 @@ class Map extends Component {
     ]);
   }
 
-  /**
-   * Zooms to fit when there are new providers not currently in view.
-   *
-   * TODO: This treats all selections the same. We may want to do different things depending
-   * on how the provider was selected. For example, when selecting a provider from the list,
-   * maybe we should zoom to that specific provider if not in view, but when deselecting
-   * a distance filter, maybe we want to zoom to fit all selected providers. Handling these
-   * cases is best done using more granular props passed to the map rather than having the map
-   * track changes to highlighted props.
-   */
-  zoomToShowNewProviders = (prevProps, mapBounds) => {
-    const prevIds = filterProviderIds(
-      providersById(prevProps.visibleProviders),
-      prevProps.highlightedProviders
-      ),
-      currIds = filterProviderIds(
-        providersById(this.props.visibleProviders),
-        this.props.highlightedProviders
-      ),
-      newIds = currIds.filter(id => !prevIds.includes(id));
-    if (newIds.length === 0) {
-      // The set of selected providers stayed the same or got smaller, no need to zoom.
-      return;
-    }
-    const newFeatureBounds = getProviderBoundingBox(
-      providersById(this.props.visibleProviders),
-      newIds
-    );
-    if (
-      newFeatureBounds.getNorth() > mapBounds.getNorth() ||
-      newFeatureBounds.getEast() > mapBounds.getEast() ||
-      newFeatureBounds.getSouth() < mapBounds.getSouth() ||
-      newFeatureBounds.getWest() < mapBounds.getWest()
-    ) {
-      this.zoomToFit(currIds);
-    }
+  areProvidersInView = newSelection => {
+    const mapBounds = this.getPaddedMapBounds()
+      .toArray()
+      .flat();
+    const mapBoundPoly = bboxPolygon(mapBounds);
+    newSelection.find(providerId => {
+      const providerObj = providersById(this.props.visibleProviders)[
+        providerId
+      ];
+      return !booleanPointInPolygon(
+        point(providerObj.coordinates),
+        mapBoundPoly
+      );
+    });
   };
 
   getZoomForDistance = distance => {
@@ -534,49 +510,67 @@ class Map extends Component {
     );
   };
 
+  updateMapPosition = prevProps => {
+    let {
+      zoomToFitKey,
+      searchKey,
+      flyToProviderKey,
+      flyToProviderId
+    } = this.props.search;
+    let { distance } = this.props.filters;
+
+    const idLookUp = providersById(this.props.visibleProviders);
+    const newSelection = this.props.highlightedProviders.filter(
+      providerId => !prevProps.highlightedProviders.includes(providerId)
+    );
+
+    if (zoomToFitKey && zoomToFitKey !== prevProps.search.zoomToFitKey) {
+    	/*the zoom to fit button has been pressed*/
+      this.zoomToFit();
+    } else if (distance || searchKey) {
+      /* a new dropdown selection has been made */
+			this.smoothFlyTo(
+				this.getZoomForDistance(distance || 1.5),
+				this.props.search.coordinates)
+				this.updatePinAndDistanceIndicator(prevProps);
+    } else if (
+      /*a new selection has been made that is not within the visible area of the map*/
+      newSelection.length > 0 &&
+      this.props.highlightedProviders > 1 &&
+      !this.areProvidersInView(newSelection)
+    ) {
+      this.zoomToFit();
+    } else if (
+      /*an address has been selected for a provider that is not in view*/
+      flyToProviderKey !== prevProps.flyToProviderKey &&
+      !this.areProvidersInView(newSelection)
+    ) {
+      this.smoothFlyTo(
+        MIN_UNCLUSTERED_ZOOM,
+        idLookUp[flyToProviderId].coordinates
+      );
+    }
+  };
+
+  smoothFlyTo = (zoom, coordinates) => {
+    return this.map.flyTo({
+      center: coordinates,
+      zoom: zoom,
+      speed: 0.5
+    });
+  };
+
   componentDidUpdate(prevProps) {
     if (this.state.loaded) {
       const features = this.geoJSONFeatures();
       this.setSourceFeatures(features);
       this.props.loadedProviderTypeIds.map(typeId =>
         this.findLayerInMap(typeId)
       );
-      this.setHoveredIconsLayer();
-      this.setHighlightedIconsLayer();
-      this.updatePinAndDistanceIndicator(prevProps);
-      const mapBounds = this.getPaddedMapBounds();
-      this.markRecentSelection(prevProps, mapBounds);
-      this.zoomToShowNewProviders(prevProps, mapBounds);
-      if (
-        this.props.filters.distance &&
-        this.props.filters.distance !== prevProps.filters.distance
-      ) {
-        this.map.flyTo({
-          center: this.props.search.coordinates,
-          zoom: this.getZoomForDistance(this.props.filters.distance)
-        });
-      }
-      if (
-        this.props.search.flyToProviderKey !== prevProps.search.flyToProviderKey
-      ) {
-        const { flyToProviderId } = this.props.search;
-        const { coordinates } = providersById(this.props.visibleProviders)[
-          flyToProviderId
-          ];
-        this.map.flyTo({
-          center: coordinates,
-          zoom: MIN_UNCLUSTERED_ZOOM
-        });
-      }
-      if (this.props.search.zoomToFitKey !== prevProps.search.zoomToFitKey) {
-        this.zoomToFit();
-      }
-      if (this.props.search.searchKey !== prevProps.search.searchKey) {
-        this.map.flyTo({
-          center: this.props.search.coordinates,
-          zoom: this.getZoomForDistance(this.props.filters.distance || 1.5)
-        });
-      }
+      this.setHighlightedIconsLayer("highlighted", "highlighted");
+
+      this.markRecentSelection(prevProps);
+      this.updateMapPosition(prevProps);
     }
   }