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.