fix: Fix comments, event binding/map in SelectVehicles, zoom-based re…

…ndering.

packages/base-map/__mocks__/SelectVehicles.js

@@ -22,44 +22,46 @@ class SelectVehicles extends MapLayer {
     vehicles: vehicleData
   };
 
-  constructor(props) {
-    super(props);
-
-    this.onOverlayAdded = this.onOverlayAdded.bind(this);
-    this.onOverlayRemoved = this.onOverlayRemoved.bind(this);
-    this.onViewportChanged = this.onViewportChanged.bind(this);
-  }
-
   // these zoom layers control which markers are shown (e.g. closeZoom is where icons are turned on)
   closeZoom = 15;
 
   midZoom = 13;
 
   farZoom = 10;
 
-  onOverlayAdded(e) {
+  /**
+   * The preferred way to write the `onOverlay...` events is shown below.
+   * If you wish to write `onOverlayAdded(e) {...}` instead,
+   * then you must bind that function in the `constructor` using:
+   *     this.onOverlayAdded = this.onOverlayAdded.bind(this);
+   */
+  onOverlayAdded = e => {
     callIfValid(this.props.onOverlayAdded)(e);
-  }
+  };
 
-  onOverlayRemoved(e) {
+  onOverlayRemoved = e => {
     callIfValid(this.props.onOverlayRemoved)(e);
-  }
+  };
 
-  onViewportChanged(viewport) {
-    callIfValid(this.props.onOverlayRemoved)(viewport);
-  }
+  onViewportChanged = viewport => {
+    this.setState({ mapZoom: viewport.zoom });
+    callIfValid(this.props.onViewportChanged)(viewport);
+  };
 
   componentDidMount() {
     console.log("SelectedVehicles::componentDidMount");
-    // action("SelectVehicles::componentDidMount")();
     const { registerOverlay } = this.props;
     callIfValid(registerOverlay)(this);
+
+    // Initialize zoom state here? (may trigger render again.)
+    const zoom = this.getLeafletContext().map.getZoom();
+    this.setState({ mapZoom: zoom });
   }
 
   componentWillUnmount() {}
 
   componentDidUpdate() {
-    this.trackVehicle();
+    // this.trackVehicle();
   }
 
   componentWillReceiveProps(/* nextProps */) {}
@@ -82,7 +84,7 @@ class SelectVehicles extends MapLayer {
       if (v != null) {
         const ll = [v.lat, v.lon];
         this.getLeafletContext().map.setView(ll);
-        this.state.trackedVehicle = v; // update the state with newest vehicle
+        this.setState({ trackedVehicle: v }); // update the state with newest vehicle
       }
     }
   }
@@ -104,11 +106,14 @@ class SelectVehicles extends MapLayer {
 
   render() {
     const { limit = 5 } = this.props;
+    const { mapZoom } = this.state;
     let { vehicles } = this.state;
     vehicles = vehicles.slice(0, Math.min(limit, vehicles.length) - 1);
     return (
       <FeatureGroup id="vehicles fg">
-        {vehicles &&
+        {mapZoom <= this.closeZoom &&
+          mapZoom >= this.farZoom &&
+          vehicles &&
           vehicles.map(v => (
             <VehicleMarker
               key={v.id}

packages/base-map/src/index.js

@@ -51,13 +51,6 @@ L.Evented.include({
 class BaseMap extends Component {
   overlays = [];
 
-  constructor() {
-    super();
-    this.handleOverlayAdded = this.handleOverlayAdded.bind(this);
-    this.handleOverlayRemoved = this.handleOverlayRemoved.bind(this);
-    this.handleViewportChanged = this.handleViewportChanged.bind(this);
-  }
-
   componentDidMount() {
     const lmap = this.refs.map.leafletElement;
     lmap.options.singleClickTimeout = 250;
@@ -82,20 +75,22 @@ class BaseMap extends Component {
   };
 
   forwardOne = (eventName, e) => {
+    // Call the event handler, if implemented, on the layer for which this event applies.
     const layer = this.overlays.find(child => child.props.name === e.name);
     if (layer) callIfValid(layer[eventName])(e);
 
-    // Raise onOverlayAdded for this control.
+    // Call the event handler on this control's parent element.
     // eslint-disable-next-line react/destructuring-assignment
     callIfValid(this.props[eventName])(e);
   };
 
   forwardAll = (eventName, e) => {
+    // Call the event handler, if implemented, on each registered overlay.
     this.overlays.forEach(layer => {
       callIfValid(layer[eventName])(e);
     });
 
-    // Raise onOverlayAdded for this control.
+    // Call the event handler on this control's parent element.
     // eslint-disable-next-line react/destructuring-assignment
     callIfValid(this.props[eventName])(e);
   };
@@ -153,7 +148,7 @@ class BaseMap extends Component {
         // Note: Map-click is handled via single-click plugin, set up in componentDidMount()
         onOverlayAdd={this.handleOverlayAdded}
         onOverlayRemove={this.handleOverlayRemoved}
-        onViewportChanged={this.handleViewportChanged} // {onViewportChanged}
+        onViewportChanged={this.handleViewportChanged}
       >
         {/* Create the layers control, including base map layers and any
          * user-controlled overlays. */}