How to use multiple values for a single symbol in a unique value renderer?

142
4
Jump to solution
06-29-2020 12:05 PM
Highlighted
New Contributor II

I have a feature service I'm trying to symbolize in a web map. There are over 2,000 features in the service, but I'm using a field with a little over 200 categories for the symbology. I don't need a separate color for each of the 200 values - maybe 20 or so colors would be sufficient. Problem is, I don't want to have to create a renderer with 200 different symbologies, I would prefer to create a renderer with 20 different symbologies and use each for 10 different values. I was trying to do something like the following, but it wasn't working:

	var subdivisionRen = {
type: "unique-value",
field: "Book",
defaultSymbol: { type: "simple-fill" },
uniqueValueInfos: [{
value: ["1853", "1863", "1873", "1883", "1893", "1903", "1913", "1923", "1933"],
symbol: {
type: "simple-fill",
color: "blue"
}
}, {
value: ["1854", "1864", "1874", "1884", "1894", "1904", "1914", "1924", "1934"],
symbol: {
type: "simple-fill",
color: "green"
}
}, {
value: ["1855", "1865", "1875", "1885", "1895", "1905", "1915", "1925", "1935"],
symbol: {
type: "simple-fill",
color: "red"
}
}, {
value: ["1856", "1866", "1876", "1886", "1896", "1906", "1916", "1926", "1936"],
symbol: {
type: "simple-fill",
color: "yellow"
}
}]
};‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

And so on, with 20 symbols containing 10 values each. I don't know if it's not possible to have a list for value, or if it is, if I have the syntax wrong, or what. But if anyone has any suggestions I'm all ears.

Tags (2)
Reply
0 Kudos
1 Solution

Accepted Solutions
Highlighted
New Contributor III

Hello John,

You can use an Arcade Expression for the 'valueExpression' property of the UniqueValueRenderer. Here is some sample code of an example using state names. I only added a few, but you can get the idea with just a few states. You can use the When logical operation in Arcade to add as many expressions until one evaluates to true. So, you can have certain values return a specific integer or string, and then use the uniqueValueInfos, to apply the symbol you like, based off what the values you choose to return.

const name = "$feature.state_name";

const uvr = {
type: "unique-value",
valueExpression: `When(${name} == 'Hawaii', 0, ${name} == 'Washington', 0, ${name} == 'Montana', 0, ${name} == 'North Dakota', 0, ${name} == 'South Dakota', 1, ${name} == 'Wyoming', 1, ${name} == 'Wisconsin', 1, ${name} == 'Oregon', 2, ${name} == 'Texas', 2, ${name} == 'Florida', 2, 3)`, // when([expr1, result1, ...exprN, resultN], default)
uniqueValueInfos: [
{
value: "0",
symbol: sym0
}, {
value: "1",
symbol: sym1
},{
value: "2",
symbol: sym2
}, {
value: "3",
symbol: sym3
}]
};‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

var featureLayer = new FeatureLayer({
url:"https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2",
renderer: uvr
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Sample application:

https://codepen.io/banuelosj/pen/OJMOMXw

Regards,

Jose

View solution in original post

4 Replies
Highlighted
Esri Contributor

Hi John
There might be an easier way to do this, by adding the layer to a web map in Portal or ArcGIS Online, then use the out of the box features in the map viewer to change the layer symbology, this will be from the "Change Style" panel. Once the layer is saved in a web map, then you can use the web map in your application without the need the handcraft the symbology.

 

I hope this would help

Regards
Ihab

Reply
0 Kudos
Highlighted
New Contributor II

Thanks. Yes, I'm aware you can do that, but we were wanting the symbology to be made on the client side, which is why I'm trying to do it here instead of in Portal.

Highlighted
New Contributor III

Hello John,

You can use an Arcade Expression for the 'valueExpression' property of the UniqueValueRenderer. Here is some sample code of an example using state names. I only added a few, but you can get the idea with just a few states. You can use the When logical operation in Arcade to add as many expressions until one evaluates to true. So, you can have certain values return a specific integer or string, and then use the uniqueValueInfos, to apply the symbol you like, based off what the values you choose to return.

const name = "$feature.state_name";

const uvr = {
type: "unique-value",
valueExpression: `When(${name} == 'Hawaii', 0, ${name} == 'Washington', 0, ${name} == 'Montana', 0, ${name} == 'North Dakota', 0, ${name} == 'South Dakota', 1, ${name} == 'Wyoming', 1, ${name} == 'Wisconsin', 1, ${name} == 'Oregon', 2, ${name} == 'Texas', 2, ${name} == 'Florida', 2, 3)`, // when([expr1, result1, ...exprN, resultN], default)
uniqueValueInfos: [
{
value: "0",
symbol: sym0
}, {
value: "1",
symbol: sym1
},{
value: "2",
symbol: sym2
}, {
value: "3",
symbol: sym3
}]
};‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

var featureLayer = new FeatureLayer({
url:"https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2",
renderer: uvr
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Sample application:

https://codepen.io/banuelosj/pen/OJMOMXw

Regards,

Jose

View solution in original post

Highlighted
New Contributor II

Thanks, that was less than ideal, but good enough. I ended up grabbing the last digit of my Book field. Like this:

valueExpression: `When(${Book}[3] == '0', 0, ${Book}[3] == '1', 1, 0)' //and so on

And then making 10 color/symbol categories instead of 20.