I am using ArcGIS JavaScript API 4.12 version. I would like to initialize UniqueValue renderer with 3 fields. But .createRenderer supporting only one field. // visualization based on categorical field var typeParams = { layer : layer , basemap : map . basemap , field : "Party" // field2: "State", // it is not supporting // field3: "County" // it is not supporting } ; // when the promise resolves, apply the visual variables to the renderer typeRendererCreator . createRenderer ( typeParams ) . then ( function ( response ) { layer . renderer = response . renderer ; } ) ; Any advise please.

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Initialize UniqueValue renderer with 3 fields

sirishb

I am using ArcGIS JavaScript API 4.12 version.

I would like to initialize UniqueValue renderer with 3 fields. But .createRenderer supporting only one field.

<SPAN class="comment token">// visualization based on categorical field </SPAN>
<SPAN class="keyword token">var</SPAN> typeParams <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> 
  layer<SPAN class="punctuation token">:</SPAN> layer<SPAN class="punctuation token">,</SPAN> 
  basemap<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">.</SPAN>basemap<SPAN class="punctuation token">,</SPAN>
  field<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Party"</SPAN> 
<SPAN class="comment token">// field2: "State",  // it is not supporting</SPAN>
<SPAN class="comment token">// field3: "County"  // it is not supporting</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
 
<SPAN class="comment token">// when the promise resolves, apply the visual variables to the renderer </SPAN>

typeRendererCreator<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createRenderer</SPAN><SPAN class="punctuation token">(</SPAN>typeParams<SPAN class="punctuation token">)</SPAN> 
  <SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> 
    layer<SPAN class="punctuation token">.</SPAN>renderer <SPAN class="operator token">=</SPAN> response<SPAN class="punctuation token">.</SPAN>renderer<SPAN class="punctuation token">;</SPAN> 
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Any advise please.

Encontre mais publicações marcadas com

Accepted answers

KristianEkenes

Hi Sirish,

The example given above can be accomplished using an Arcade Expression, but I'm not sure it gives a useful result because our color schemes contain a maximum of 10 colors for unique values before the colors start repeating, and if you accept the default max number of types of 10, then you will potentially get a lot of values that don't belong to a category.

The Arcade expression is:

<SPAN class="keyword token">var</SPAN> fields <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN> $feature<SPAN class="punctuation token">.</SPAN>DOM_CROP_ACRES<SPAN class="punctuation token">,</SPAN> $feature<SPAN class="punctuation token">.</SPAN>STATE<SPAN class="punctuation token">,</SPAN> $feature<SPAN class="punctuation token">.</SPAN>COUNTY<SPAN class="punctuation token">]</SPAN>
<SPAN class="token function">Concatenate</SPAN><SPAN class="punctuation token">(</SPAN>fields<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">", "</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Here's an app that demonstrates this: https://codepen.io/kekenes/pen/qBWRMGR?&editable=true&editors=100

All comments

sirishb

Hi Kristian Ekenes,

Thank you very much for the help and i am getting Uniuevalues for multiple fields.

Correct it is giving only 10 colors and im trying to assign each unique value feature with unique color (between user choosen "from color" and "to color" ex: AlgorithmicColorRamp)

Appreciate any hints on the colorramp.

Thanks

S B

Egge-Jan_Pollé

Yeah, that's what I thought: if you concatenate the three values Party/State/County, then every county should get a unique color. So, I supposed that you wanted to visualize either the party or the state or the county...

E-J

KristianEkenes

Hi Sirish,

The Arcade expression is:

<SPAN class="keyword token">var</SPAN> fields <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN> $feature<SPAN class="punctuation token">.</SPAN>DOM_CROP_ACRES<SPAN class="punctuation token">,</SPAN> $feature<SPAN class="punctuation token">.</SPAN>STATE<SPAN class="punctuation token">,</SPAN> $feature<SPAN class="punctuation token">.</SPAN>COUNTY<SPAN class="punctuation token">]</SPAN>
<SPAN class="token function">Concatenate</SPAN><SPAN class="punctuation token">(</SPAN>fields<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">", "</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Here's an app that demonstrates this: https://codepen.io/kekenes/pen/qBWRMGR?&editable=true&editors=100

sirishb

Hi Egge-Jan,

I want to create one Unique renderer with 3 fields.

Thanks

S B

Egge-Jan_Pollé

Hi Sirish Byreddy,

Isn't it just the case that you want to have 3 different renderers? One for party, one for state, one for county?

In that case you will have to repeat your code three times.

Please let me know what you think.

Egge-Jan

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.