Render custom HTML markers without using Marker component?

[RobJacobson]

Related to issue #750, my map has about 60 markers. I'm having performance issues, especially on mobile browsers.

I'm currently rendering my custom markers as HTML inside of Marker components. Is it possible instead to do any of the following?

1. Render the markers using an HTMLOverlay? I searched for an example that illustrates how to use the HTMLOverlay, but couldn't find anything. Are there any examples/tutorials/starting points on how to use HTMLOverlay? (The documentation is pretty scant.)

2. Render custom HTML markers using GeoJSON? The thread in > 200 markers cause map slow when dragging #750 discusses how to render GeoJSON using custom SVGs for icons, but I need to render directly to HTML.

3. Attach HTML markers to the underlying map and let the map render them? In this example for mapbox-gl (unlike react-map-gl), the code renders custom HTML markers and then binds the marker to the map using ".addTo(map)." The relevant code is:

stores.features.forEach(function(marker) {
  // Create a div element for the marker
  var el = document.createElement('div');
  // Add a class called 'marker' to each div
  el.className = 'marker';
  // By default the image for your custom marker will be anchored
  // by its center. Adjust the position accordingly
  // Create the custom markers, set their position, and add to map
  new mapboxgl.Marker(el, { offset: [0, -23] })
    .setLngLat(marker.geometry.coordinates)
    .addTo(map);
});

https://docs.mapbox.com/help/tutorials/building-a-store-locator/

Thanks very much in advance for any tips.

[RobJacobson]

I'll close this issue since there's some overlap with the discussion in #750.