How to add custom icons to maplibre unclustered markers using filter

Question

I am adding maker clusters using maplibre gl and when markers are unclustering, I want to add specific image to individual marker based on id present in properties of geojson of that feature.

https://maplibre.org/maplibre-gl-js-docs/example/cluster/

This is simple clustering example, can anyone help?

Answer 1

You can handle it like this

   this.map.loadImage(
        "example.com" // or base 64,
        (error, image) => {
          if (error) throw error;
          this.map.addImage("shop", image);
        }
      );

and then use it in this way:

   this.map.addLayer({
      id: "unclustered-point",
      type: "symbol",
      source: "cluster-source",
      filter: ["!", ["has", "point_count"]],
      layout: {
        "icon-image": "shop", // the name of that image that you added 
        "icon-size": 0.5, // Size of the icon
        "icon-allow-overlap": true,
      },
    });