Update the overlay API to conform to

https://gist.github.com/vicapow/00017553e92f613d5361

CHANGELOG.md

@@ -2,6 +2,55 @@
 
 ### Breaking changes
 
+#### No longer provide viewport props transparently to overlay children.
+
+Require viewport props to be explicitly provided to overlays. Previously,
+viewport overlay props all had to be optional because the elements were created
+once and then cloned inside of `<MapGL>`. This also made it difficult to follow
+what props were being passed automatically to overlays. In addition, it meant
+that overlays could only be direct children of the `<MapGL>` element.
+
+This shouldn't require changes to overlays, other than marking viewport props
+as required. It will only involve passing the needed props explicitly to
+overlays.
+
+Old way:
+
+```js
+<MapGL ...viewport>
+  <Overlay1 />
+  <Overlay2 />
+</MapGL>
+```
+
+New way:
+
+```js
+<MapGL ...viewport>
+  <Overlay1 ...viewport/>
+  <Overlay2 ...viewport/>
+</MapGL>
+```
+
+For any third party overlay's that depend on `project` or `unproject` props,
+either update them to calculate the `project`/`unproject` functions from the
+viewport using the [ViewportMercatorProject](github.com/uber-common/viewport-mercator-project) module or provide them explicitly in the same render function as the
+`<MapGL/>` component. example:
+
+```js
+var ViewportMercator = require('viewport-mercator-project');
+// ...
+  render() {
+    var mercator = ViewportMercator(this.state.viewport);
+    return <MapGL ...viewport>
+      <Overlay1 project={mercator.project} unproject={this.mercator.unproject ...viewport/>
+      {/* or equivalently */}
+      <Overlay2 ...viewport ...mercator/>
+    </MapGL>;
+  }
+</MapGL>
+```
+
 #### Renaming references of LatLng to LngLat
 
 This is more inline with
