Adjusting Graduated Symbols by Scale (API 4.x)
Hi,
I've been trying to create an HTML document that can display my ArcGIS Online map. Everything has gone well so far and I've been using other Esri resources to answer any questions I might have.
The map displays graduated symbols (I've created 5 classes - I will attach a screenshot of the legend). Each country displays a certain number ("Distinct Count of Usernames" in this case) and then the corresponding symbol. At the starting scale they all look appropriately sized. However, as you zoom in, the small classes become incredibly difficult to see and click.
I've been looking around and trying new solutions/ideas for a few days now and ended up finding these:
I've read through these and been using their ideas, unfortunately, the symbols are still not changing size.
Here is the script:
<script>
const sizeVisVar = {
type: "size",
field: "Distinct Count of Usernames",
minDataValue: 42,
maxDataValue: 763,
minSize: {
type: "size",
valueExpression: "$view.scale",
stops: [
{ value: 18489298, size: 14 },
{ value: 36978595, size: 8 },
{ value: 73957191, size: 6 },
{ value: 147914382, size: 4 }
]
},
maxSize: {
type: "size",
valueExpression: "$view.scale",
stops: [
{ value: 18489298, size: 115 },
{ value: 36978595, size: 75 },
{ value: 73957191, size: 58 },
{ value: 147914382, size: 50 }
]
}
};
renderer.visualVariables = [ sizeVisVar ];
</script>
They still remain fixed at the same size, no matter the scale.
Here is the screenshot of the legend:
Note: I used 42 as my minimum because all countries with that value or less will display the same symbol. Same idea with 763 as my maximum.
I'd appreciate any help on this!
Thanks,
Matthew
