Heatmap: Old colors stay in map after changing colorstops

1163
9
Jump to solution
06-17-2019 12:58 AM
DetlefDemeter
New Contributor II

Hey there,

I noticed something in the Heatmap Renderer, when changing the colorstops and I can not figure out, what is causing it.

I want to implement a Heatmap Renderer with multiple color schemes(HeatmapColorStop[]). So I defined a few and put them into a select container. When I switched through them, I noticed, that the colors from old color schemes were not gone completely, some of them remained in the map. You can see that very clearly, when you switch from a light to a darker color and back.

I prepared a CodePen, which visualizes, what I am trying to explain. https://codepen.io/anon/pen/pXyKJO

At first you have a color scheme, which graduates from a dark purble to a bright yellow. If you change the scheme with the "change scheme" button, you should see only red and orange, but dark purple edges remain.

So my question is, how do you change between different color schemes correctly?

Thank you in advance and kind regards,

D. Demeter

1 Solution

Accepted Solutions
DetlefDemeter
New Contributor II

With the new ArcGIS API for JavaScript 4.12 this Issue is fixed.

View solution in original post

0 Kudos
9 Replies
RobertScheitlin__GISP
MVP Emeritus

Detlef,

   Your issue was you need at least 3 visible color in your stops you have three but the fist had a opacity of 0. Here is what you need:

layer.renderer = {
            type: "heatmap",
            colorStops: [
              { color: "rgba(255, 140, 0, 0)", ratio: 0 },
              { color: "rgba(255, 140, 0, 1)", ratio: 0.1 },
              { color: "rgba(255, 140, 0, 1)", ratio: 0.75 },
              { color: "rgba(255, 0, 0, 1)", ratio: 0.9 }
            ],
            maxPixelIntensity: 25,
            minPixelIntensity: 0
          };
DetlefDemeter
New Contributor II

Hello Robert,

thank you for your super quick answer. I adjusted the colorstops to 

colorStops: [
	{ ratio: 0, color: "rgba(254, 209, 111, 0)" },
	{ ratio: 0.05, color: "rgba(235, 240, 247, 0)" },
	{ ratio: 0.10, color: "#DFE6F0" },
	{ ratio: 0.15, color: "#D3DCE8" },
	{ ratio: 0.20, color: "#C7D2E1" },
	{ ratio: 0.25, color: "#BBC8DA" },
	{ ratio: 0.30, color: "#AFBED2" },
	{ ratio: 0.35, color: "#A3B3CB" },
	{ ratio: 0.40, color: "#97A9C3" },
	{ ratio: 0.45, color: "#8B9FBC" },
	{ ratio: 0.50, color: "#7F95B5" },
	{ ratio: 0.55, color: "#738BAD" },
	{ ratio: 0.60, color: "#6781A6" },
	{ ratio: 0.65, color: "#5B779E" },
	{ ratio: 0.70, color: "#4F6C97" },
    { ratio: 0.75, color: "#436290" },
	{ ratio: 0.80, color: "#375888" },
	{ ratio: 0.85, color: "#2B4E81" },
	{ ratio: 0.90, color: "#1F4479" },
	{ ratio: 0.95, color: "#133A72" },
	{ ratio: 1, color: "#08306B" }
]‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

and 

colorStops: [
	{ ratio: 0, color: "rgba(66, 3, 157, 0)" },
	{ ratio: 0.05, color: "rgba(75, 13, 151, 0)" },
	{ ratio: 0.10, color: "#541791" },
	{ ratio: 0.15, color: "#5D218B" },
    { ratio: 0.20, color: "#672B85" },
	{ ratio: 0.25, color: "#70357F" },
	{ ratio: 0.30, color: "#793F79" },
	{ ratio: 0.35, color: "#834A73" },
	{ ratio: 0.40, color: "#8C546D" },
	{ ratio: 0.45, color: "#955E67" },
	{ ratio: 0.50, color: "#9F6861" },
	{ ratio: 0.55, color: "#A8725B" },
	{ ratio: 0.60, color: "#B17C55" },
	{ ratio: 0.65, color: "#BA864F" },
	{ ratio: 0.70, color: "#C49149" },
	{ ratio: 0.75, color: "#CD9B43" },
	{ ratio: 0.80, color: "#D6A53D" },
	{ ratio: 0.85, color: "#E0AF37" },
	{ ratio: 0.90, color: "#E9B931" },
	{ ratio: 0.95, color: "#F2C32B" },
	{ ratio: 1, color: "#FCCE25" }
]‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

but I still can see a slight edge of the old color. I needed to set the opacity of the first two colors to 0, to see the basemap. 

I think I quite do not understand how to configure or work with colorStops properly.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Detlef,

   The stop with ratio 0 needs to have a 0 opacity but anything above that (ratio 0) normally should not. Why do you think that you have to have 

ratio: 0.05

with opacity of 0 also? I can see the basemap when I set ratio: 0.05 to opacity of 1.

DetlefDemeter
New Contributor II

Robert,

I changed the opacity to 1 of all color with a 0.5 ratio. At first it seemed like it works just fine. I started to configure the HeatmapRenderer by changeg the blurradius, minPixelIntensity and maxPixelIntensity with some sliders. You can see in the screenshots what happens after a few configurations. 

I am starting to think, that it has nothing to do with the colorStops, but I still can not figure out what I am doing wrong. I grab the new values, get the renderer from my layer and overwrite it. After that I set the renderer in my layer.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Seems like it may be a bug. You should contact esri tech support.

DetlefDemeter
New Contributor II

Ok, I will do that. Thank you so much for your time and help, I appreciate it.

0 Kudos
ChristianAlfons
New Contributor II

This is clearly a bug. Have you reported it?

Here's some sample code that reproduces the issue:

https://www.w3schools.com/code/tryit.asp?filename=G5H6ULIGCCCB

(Switch back and forth between the two heatmaps and see how they "pollute" each other.)

Any workarounds until this bug is fixed? In my case, a simple method that causes the layer to redraw would suffice.

0 Kudos
DetlefDemeter
New Contributor II

Thank you Christian for this reminder, I actually forgot about this issue. I reported this to the esri Support.

0 Kudos
DetlefDemeter
New Contributor II

With the new ArcGIS API for JavaScript 4.12 this Issue is fixed.

0 Kudos