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
Solved! Go to Solution.
With the new ArcGIS API for JavaScript 4.12 this Issue is fixed.
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
};
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.
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.
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.
Seems like it may be a bug. You should contact esri tech support.
Ok, I will do that. Thank you so much for your time and help, I appreciate it.
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.
Thank you Christian for this reminder, I actually forgot about this issue. I reported this to the esri Support.
With the new ArcGIS API for JavaScript 4.12 this Issue is fixed.