How to add different icon on individual points ?

TapanPatra — Wed, 24 Jan 2024 10:26:28 GMT

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.

Re: How to add different icon on individual points ?

RalucaNicola1 — Wed, 24 Jan 2024 12:54:46 GMT

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.

topic Re: How to add different icon on individual points ? in ArcGIS JavaScript Maps SDK Questions

How to add different icon on individual points ?

Re: How to add different icon on individual points ?