Images chopped when using Class Breaks Renderer / picture-marker symbol

AmarG1 — Thu, 29 Apr 2021 19:14:49 GMT

Hi, I'm trying to display graphics on a client side feature layer using class-breaks renderer and picture-marker symbol. Symbols (or images) are getting chopped. Does anyone know why?

Thanks!

Following is the sample code:

<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Add or remove graphics from a FeatureLayer | Sample | ArcGIS API for JavaScript 4.19</title>

</style>

const view = new MapView({
container: "viewDiv",
map: map,
zoom: 3,
center: [-122.18, 37.49] // longitude, latitude
});

// create empty FeatureLayer
const monumentLayer = new FeatureLayer({
// create an instance of esri/layers/support/Field for each field object
title: "National Monuments",
fields: [
{
name: "ObjectID",
alias: "ObjectID",
type: "oid"
},
{
name: "Name",
alias: "Name",
type: "string"
},
{
name: "Type",
alias: "Type",
type: "string"
},
{
name: "Count",
alias: "Count",
type: "integer"
}
],
objectIdField: "ObjectID",
geometryType: "point",
spatialReference: { wkid: 4326 },
source: [], // adding an empty feature collection
renderer:
{
type: "class-breaks", // autocasts as new ClassBreaksRenderer()
field: "count",
// other properties set in step number 2
classBreakInfos: [
{
minValue: 0,
maxValue: 100,
symbol: {
type: "picture-marker", // autocasts as new SimpleFillSymbol()
url: "https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png",
height: "30px",
width: "30px"
},
label: "< 35%" // label for symbol in legend
},
{
minValue: 101,
maxValue: 200,
symbol: {
type: "picture-marker", // autocasts as new SimpleFillSymbol()
url: "https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png",
height: "40px",
width: "40px"
},
label: "35 - 50%" // label for symbol in legend
},
{
minValue: 201,
maxValue: 500,
symbol: {
type: "picture-marker", // autocasts as new SimpleFillSymbol()
url: "https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png",
height: "50px",
width: "50px"
},
label: "50 - 75%" // label for symbol in legend
},
{
minValue: 501,
maxValue: 1000,
symbol: {
type: "picture-marker", // autocasts as new SimpleFillSymbol()
url: "https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png",
height: "60px",
width: "60px"
},
label: "> 75%" // label for symbol in legend
}
]
}
,
popupTemplate: {
title: "{Name}:{Count}"
}
});
map.add(monumentLayer);

// add legend
const legend = new Legend({
view: view
});
view.ui.add(legend, "bottom-left");

// add buttons to the mapView
view.ui.add(document.getElementById("actions"), "top-right");

const addBtn = document.getElementById("add");
const removeBtn = document.getElementById("remove");

addBtn.addEventListener("click", addFeatures);
removeBtn.addEventListener("click", removeFeatures);

// check if features have already been added to determine disabled state of buttons
monumentLayer.queryFeatures().then(function(results){
if (results.features.length === 0){
addBtn.disabled = false;
removeBtn.disabled = true;
}
else {
addBtn.disabled = true;
removeBtn.disabled = false;
}
});

// fires when "Add Features" button is clicked
function addFeatures(){
// data to be added to the map
const data = [
{
LATITUDE: 32.6735,
LONGITUDE: -117.2425,
TYPE: "National Monument",
NAME: "Cabrillo National Monument",
COUNT: 100
},
{
LATITUDE: 32.6935,
LONGITUDE: -117.2925,
TYPE: "National Monument",
NAME: "Cabrillo National Monument",
COUNT: 110
},
{
LATITUDE: 35.2234,
LONGITUDE: -118.5590,
TYPE: "National Monument",
NAME: "Cesar E. Chavez National Monument",
COUNT: 200
},
{
LATITUDE: 35.9234,
LONGITUDE: -118.9590,
TYPE: "National Monument",
NAME: "Cesar E. Chavez National Monument",
COUNT: 200
},
{
LATITUDE: 37.6251,
LONGITUDE: -119.0850,
TYPE: "National Monument",
NAME: "Devils Postpile National Monument",
COUNT: 300
},
{
LATITUDE: 35.2915,
LONGITUDE: -115.0935,
TYPE: "National Monument",
NAME: "Castle Mountains National Monument",
COUNT: 400
},
{
LATITUDE: 41.7588,
LONGITUDE: -121.5267,
TYPE: "National Monument",
NAME: "Lava Beds National Monument",
COUNT: 500
},
{
LATITUDE: 37.8970,
LONGITUDE: -122.5811,
TYPE: "National Monument",
NAME: "Muir Woods National Monument",
COUNT: 600
},
{
LATITUDE: 41.8868,
LONGITUDE: -121.3717,
TYPE: "National Monument",
NAME: "Tule Lake National Monument",
COUNT: 700
}
];

// create an array of graphics based on the data above
var graphics = [];
var graphic;
for (var i=0; i<data.length; i++){
graphic = new Graphic({
geometry: {
type: "point",
latitude: data[i].LATITUDE,
longitude: data[i].LONGITUDE
},
attributes: data[i]
});
graphics.push(graphic);
}

// addEdits object tells applyEdits that you want to add the features
const addEdits = {
addFeatures: graphics
};

// apply the edits to the layer
applyEditsToLayer(addEdits);
}

