topic Re: Heatmap: Old colors stay in map after changing colorstops in ArcGIS JavaScript Maps SDK Questions

Heatmap: Old colors stay in map after changing colorstops

DetlefDemeter — Mon, 17 Jun 2019 07:58:58 GMT

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

Re: Heatmap: Old colors stay in map after changing colorstops

RobertScheitlin__GISP — Sat, 11 Dec 2021 19:12:03 GMT

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

Re: Heatmap: Old colors stay in map after changing colorstops

DetlefDemeter — Sat, 11 Dec 2021 19:12:06 GMT

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.

Re: Heatmap: Old colors stay in map after changing colorstops

RobertScheitlin__GISP — Mon, 17 Jun 2019 15:13:09 GMT

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.

Re: Heatmap: Old colors stay in map after changing colorstops

DetlefDemeter — Tue, 18 Jun 2019 07:51:01 GMT

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.

Re: Heatmap: Old colors stay in map after changing colorstops

RobertScheitlin__GISP — Tue, 18 Jun 2019 18:25:51 GMT

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

Re: Heatmap: Old colors stay in map after changing colorstops

DetlefDemeter — Fri, 21 Jun 2019 07:34:28 GMT

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

Re: Heatmap: Old colors stay in map after changing colorstops

ChristianAlfons — Fri, 28 Jun 2019 12:46:12 GMT

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.

Re: Heatmap: Old colors stay in map after changing colorstops

DetlefDemeter — Mon, 01 Jul 2019 06:55:31 GMT

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

Re: Heatmap: Old colors stay in map after changing colorstops

DetlefDemeter — Fri, 05 Jul 2019 07:00:15 GMT

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