Only ask for data when needed.

The idea here is that if the current bounds are contained within the
previous bounds, mapbox-gl-js still contains the data and will display
it without another server roundtrip.

The insight that springs from this is that there are two event handlers
that need to be given to the map component:
onBoundsChange: called every time the bounds change. This would be used
to update the url.

onMissingData: called when the current map bounds are outside of
previous bounds. We then have area within the map bounds for which
we need data.

These two callbacks seem to form the basis of a saner API for the map
component.

TODO: Currently we recalculate the summary, after loading data for the
current bounds. If we are now longer hitting the server for each change
of bounds, we now need to ask the map which elements of data are
currently visible and recalculate the summary based on that.

The function that does that is `queryRenderedFeatures`:

`map.queryRenderedFeatures(map.getBounds().toArray(), {layers: [ "markers" , "selected" ]})`

The problem here is that it returns nothing, duplicates or the right
thing seemingly at random.

issue: mapbox/mapbox-gl-js#2647

When that issue is resolved, revisit this.

Author: sleepycat

package.json

@@ -69,6 +69,8 @@
     "react-router": "^2.4.0",
     "supertest": "^1.2.0",
     "transform-loader": "^0.2.3",
+    "turf-inside": "^3.0.12",
+    "turf-point": "^2.0.1",
     "underscore": "^1.8.3",
     "urijs": "^1.18.0",
     "webpack": "^1.13.0",

public/javascripts/components/Map.js

@@ -68,6 +68,8 @@ class Map extends React.Component {
         'center': e.target.getCenter(),
         'zoom': e.target.getZoom()
       }
+
+
       this.props.onBoundsChange(boundsObj)
     }
 
@@ -126,6 +128,8 @@ class Map extends React.Component {
         });
 
 
+        console.log(`hl:`, this.props.highlight)
+
         this.map.addLayer({
           "id": "selected",
           "type": "symbol",
@@ -145,6 +149,11 @@ class Map extends React.Component {
         });
 
 
+        // The goal here is to extract the visible features
+        // so we can create a summary with them.
+        console.log('rendered features:', this.map.queryRenderedFeatures(this.map.getBounds().toArray(), {layers: [ "markers" , "selected" ]}))
+
+
       }
   }
 

public/javascripts/main.js

@@ -1,4 +1,7 @@
 import MediaQuery from 'react-responsive'
+import bboxPolygon from 'turf-bbox-polygon'
+import point from 'turf-point'
+import inside from 'turf-inside'
 import summary from './summary'
 import Map from './components/Map'
 import React, { PropTypes } from 'react'
@@ -71,8 +74,11 @@ class MapView extends React.Component {
     document.dispatchEvent(event)
   }
 
-  handleMapBoundsChange(newBounds) {
+  flashMessageOnMap(message) {
+    this.dispatchEvent('mapbox.setflash', {message, info: true, fadeout: 3})
+  }
 
+  getDataForBounds(bounds) {
     client.query(`
 	query getLocations($neLat: Float, $neLng: Float, $swLat: Float, $swLng: Float) {
 	  locations_within_bounds(ne_lat: $neLat, ne_lng: $neLng, sw_lat: $swLat, sw_lng: $swLng){
@@ -89,13 +95,37 @@ class MapView extends React.Component {
 	    }
 	  }
 	}
-      `, newBounds).then((result) => {
+      `, bounds).then((result) => {
       this.setState({mapData: result.locations_within_bounds})
     }, (e) => {
-      this.dispatchEvent('mapbox.setflash', {message: e.message.split(':')[1], info: true, fadeout: 3})
+      this.flashMessageOnMap(e.message.split(':')[1])
     })
+  }
+
+  handleMapBoundsChange(currentBounds) {
+
+      // Do we need to fetch new data?
+      if(!(typeof this.previousBounds == 'undefined')){
+        let previousPolygon = bboxPolygon([this.previousBounds.neLng, this.previousBounds.neLat, this.previousBounds.swLng, this.previousBounds.swLat])
+        let currentNE = point([currentBounds.neLng, currentBounds.neLat])
+        let currentSW = point([currentBounds.swLng, currentBounds.swLat])
+        // If the current bounds are within the previous polygon
+        // we don't need new data.
+        if(!(inside(currentNE, previousPolygon) && inside(currentSW, previousPolygon))){
+          console.log(`Need data!!`)
+          this.getDataForBounds(currentBounds)
+          this.previousBounds = currentBounds
+        } else {
+          console.log(`Don't Need data!!`)
+        }
+      } else {
+        console.log(`First load?`)
+        this.getDataForBounds(currentBounds)
+        this.previousBounds = currentBounds
+      }
+
 
-    this.updateRoute(newBounds.zoom, newBounds.center.lat, newBounds.center.lng, this.props.location.query.highlight)
+    this.updateRoute(currentBounds.zoom, currentBounds.center.lat, currentBounds.center.lng, this.props.location.query.highlight)
   }
 
   updateRoute(zoom, lat, lng, highlight = '') {