// fires when "Remove Features" button clicked
function removeFeatures(){
// query for the features you want to remove
monumentLayer.queryFeatures().then(function(results){
// edits object tells apply edits that you want to delete the features
const deleteEdits = {
deleteFeatures: results.features
};
// apply edits to the layer
applyEditsToLayer(deleteEdits);
});
}

});
</script>
</head>

<body>
<div id="viewDiv"></div>
<div id="actions" class="esri-widget">
<button class="esri-button" id="add">Add 7 Features</button>
<button class="esri-button" id="remove">Remove 7 Features</button>
</div>
</body>
</html>

Re: Images chopped when using Class Breaks Renderer / picture-marker symbol

Noah-Sager — Mon, 03 May 2021 22:33:39 GMT

Hi @AmarG1, can you describe the issue in more detail? I ran your app in Codepen, and when I add the 9 features, they seem to display fine:

https://codepen.io/noash/pen/LYxwKGP?editors=1000

Re: Images chopped when using Class Breaks Renderer / picture-marker symbol

AmarG1 — Thu, 06 May 2021 13:16:58 GMT

Hi Noah, Please look at the screenshot that I'm sharing. Topmost symbol is chopped initially but gets better after zoom-in/zoom-out. Screenshot is the output from your codepen sample.

This is the same issue as FeatureLayer symbol cut off after change of attrib... - Esri Community

Re: Images chopped when using Class Breaks Renderer / picture-marker symbol

mgeorge — Fri, 07 May 2021 22:11:35 GMT

Ah ok Amar I can see it. Probably this is limited to applyEdits. Making an internal issue.

Re: Images chopped when using Class Breaks Renderer / picture-marker symbol

AmarG1 — Mon, 10 May 2021 14:01:30 GMT

Thanks Noah!

We use this a lot.

When can we expect resolution to this?

Re: Images chopped when using Class Breaks Renderer / picture-marker symbol

Noah-Sager — Mon, 10 May 2021 16:57:44 GMT

Hi @AmarG1, give the credit to @mgeorge. We hope to have this fixed at a future release, but will update this thread once we have more details to share.

Re: Images chopped when using Class Breaks Renderer / picture-marker symbol

AmarG1 — Tue, 11 May 2021 18:14:29 GMT

Sure, thanks to @mgeorge!

Re: Images chopped when using Class Breaks Renderer / picture-marker symbol

UndralBatsukh — Mon, 07 Jun 2021 18:04:24 GMT

Hi there,

This issue will be fixed at JS API version 4.20 which will be released end of June 2021.

-Undral

Re: Images chopped when using Class Breaks Renderer / picture-marker symbol

JoelBennett — Mon, 26 Jul 2021 23:35:23 GMT

I'm seeing a similar issue in 4.20, this time involving graphics symbolized with TextSymbol in a client-side FeatureLayer getting clipped.

Label OK

Label Clipped

Can this be fixed in the next release?

Re: Images chopped when using Class Breaks Renderer / picture-marker symbol

SimonGIS — Tue, 10 Aug 2021 07:52:57 GMT

Is there a workaround or resolution to this in the upcoming 4.21?

We have discovered a related issue with 4.20 and CIMSymbols failing to render correctly, and parts of the symbol are chopped off.

This happens when rendered using a unique or SimpleRenderer:

CodePen

Re: Images chopped when using Class Breaks Renderer / picture-marker symbol

JoelBennett — Wed, 03 Nov 2021 00:35:53 GMT

Update: this issue with TextSymbol graphics being clipped was fixed in 4.21.

topic Re: Images chopped when using Class Breaks Renderer / picture-marker symbol in ArcGIS JavaScript Maps SDK Questions

Images chopped when using Class Breaks Renderer / picture-marker symbol

Re: Images chopped when using Class Breaks Renderer / picture-marker symbol

Re: Images chopped when using Class Breaks Renderer / picture-marker symbol

Re: Images chopped when using Class Breaks Renderer / picture-marker symbol

Re: Images chopped when using Class Breaks Renderer / picture-marker symbol

Re: Images chopped when using Class Breaks Renderer / picture-marker symbol

Re: Images chopped when using Class Breaks Renderer / picture-marker symbol

Re: Images chopped when using Class Breaks Renderer / picture-marker symbol

Re: Images chopped when using Class Breaks Renderer / picture-marker symbol

Re: Images chopped when using Class Breaks Renderer / picture-marker symbol

Re: Images chopped when using Class Breaks Renderer / picture-marker symbol