Skip to content

Instantly share code, notes, and snippets.

@vicapow
Last active December 2, 2015 08:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vicapow/00017553e92f613d5361 to your computer and use it in GitHub Desktop.
Save vicapow/00017553e92f613d5361 to your computer and use it in GitHub Desktop.
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>;
  }
  // ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment