Render a large number of Features in a Layer simultaneously

I’ve been using this library for a few weeks and I like it a lot. I have a question regarding Marker vs Feature.

So, I can render ~800 Features on my map without any problem. However, as @benrudolph mentioned in #457 , rendering ~800 Markers on the map slows my browser to a crawl.

One problem with using a combination of Layer and Feature is that not all the features are rendered to the map simultaneously – to see all 800 markers I have to zoom in very close and pan the map around. As you can see in the image below, if I’m zoomed out, only a small, seemingly random subset of the features I want to display are rendered.

I’d like to be able to render all 800 features on the map at once. If this isn’t possible, this is a little surprising to me. Rendering this many markers to a map is a very common use case. I was able to do it years ago using Google Maps, as is demonstrated in the image below, without slowing the frame rate of the browser significantly.

Thank you for your help!

[compwright]

Check out this demo: https://github.com/istarkov/google-map-thousands-markers

[tmcintire]

I have a similar performance problem. We are looking to switch over from Leaflet to MapBoxGL. In leaflet, when I instantiate a new Marker class I’m able to give it an HTML element to render as the marker, and using the leafletmarkerclusterer library am able to cluster those html elements. From there we use plain old javascript to update the markers as we need to, and its lightning fast.

In previous iterations, we used angular to render our markers, which was extremely while panning, zooming, and even slower when loading (you’re talking 9-10 seconds for a layer with 400 markers to appear, and during this time the user is blocked)

So, I think the performance issue here is that we are trying to render a react component for a marker, when a standard HTML element with plain old javascript would do the trick and be much, much faster. Is there/will there ever be a way to pass an html element into the cluster component instead of having to render a Marker component each time? I think that’s why the performance hit is so large. Thanks