React Mapbox GL - How to draw images on the map using Layer and Feature instead of Markers

Question

I am using React Mapbox GL in my project and as i use Marker for about 10000 data points and performance is not that good. I have read the documentation and it says

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

How to use Layers and Feature to display markers?

Answer 1

To render something with layers and features, put one or more Feature components inside of a Layer component . You can give each Feature a position using the coordinates prop.

Now, what's left over is to style these features. How you do this depends on what your markers previously contained, but for example, if you'd like to draw circles for each of the positions, you can set the Layer's type to circle and under the paint prop, provide values for circle-color and circle-radius (these are described in the mapbox-gl API docs .

For drawing images for each coordinate, you can use the icon-image layout property on the Layer (you would have to either use a preexisting icon or upload one to Mapbox Studio ).

You can see some sample code in the demos, for example the all-shapes demo styles data with circles.