An efficient webGL map with Mapbox-gl-js and react-mapbox-gl
Mapbox-gl-js is a library developed by Mapbox with the purpose of displaying a map using webGL rendering directly on a canvas instead of rendering it on the DOM.
So why render a map using WebGL when it can be simpler using the DOM? Here are the main advantages :
- Vector Map
- Render faster than traditional raster maps
- The size of the map is reduced by 75%
- Smooth zoom using interpolation
- Data are accessible directly on the front-end (shops, buildings …)
- More design options using map box studio
I think these are enough arguments for you to switch from your classic raster map to a WebGL one. If you are in a react environment and you are using react-leaflet to render your map you might struggle to find an equivalent to render the map in webgl and that’s why I started react-mapbox-gl .
I released a first version of this project 15 days ago after realising that react-map-gl was good for data-visualisation purposes but not adapted when it comes to using Mapbox layers and sources in a efficient way. Later two of my colleagues joined the contributor team to help me and are now actively working on it to make it better. I think it’s worth saying that this project will be used in production in our company Pie Mapping and will be actively maintained.
So if your goal is to do some custom data visualisation, I recommend you to use react-map-gl which allow you to add SVG layers on top of the canvas and map it with the viewport using an internal tool that Uber team developed. However, if your goal is to use layers you defined on mapbox studio , react-mapbox-gl is exactly what you need.
Basically, react-mapbox-gl will expose Mapbox API to a react-friendly way without limitations with some smart comparisons to abstract common behaviours. For example, when it comes to updating the centre and the zoom position of the map and any feature (marker, path or polygon) on the map.
The library add basic hover and endHover events on any feature which usually requires extra logic when using mapbox-gl-js API.
Let’s give it a try by looking at code we can find on london-cycle example folder of the repository:
This sample code is using ES6 syntax with Babel.
Importing the library and rendering a simple map :
With just 7 lines of code you can display a Mapbox WebGL map. Now let’s take a look at the rest of the code in the render method of our component:
Here we added a layer that contains all the cycle stations of London using the “marker-15” defined in mapbox-studio.
We are listening for a click on these markers, on click it will change the centre position of the map and re-render our component. This will not re-render the map in the canvas, it will only update the centre or the zoom value only if it changed from the props.
At the layer level it will update the source geojson using setData method provided by mapbox-gl-js API.
转载本站任何文章请注明：转载至神刀安全网，谢谢神刀安全网 » An efficient webGL map with Mapbox-gl-js and react-mapbox-gl