How to render over 2800 Custom Markers using DOM?

[HABINOH]

We are creating custom marker images and rendering 2800 markers to be mapped to Custom Map (.json).

If there are fewer Markers, the Custom Map works properly. However, if there are more Markers, the Custom Map may not be rendered properly. For example, a black map screen... Or if you zoom in or zoom out, it suddenly changes from the Custom Map screen to the weird Map screen...

I think it's because creating a lot of Markers with DOM creates a web load.

I've referenced the example code on this site.
https://maplibre.org/maplibre-gl-js/docs/examples/custom-marker-icons/

Is there a solution?

I also considered adding Layer, but I don't think it's suitable for the current project because it requires more complex process and code writing.

Still, if you see the code below and let me know how to add Layer, I will consider it.

In addition, the clustering plan is not suitable for the purpose of the current project.

---

addMarkers(geojson) {
      this.markers.forEach(marker => marker.remove())
      this.markers = []

      const borderColors = {
        platinum: '#6CFFF9',
        gold: '#FFD700',
        silver: '#C0C0C0',
        bronze: '#CD7F32',
        default: 'white'
      }
      const markerImages = {
        platinum: platinumImage,
        gold: goldImage,
        silver: silverImage,
        bronze: bronzeImage,
        default: defaultImage
      }
      const tooltipImages = {
        platinum: platinumImage,
        gold: goldImage,
        silver: silverImage,
        bronze: bronzeImage,
        default: defaultImage
      }

      geojson.features.forEach((feature) => {
        const { iconType, tooltipText1, tooltipText2 } = feature.properties
        const markerImg = markerImages[iconType]
        const tooltipImg = tooltipImages[iconType]
        const borderColor = borderColors[iconType] || '#000'

        const el = document.createElement('div')
        el.className = 'marker'
        el.style.backgroundImage = `url('${markerImg}')`
        el.style.width = '20px'
        el.style.height = iconType !== 'default' ? '20px' : '30px'
        el.style.backgroundSize = '100% 100%'
        el.style.backgroundRepeat = 'no-repeat'
        el.style.backgroundPosition = 'center'
        el.style.border = '1px solid white'

        let tooltipPopup = null
        el.addEventListener('mouseenter', () => {
          const tooltipHTML = iconType === 'default'
            ? `
            <div style="
              border: 3px solid ${borderColor};
              padding: 2px;
              box-sizing: border-box;
              background: white;
              margin: 0;
              white-space: nowrap;
              font-size: 12px;
              line-height: 1.2;
            ">
              ${tooltipText1} - ${tooltipText2}
            </div>
          `
            : `
              <div style="
                display: inline-flex;
                align-items: center;
                border: 3px solid ${borderColor};
                padding: 2px;
                box-sizing: border-box;
                background: white;
                margin: 0;
                white-space: nowrap;
              ">
                <img src='${tooltipImg}' alt='${iconType}' style='width:20px; height:20px; object-fit: contain; display: block;'/>
                <span style='font-size: 12px; line-height: 1.2; margin-left: 4px;'>
                  ${tooltipText1} - ${tooltipText2}
                </span>
              </div>
            `
          tooltipPopup = new maplibregl.Popup({
            closeButton: false,
            closeOnClick: false,
            offset: [0, -10]
          })
            .setLngLat(feature.geometry.coordinates)
            .setHTML(tooltipHTML)
            .addTo(this.map)
        })
        el.addEventListener('mouseleave', () => {
          if (tooltipPopup) {
            tooltipPopup.remove()
            tooltipPopup = null
          }
        })
        el.addEventListener('click', () => {
          this.map.flyTo({
            center: feature.geometry.coordinates,
            zoom: 12,
            essential: true
          })
        })

        const marker = new maplibregl.Marker({ element: el })
          .setLngLat(feature.geometry.coordinates)
          .addTo(this.map)
        this.markers.push(marker)
      })
    },

[HarelM]

2800 * n DOM elements is a bad idea, you should find a way to show a lot less.
You could also move the load to the webgl context using a symbol layer, but you'll have less ways to style this layer.
Regardless, 2800 elements for the user is too much.

[HABINOH]

Is there an example code for adding icon images as symbol layers?

[plymer]

What I did in a situation where I was initially using SVG elements as markers was convert my SVGs into a PNG sprite sheet using spreet. Then I added that sprite sheet as a reference in my map's style (you have to host your spritesheet at an absolute path, no relative paths), and then built the Symbol layer definitions.

I'm using react-map-gl/maplibre wrapper for my project, but the idea is the same. I'm drawing windbarbs on a weather map, and they are saved in a format of wind-'windSpd'. The windSpd property is extracted from the GeoJSON, and then I am applying a transformation (rotation) by the GeoJSON property windDir.

<Layer
  beforeId="layer-sfc-obs-dot"
  id="layer-sfc-obs-windbarb"
  type="symbol"
  layout={{
    "icon-allow-overlap": true,
    "icon-image": [
      "concat",
      "windbarbs:wind-",
        ["number-format", ["get", "windSpd"], { "min-fraction-digits": 0, "max-fraction-digits": 0 }],
      ],
    "icon-size": [
      "interpolate",
        ["linear"],
        ["zoom"],
        // zoom level : radius size
        ZOOM_THRESHOLDS.mini,
        0.5,
        ZOOM_THRESHOLDS.reduced,
        0.75,
        ZOOM_THRESHOLDS.maximum,
        1,
      ],
      "icon-rotate": ["get", "windDir"],
         visibility: zoomLevel > ZOOM_THRESHOLDS.mini ? "visible" : "none",
    }}
    paint={}
/>

You can likely do something similar with your markers inside a sprite sheet.

Adding an extra sprite sheet inside your map style looks something like this (though I create mine inside a TypeScript object and don't store it as a JSON file):

{
  ...
  sprite: [
    { id: "default", url: "https://openmaptiles.github.io/positron-gl-style/sprite" },
    { id: "windbarbs", url: `${publicUrl}/sprites/windbarbs` },
  ],
  ...
}

One other thing - I wouldn't instantiate a popup for each single marker, but instead have one 'global' popup that you can send data to from the currently moused-over feature/marker. The popup should get it's x/y coords from the feature, so it will follow the user's inputs. That'll drastically reduce the DOM overhead.