react-mapbox-gl

Install

npm install react-mapbox-gl mapbox-gl

First Steps

• create the component and a route
• https://github.com/alex3165/react-mapbox-gl/blob/master/docs/API.md
• set marker, zoom, zoom control, scale and rotation control
• examples: http://alex3165.github.io/react-mapbox-gl/demos
• icons: https://github.com/mapbox/mapbox-gl-styles/tree/master/sprites

Observations

• coordinates of the markers from the other maps have to be switched
• the doku says to use features with layers instead of markers for better performance
• markers are not draggable, but features are

Markers or Features

• Note from Mapbox Documentation: https://github.com/alex3165/react-mapbox-gl/blob/master/docs/API.md
  

Note: When rendering many objects, avoid using Markers as it will negatively affect performance. Use Layers and Features instead.

• test with 100 Markers/Features:
  • when zoom on all 100 => all 100 features/markers are shown
  • when zooming out: not all features are rendered because they would be on top of each other => zooming is smooth, rendering is fast
  • but when zooming out on markers: react tries to render them all => zooming is loading several seconds, rendering takes also more time