Difference between many Marker components and Source/Layer components

[wfendler]

If I'm using a map to plot markers with popups, custom icons, toggling marker visibility (turning categories of locations on/off) is there any reason to do this with Source and Layer components using geojson data? Or will rendering a bunch of Marker components work just as well?

I saw the note about performance on the Marker docs

Performance notes: if a large number of markers are needed, it's generally favorable to cache the <Marker> nodes, so that we don't rerender them when the viewport changes.

If those are being cached (via useMemo/useCallback I assume) to prevent re-rendering (in some cases ~100ish markers) there shouldn't be any concern with that approach vs supplying geojson to a Source component, is that correct?

[Pessimistress]

~100 Marker components should work fine if you use useMemo. The main advantage of the React component is that you can define its content with arbitrary DOM and CSS, while a symbol layer's styling options are relatively limited. If you have hundreds of markers or more, it's definitely more performant to use source/layer, because the React component needs to update its position on every viewport change, while the layer is (I believe) cached by tile and is not as expensive to rerender.

[wfendler]

I'll definitely want to do some more custom stuff with the DOM/CSS on those markers. It's really helpful knowing the Source/Layer approach might be connected to the tiles in that way. I'll have to look into that some more.

Thanks! Super helpful.