topic Re: Picture Marker Symbol for clustering in ArcGIS JavaScript Maps SDK Questions

Picture Marker Symbol for clustering

ADITYAKUMAR1 — Tue, 20 Dec 2022 17:09:06 GMT

HI ,

I have a feature layer which has clustering data with it. To this layer I want to add picture marker symbol. This was working fine in Javaascript 3x but I want to do the same in 4x.

this.clusterLayer = new FeatureLayer({
supportsEditing: true,
supportsAdd: true,
title: "clusters",
objectIdField: "clusters",
id: "clusters",
source: [this.clustPoints],
geometryType: "point"

});

var picBaseUrl = _globalGISUrl + "images/";
var clustermarker = new PictureMarkerSymbol(picBaseUrl + "GreenPin1LargeB.png", 56, 56);
var clustermarkermedium = new PictureMarkerSymbol(picBaseUrl + "BluePin1LargeB.png", 64, 64);
var clustermarkerlarge = new PictureMarkerSymbol(picBaseUrl + "RedPin1LargeB.png", 72, 72);
var pin = new PictureMarkerSymbol(picBaseUrl + "BluePin1LargeB.png", 48, 48);

Any idea how to implement this?

Thanks

Aditya Kumar

Re: Picture Marker Symbol for clustering

KristianEkenes — Tue, 20 Dec 2022 17:48:43 GMT

That pattern isn't supported in 4.x. Rather than set a symbol for each graphic, you should set a renderer on the FeatureLayer. In this case you would set a SimpleRenderer with a PictureMarkerSymbol on the symbol property.

Very similar to how you see it in this sample: https://developers.arcgis.com/javascript/latest/sample-code/layers-featurelayer-collection/

Re: Picture Marker Symbol for clustering

ADITYAKUMAR1 — Sat, 24 Dec 2022 14:13:16 GMT

I approached ESRI customer support and they told its possible. Once I have a sample code Iwill share in the forum soon

Re: Picture Marker Symbol for clustering

ADITYAKUMAR1 — Mon, 30 Jan 2023 12:10:15 GMT

@KristianEkenes I found the solution.

let renderer = new ClassBreaksRenderer({
field: "cluster_count"
});
renderer.addClassBreakInfo({
minValue: 1,
maxValue: 1,
symbol: {
type: "picture-marker", // autocasts as new PictureMarkerSymbol()
url: "https://static.arcgis.com/images/Symbols/Shapes/BlueStarLargeB.png",

height: "48px",
width: "48px"

}
});