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; } } }

How to Change the Colors on a RasterStretchRenderer

RyanSutcliffe

If I have an ImageryLayer or ImageryTileLayer in my ArcGIS JavaScript API map, how do I change the colors of the renderer. Is it possible? I cannot get it to work.

Here is a CodePen of what I've tried. Basically I'm trying to replace the colorRamp with a new one and then update the renderer. This is basically a copy of an ESRI sample that shows how you can change all other properties of the RasterStretchRenderer on a LERC-based Raster layer.

I assumed that this was possible as you can change colors and complete styles for SimpleRenderers on vector data. I haven't yet looked at other types of Renderers to see what happens there.

Hoping I don't have to create a new layer. I'd like avoid requiring the client from having to pull all the data down each time the renderer is changed.

Thoughts advice are welcome.

Ryan

Find more posts tagged with

Accepted answers

Gianna_BBSRC

Hi Ryan,

It's because you haven't assigned an initial renderer to your layer.

<SPAN class="comment token">// create initial renderer</SPAN>
<SPAN class="keyword token">let</SPAN> layerRenderer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">RasterStretchRenderer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
    colorRamp<SPAN class="punctuation token">:</SPAN> colorRamp<SPAN class="punctuation token">,</SPAN>
    stretchType<SPAN class="punctuation token">:</SPAN> stretchType
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="comment token">// create a ImageryTileLayer from tiled elevation service</SPAN>
<SPAN class="keyword token">const</SPAN> layer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ImageryTileLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
    url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://sampleserver6.arcgisonline.com/arcgis/rest/services/Elevation/MtBaldy_Elevation/ImageServer"</SPAN><SPAN class="punctuation token">,</SPAN>
    opacity<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.9</SPAN><SPAN class="punctuation token">,</SPAN>
    renderer<SPAN class="punctuation token">:</SPAN> layerRenderer
<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>

Without it, there's nothing to clone in your updateRenderer function.

All comments

Gianna_BBSRC

Hi Ryan,

It's because you haven't assigned an initial renderer to your layer.

<SPAN class="comment token">// create initial renderer</SPAN>
<SPAN class="keyword token">let</SPAN> layerRenderer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">RasterStretchRenderer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
    colorRamp<SPAN class="punctuation token">:</SPAN> colorRamp<SPAN class="punctuation token">,</SPAN>
    stretchType<SPAN class="punctuation token">:</SPAN> stretchType
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="comment token">// create a ImageryTileLayer from tiled elevation service</SPAN>
<SPAN class="keyword token">const</SPAN> layer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ImageryTileLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
    url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://sampleserver6.arcgisonline.com/arcgis/rest/services/Elevation/MtBaldy_Elevation/ImageServer"</SPAN><SPAN class="punctuation token">,</SPAN>
    opacity<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.9</SPAN><SPAN class="punctuation token">,</SPAN>
    renderer<SPAN class="punctuation token">:</SPAN> layerRenderer
<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>

Without it, there's nothing to clone in your updateRenderer function.

RyanSutcliffe

Thanks for your post @Gianna_BBSRC. Apologies for my delayed response here-- didn't see this come into my inbox. Your post is correct and solves at least part of my problem. Here is a new code pen with that fix applied (as I understand it). Note though, that now the symbology only changes if you zoom or pan and the original symbology hangs around on the existing tiles? Let me know if you or anyone spots anything wrong looking there.

In my apps I think I've mostly opted to completely reload the layer if I want to change a property like the colorRamp for a renderer to get around this but if there was a way to not need doing that it would be ideal.

Gianna_BBSRC

Hi Ryan,

This looks like a bug to me. It seems like a caching issue with the tiles. I cleared my browser's cache and selected 'green' before the map loaded completely and got this (without zooming):

I've scripted a few website using a regular ImageryLayer, not ImageryTileLayer, and it updates the renderer automatically. It may be worth raising a new question, or bug report with Esri, to get an answer for this one.

Cheers,

Gianna

RyanSutcliffe

Thanks, I will reach out to ESRI Support and post back here any resolution. As a bit of an aside, there were a few related issue we encountered with changing clientside renderers (not specifically RasterStretchRenderers) on ImageryLayer and other layer types as well. In various circumstances the old styles would hang around. Here is a CodePen of one such case (don't think we ever got this one acknowledged as a bug). Another case that was, I think eventually acknowledged as a bug, was one where if you set up a featurelayer with a certain type of render and definitionExpression but changed it before drawing the layer, the API would insist on fetching and drawing the layer twice (codepen sample, video demo).

All this is to say why we chose to just reload layers in these circumstances.

RyanSutcliffe

Got a prompt response from an ESRI Canada's support rep who pointed that the behaviour has been fixed at ArcGIS JavaScript API 4.17. If you update the above codepen url links to 4.17 you'll see that the caching issue discussed is no longer an issue.

Given that, going to mark @Gianna_BBSRC 's answer as correct. Just remember to use 4.17 or higher.

Gianna_BBSRC

Aha! I had half a mind to update it to 4.17 when playing around with the code today. Thanks for finding out!

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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