Select to view content in your preferred language

Picture Marker Symbol for clustering

606
3
Jump to solution
12-20-2022 09:09 AM
ADITYAKUMAR1
Frequent Contributor

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

0 Kudos
1 Solution

Accepted Solutions
ADITYAKUMAR1
Frequent Contributor

@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"

}
});

 

 

View solution in original post

0 Kudos
3 Replies
KristianEkenes
Esri Regular Contributor

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/ 

0 Kudos
ADITYAKUMAR1
Frequent Contributor

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

0 Kudos
ADITYAKUMAR1
Frequent Contributor

@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"

}
});

 

 

0 Kudos