Rendering thousands of points with Marker - do not do this

Interactive map with controls and thousands of markers implemented with Marker component. This example serves as a common pitfall when working wit a large quantity of points. In this example we are rendering only 2 000 points and already you can see the poor performance.

Implementation with single Marker component using loop causes extremely slow map render. For best performance use MultipleMarkers, or take a look at previous example Rendering thousands of points

Loading map...

Code

<MapProvider center={{lng:  14.4608576, lat: 50.0963478}} >
    <Map>
        <ZoomControl />
        <KeyboardControl />
        <MouseControl zoom pan wheel />
        {generatePoints(2000).map((point, index) => <MarkerLayer key={index} ><Marker coords={point} /> </MarkerLayer>)}
    </Map>
</MapProvider>

Pitfalls

Implementation with single Marker component using loop causes extremely slow map render. For best performance use MultipleMarkers.