How to add different icon on individual points ?

[TapanPatra]

Hi all,
I am facing difficulties to add different icons for different points in ReactJs application,

Bellow code I have, On load the map cluster are showing, onClick of the cluster individual points are showing. There I want to display different icon based on the pointsData

Type value. For example: all the “Type” : A - should display an icon, “Type:” : B - Should display an another icon and “Type”: C - should display an another icon.

import React, { useRef, useEffect } from "react";
import MapView from "@arcgis/core/views/MapView";
import WebMap from "@arcgis/core/WebMap";
import FeatureLayer from "@arcgis/core/layers/FeatureLayer";




import "./App.css";

function App() {

  const mapRef = useRef(null);

  useEffect(()=>{

    let pointsData = [
      { geometry: { type: "point", y: 13, x: 77.}, type: 'A' },
      {geometry: { type: "point", y: 33, x: -96 }, type: 'A' },
      {geometry: { type: "point", y: -29.97, x: 21.73 }, type: 'B' },
      {geometry: { type: "point", y: -25.97, x: 28.73 }, type: 'B' },
      {geometry: { type: "point", y: -24.97, x: 24.73 }, type: 'C' },
      {geometry: { type: "point", y: -23.97, x: 23.73 }, type: 'C' },
      {geometry: { type: "point", y: -22.97, x: 22.73 }, type: 'A' },
      {geometry: { type: "point", y: -21.97, x: 21.73 }, type: 'A' },
      {geometry: { type: "point", y: -20.97, x: 20.73 }, type: 'B' },
      {geometry: { type: "point", y: -19.97, x: 19.73 }, type: 'B' },
      {geometry: { type: "point", y: -18.97, x: 18.73 }, type: 'B' },
      {geometry: { type: "point", y: -17.97, x: 17.73 }, type: 'A' },
      {geometry: { type: "point", y: -16.97, x: 16.73 }, type: "A" },
      {geometry: { type: "point", y: -15.97, x: 15.73 }, type: "A" },
      {geometry: { type: "point", y: -14.97, x: 14.73 }, type: "C" },
      {geometry: { type: "point", y: -13.97, x: 13.73 }, type: "C" },
      {geometry: { type: "point", y: -12.97, x: 12.73 }, type: "C" },
      {geometry: { type: "point", y: -11.97, x: 11.73 }, type: "C" }
  ]
    
    const layer = new FeatureLayer({
      source: pointsData,
      objectIdField: "ObjectID",
      featureReduction : {
            type: "cluster",
            clusterRadius: "50px",
            clusterMinSize: "40px",
            clusterMaxSize: "60px",
            labelingInfo: [{
              deconflictionStrategy: "none",
              labelExpressionInfo: {
                expression: "Text($feature.cluster_count, '#,###')"
              },
              symbol: {
                type: "text",
                color: "#fff",
                font: {
                  weight: "bold",
                  family: "Noto Sans",
                  size: "14px"
                },
              },
              labelPlacement: "center-center",
            }],
          symbol: {
            type: "picture-marker",
            url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQa88gtYlcIGYRv5X5yEs7NbJ5JkJdDvzCmLf41BtSCgHqCodZV2fa4ZIjCjroPj27SQCE&usqp=CAU",
            width: "20",
            height: "20"
          },
          popupTemplate: {
            title: "Cluster Summary",
            content: "This cluster represents <b>{cluster_count}</b> features.",
            fieldInfos: [{
              fieldName: "cluster_count",
              format: {
                places: 0,
                digitSeparator: true
              }
            }]
          },
      },
    });

    const myMap = new WebMap({
      basemap: 'topo',
      layers: [layer],
    })

    new MapView({
      map: myMap,
      container: mapRef.current,
    })

  },[])

  return <>
    <h1>ArcGis</h1>
    <div className="viewDiv" id="mapDiv" ref={mapRef}>
    </div>
  </>
}

export default App;

Below image is the result of above code.

[RalucaNicola1 · Accepted solution]

You can set a unique value renderer on the layer and on top of that apply the clustering, like this. Also make sure to check the awesome clustering samples.