react-map-gl version 0.6 proposed API changes

New overlay API

Old way

<MapGL {...viewport}>
  // props like `project` and `unproject` and viewport props like `zoom` used
  // to be passed transparently.
  <Overlay locations={locations} />
</MapGL>

New way

Props need to be passed explicitly. This has the benifit of allowing all overlay props to be required props. In the old way, the children of the map were cloned with props added which meant viewport props on overlays could not be required props since the first time they’re created, they’re missing the viewport props.

<MapGL {...viewport}>
  // overlay props now have to be passed explicitly.
  <Overlay {...viewport} locations={locations}/>
</MapGL>

What about project / unproject?

To minimize dependent state, project and unproject should be derived independently in each overlay using the ViewportMercatorProject module given the latitude, longitude, zoom, width, and height viewport props.

  // ...
  _onChangeViewport(viewport) {
    this.setState({viewport});
  }
  // ...
  render() {
    // If the user wants to use `project` and `unproject` methods they can do so using the following:
    var {project, unproject} = ViewportMercator(viewport);
    // (this will require updating the `ViewportMercatorProject` module API.)
    return <MapGL {...viewport} onChangeViewport={this._onChangeViewport}>
      <Overlay {...viewport} locations={locations} />
    </MapGL>;
  }
  // ...