@@ -23,4 +72,18 @@ the form `[longitude, latitude]` instead of a MapboxGL
 [LngLat](https://www.mapbox.com/mapbox-gl-js/api/#LngLat) object.
 
 DraggablePointsOverlay's `locationAccessor` prop was renamed `lngLatAccessor`
-to be more consistent with other overlays.
+to be more consistent with other overlays.
+
+#### `bbox` property of the `onChangeViewport` event was removed
+
+This should be calculated instead using the [ViewportMercatorProject](github.com/uber-common/viewport-mercator-project) module instead.
+
+```js
+var mercator = ViewportMercator(viewport);
+var bbox = [mercator.unproject([0, 0]), mercator.unproject([width, height])];
+```
+
+### Non-breaking changes
+
+`unproject` was added to the arguments passed to the `redraw` callback in the
+`CanvasOverlay`.

README.md

@@ -21,8 +21,8 @@ npm install react-map-gl --save
 
 ````js
 <MapGL width={400} height={400} latitude={37.7577} longitude={-122.4376}
-  zoom={8} onChangeViewport={function(opts) {
-    // opts = {latitude, longitude, zoom, bbox}
+  zoom={8} onChangeViewport={(viewport) => {
+    var {latitude, longitude, zoom} = viewport;
   }}
 />
 ````
@@ -67,8 +67,8 @@ var HeatmapOverlay = require('react-map-gl-heatmap-overlay');
 var cities = require('example-cities');
 // ...
     render: function render() {
-      return <MapGL ...viewportProps>
-        <HeatmapOverlay locations={cities} />
+      return <MapGL ...viewport>
+        return <HeatmapOverlay locations={cities} ...viewport/>
       </MapGL>;
     }
 ````

example/examples/choropleth.react.js

@@ -47,40 +47,36 @@ var ChoroplethOverlayExample = React.createClass({
 
   getInitialState: function getInitialState() {
     return {
-      latitude: location.latitude,
-      longitude: location.longitude,
-      zoom: 11,
-      startDragLngLat: null,
-      isDragging: false
+      viewport: {
+        latitude: location.latitude,
+        longitude: location.longitude,
+        zoom: 11,
+        startDragLngLat: null,
+        isDragging: false
+      }
     };
   },
 
-  _onChangeViewport: function _onChangeViewport(opt) {
+  _onChangeViewport: function _onChangeViewport(viewport) {
     if (this.props.onChangeViewport) {
-      return this.props.onChangeViewport(opt);
+      return this.props.onChangeViewport(viewport);
     }
-    this.setState({
-      latitude: opt.latitude,
-      longitude: opt.longitude,
-      zoom: opt.zoom,
-      startDragLngLat: opt.startDragLngLat,
-      isDragging: opt.isDragging
-    });
+    this.setState({viewport: viewport});
   },
 
   render: function render() {
-    return r(MapGL, assign({}, this.state, this.props, {
-      onChangeViewport: this._onChangeViewport,
-      overlays: function overlays(viewport) {
-        return r(ChoroplethOverlay, assign({}, viewport, {
-          globalOpacity: 0.8,
-          colorDomain: [0, 500, 1000],
-          colorRange: ['#31a354', '#addd8e', '#f7fcb9'],
-          renderWhileDragging: false,
-          features: ZIPCODES_SF.get('features')
-        }));
-      }
-    }, this.props));
+    var mapProps = assign({}, this.state.viewport, this.props, {
+      onChangeViewport: this._onChangeViewport
+    });
+    return r(MapGL, mapProps, [
+      r(ChoroplethOverlay, assign({}, mapProps, {
+        globalOpacity: 0.8,
+        colorDomain: [0, 500, 1000],
+        colorRange: ['#31a354', '#addd8e', '#f7fcb9'],
+        renderWhileDragging: false,
+        features: ZIPCODES_SF.get('features')
+      }))
+    ]);
   }
 });
 

example/examples/custom.react.js

@@ -58,25 +58,21 @@ var OverlayExample = React.createClass({
 
   getInitialState: function getInitialState() {
     return {
-      latitude: location.latitude,
-      longitude: location.longitude,
-      zoom: 12.4,
-      startDragLngLat: null,
-      isDragging: false
+      viewport: {
+        latitude: location.latitude,
+        longitude: location.longitude,
+        zoom: 12.4,
+        startDragLngLat: null,
+        isDragging: false
+      }
     };
   },
 
-  _onChangeViewport: function _onChangeViewport(opt) {
+  _onChangeViewport: function _onChangeViewport(viewport) {
     if (this.props.onChangeViewport) {
-      return this.props.onChangeViewport(opt);
+      return this.props.onChangeViewport(viewport);
     }
-    this.setState({
-      latitude: opt.latitude,
-      longitude: opt.longitude,
-      zoom: opt.zoom,
-      startDragLngLat: opt.startDragLngLat,
-      isDragging: opt.isDragging
-    });
+    this.setState({viewport: viewport});
   },
 
   _renderOverlays: function _renderOverlays(viewport) {
@@ -145,10 +141,10 @@ var OverlayExample = React.createClass({
   },
 
   render: function render() {
-    return r(MapGL, assign({}, this.state, this.props, {
-      onChangeViewport: this._onChangeViewport,
-      overlays: this._renderOverlays
-    }, this.props));
+    var viewport = assign({}, this.state.viewport, this.props);
+    return r(MapGL, assign({}, viewport, {
+      onChangeViewport: this._onChangeViewport
+    }), this._renderOverlays(viewport));
   }
 });
 

example/examples/geodata-creator.react.js

@@ -58,26 +58,22 @@ var GeodataCreator = React.createClass({
 
   getInitialState: function getInitialState() {
     return {
-      longitude: -122.40677,
-      latitude: 37.78949,
-      zoom: 12.76901,
-      startDragLngLat: null,
-      isDragging: false,
+      viewport: {
+        longitude: -122.40677,
+        latitude: 37.78949,
+        zoom: 12.76901,
+        startDragLngLat: null,
+        isDragging: false
+      },
       points: Immutable.fromJS(initialPoints)
     };
   },
 
-  _onChangeViewport: function _onChangeViewport(opt) {
+  _onChangeViewport: function _onChangeViewport(viewport) {
     if (this.props.onChangeViewport) {
-      return this.props.onChangeViewport(opt);
+      return this.props.onChangeViewport(viewport);
     }
-    this.setState({
-      latitude: opt.latitude,
-      longitude: opt.longitude,
-      zoom: opt.zoom,
-      startDragLngLat: opt.startDragLngLat,
-      isDragging: opt.isDragging
-    });
+    this.setState({viewport: viewport});
   },
 
   _onAddPoint: function _onAddPoint(location) {
@@ -100,18 +96,20 @@ var GeodataCreator = React.createClass({
 
   _renderOverlays: function _renderOverlays(viewport) {
     return [
-      r(SVGOverlay, assign({}, viewport, {redraw: function _redraw(opt) {
-        if (!this.state.points.size) {
-          return null;
-        }
-        var d = 'M' + this.state.points.map(function _map(point) {
-          return opt.project(point.get('location').toArray());
-        }).join('L');
-        return r.path({
-          style: {stroke: '#1FBAD6', strokeWidth: 2, fill: 'none'},
-          d: d
-        });
-      }.bind(this)})),
+      r(SVGOverlay, assign({}, viewport, {
+        redraw: function _redraw(opt) {
+          if (!this.state.points.size) {
+            return null;
+          }
+          var d = 'M' + this.state.points.map(function _map(point) {
+            return opt.project(point.get('location').toArray());
+          }).join('L');
+          return r.path({
+            style: {stroke: '#1FBAD6', strokeWidth: 2, fill: 'none'},
+            d: d
+          });
+        }.bind(this)
+      })),
       r(DraggableOverlay, assign({}, viewport, {
         points: this.state.points,
         onAddPoint: this._onAddPoint,
@@ -136,12 +134,11 @@ var GeodataCreator = React.createClass({
   },
 
   render: function render() {
+    var viewport = assign({}, this.state.viewport, this.props);
     return r.div([
-      r(MapGL, assign({}, this.state, this.props, {
-        style: {float: 'left'},
-        onChangeViewport: this._onChangeViewport,
-        overlays: this._renderOverlays
-      }, this.props))
+      r(MapGL, assign({}, viewport, {
+        onChangeViewport: this._onChangeViewport
+      }), [this._renderOverlays(viewport)])
     ]);
   }
 });

example/examples/not-interactive.react.js

@@ -43,20 +43,16 @@ var NotInteractiveExample = React.createClass({
 
   getInitialState: function getInitialState() {
     return {
-      latitude: location.latitude,
-      longitude: location.longitude,
-      zoom: 11
+      viewport: {
+        latitude: location.latitude,
+        longitude: location.longitude,
+        zoom: 11
+      }
     };
   },
 
   render: function render() {
-    return r(MapGL, assign({
-      latitude: this.state.latitude,
-      longitude: this.state.longitude,
-      zoom: this.state.zoom,
-      width: this.props.width,
-      height: this.props.height
-    }, this.props));
+    return r(MapGL, assign({}, this.state.viewport, this.props));
   }
 });
 

example/examples/route.react.js

@@ -45,25 +45,21 @@ var RouteOverlayExample = React.createClass({
 
   getInitialState: function getInitialState() {
     return {
-      latitude: 37.7736092599127,
-      longitude: -122.42312591099463,
-      zoom: 12.011557070552028,
-      startDragLngLat: null,
-      isDragging: false
+      viewport: {
+        latitude: 37.7736092599127,
+        longitude: -122.42312591099463,
+        zoom: 12.011557070552028,
+        startDragLngLat: null,
+        isDragging: false
+      }
     };
   },
 
-  _onChangeViewport: function _onChangeViewport(opt) {
+  _onChangeViewport: function _onChangeViewport(viewport) {
     if (this.props.onChangeViewport) {
-      return this.props.onChangeViewport(opt);
+      return this.props.onChangeViewport(viewport);
     }
-    this.setState({
-      latitude: opt.latitude,
-      longitude: opt.longitude,
-      zoom: opt.zoom,
-      startDragLngLat: opt.startDragLngLat,
-      isDragging: opt.isDragging
-    });
+    this.setState({viewport: viewport});
   },
 
   _renderRoute: function _renderRoute(points, index) {
@@ -113,16 +109,13 @@ var RouteOverlayExample = React.createClass({
   },
 
   render: function render() {
-    return r(MapGL, assign({}, this.state, this.props, {
-      onChangeViewport: this._onChangeViewport,
-      overlays: function overlays(viewport) {
-        return [
-          r(SVGOverlay, assign({redraw: this._redrawSVGOverlay}, viewport)),
-          r(CanvasOverlay, assign({redraw: this._redrawCanvasOverlay},
-            viewport))
-        ];
-      }.bind(this)
-    }, this.props));
+    var viewport = assign({}, this.state.viewport, this.props);
+    return r(MapGL, assign({}, viewport, {
+      onChangeViewport: this._onChangeViewport
+    }), [
+      r(SVGOverlay, assign({redraw: this._redrawSVGOverlay}, viewport)),
+      r(CanvasOverlay, assign({redraw: this._redrawCanvasOverlay}, viewport))
+    ]);
   }
 });