bug: color key should match heat map gradient color

[arikan]

User Guide color keys do not match the color gradient on the heat map.

Discord: arikan#2136

Expected Behaviour

Color key should match the color gradient on the heat map: purple -> blue -> green -> yellow -> red

Also as @sevilayerkan mentioned in their user tests, color key should be an overlay on the map, possibly bottom left corner.

[Batuhandgenc]

The color codes we used in the heatmap widget, which we based on in the initial Figma file, were as follows:

Afterwards, during the subsequent process, there wasn't much change made because the concept of intensity would be more easily understood by the public in this way. In theory, what we did was incorrect, but in practice, it turned out to be the right approach.

[arikan]

In the Leaflet integration the HeatmapLayer is where you can define a gradient (below). It seems like it is not defined explicitly, so it is probably using a default gradient.

Anyway, we can create a simple key to explain the color gradient.

https://github.com/acikkaynak/musahit-harita-frontend/blob/c283275ce0a673b1a02cd6809ebbe27e8bfa158b/src/components/Map/LayerControl.tsx#L43-L54

[usirin]

Here is how it looks when I updated the gradient with our own scale, i like it visually but not sure how much it conveys the message of a real heatmap 🤔

wdyt? @Batuhandgenc @arikan

[Batuhandgenc]

Tasty! Constantly changing can lead to criticism, just like it is now. It can stay as it is in my opinion. @arikan just want the color-schema to be in a more visible place.

[usirin]

Closing this as this is not a prio right now.