React-mapbox-gl: React-mapbox-gl version 2.0.0

[alex3165]

React-mapbox-gl is now more than 1 year old, I think it is time to think about a new major version 2.0.0 and I am happy to have any opinion on what such a release could include, I spotted the following issues / improvements:

• [x] Make Map component a factory, ReactMapboxGlFactory: https://github.com/alex3165/react-mapbox-gl/issues/165
• [x] Improve examples, design a proper website with examples / code (react-live?), should also address: https://github.com/alex3165/react-mapbox-gl/issues/131
• [x] Address issue when a cluster is removed: https://github.com/alex3165/react-mapbox-gl/issues/188
• [x] Add all map events from mapbox (https://www.mapbox.com/mapbox-gl-js/api/#map.event): https://github.com/alex3165/react-mapbox-gl/issues/163
• [x] Fix css issue when using text-align: center: https://github.com/alex3165/react-mapbox-gl/issues/182
• [x] Remove setTimeout on map unmounting: https://github.com/alex3165/react-mapbox-gl/issues/178
• [x] Add back layers on map style update: https://github.com/alex3165/react-mapbox-gl/issues/225
• [x] Add more tests (rotation-control, scale-control, zoom-control, projected-layer, cluster...): https://github.com/alex3165/react-mapbox-gl/issues/121
• [x] Add prettier to prettify source files.
• [x] Improve event listening of the Layer component (should improve significantly performances)
• [x] Add Feature draggable functionality: https://github.com/alex3165/react-mapbox-gl/issues/251
• [x] Update all dependencies
• [x] Fix GeoJsonLayer when updating map style: https://github.com/alex3165/react-mapbox-gl/issues/261
• [x] Write a changelog
• [x] Fix 3D buildings example
  
  
  Feel free to add a comment on this thread if you want to see something out under this major release.

[stereobooster]

How about viewport data structure as a way to set exact state of map and track map state?

const viewPort = {
  lat: 1.111
  lng: 1.111
  zoom: 12
}

<Map viewPort={props.viewPort} onChange={(viewport) => { ... }} />

Just an idea for your consideration.

[alex3165]

@stereobooster we would have an issue with the zoom, if the zoom of the map is being updated (when user zoom using his mouse) then when you re-render your map component the zoom value will default back to 12. That's why zoom is an array and the map component does a reference equality check for your zoom. If you break the reference it will update the zoom otherwise it won't.

[stereobooster]

Not sure I understood your point. If zoom updated its change will be cathed by onChange function, onchange function will store new state, new state will be passed to <Map>, map will be rendered with new state, which will have appropriate zoom value.

[stereobooster]

Expose css for import in webpack project instead of injecting in header. This way it will be minified e.g.

import from "react-mapbox-gl/css";

[stereobooster]

Pass pointerEvents: none to markers in examples (everywhere where zoom with scroll enabled)

[alex3165]

@stereobooster Could you open an issue for the pointerEvents suggestion? For the css one I am not sure because then it would force everyone to have an extra step for using react-mapbox-gl, they will have to have a webpack css loader and explicitly import the css file, I want to keep things as simple as possible. Do you think of any downside by injecting the css as it is done right now?

[alex3165]

I have released v2 under @next tag on npm, feel free to try out: npm i react-mapbox-gl@next, the API changed a bit, the new documentation is available here: https://github.com/alex3165/react-mapbox-gl/blob/v2.0.0/docs/API.md