Layer colors and Legend panel

[annehaley]

This PR does the following:

• Assign different default colors to layers according to ID. There are 8 different hue options and 3 different lightness options, resulting in 24 unique colors. These colors are assigned to layer IDs in the following order:

• Add a simple Legend panel to the righthand sidebar (which is now open again by default). The legend lists all visible selected layers and displays color bars for each one. If the layer has only one color config (same for all vector feature types), only one color bar is displayed. If the layer has different color configs for different feature types, multiple colorbars will be displayed with labels showing the feature type. For each color bar shown, the color bar can contain a single color or a colormap. If a colormap is shown, a label will be shown to display the name of the property on which the colormap is applied. A colormap can be shown in a continuous or discrete manner. The following screenshot provides some examples of these different combinations.

[BryonLewis]

I couple of corner cases with the coloring system (property feature coloring, raster default coloring)

Below are possible future suggestions that can be completely ignored. We can discuss in a future meeting and determine if anything should be added to the backlog

• Having the scale range for continuous scales that are being used I.E the min and max ranges to the left and right of the gradient
• Possible toggling visibiity of layers through the legend (with the amenities it can get exausting looking left/right to understand the colors that you are trying to filter/disable).
• With discrete color values for vector an expandable area indicating what those values are. I.E if you have a categorical coloring scheme you have a list of the values and the coloring for each so there is a label. If all amenities were in a single layer and their name was a vector property you could color based on the name and have a legend displaying them all instead of separate layers.
  • A sub feature would be to filter and toggle on/off the individual label types in the legend. I.E if being abel to turn on/off all or individual amenities that were in a single layer based on the legend

[cloudflare-workers-and-pages]

Deploying geoinsight with    Cloudflare Pages

Latest commit:	aeb11c7
Status:	✅  Deploy successful!
Preview URL:	https://03a3c5bc.geoinsight.pages.dev
Branch Preview URL:	https://colors-and-legend.geoinsight.pages.dev

View logs

[annehaley]

• Having the scale range for continuous scales that are being used I.E the min and max ranges to the left and right of the gradient

Added in a193d84

• Possible toggling visibiity of layers through the legend (with the amenities it can get exausting looking left/right to understand the colors that you are trying to filter/disable).

Added in 2bf1331

• With discrete color values for vector an expandable area indicating what those values are. I.E if you have a categorical coloring scheme you have a list of the values and the coloring for each so there is a label. If all amenities were in a single layer and their name was a vector property you could color based on the name and have a legend displaying them all instead of separate layers.

Added this feature in aeb11c7. A discrete colorbar shows an expansion arrow next to it. Expanding the arrow will display all the unique values for the selected property and the color applied to each. If nColors is less than the number of unique values, some values will have repeat colors. The screenshot below shows this expansion menu with 10 unique values and nColors=10.

• A sub feature would be to filter and toggle on/off the individual label types in the legend. I.E if being abel to turn on/off all or individual amenities that were in a single layer based on the legend

This would take a bit more work, but it is possible with the filters feature we already have. If we add visibility toggles (eye icon buttons) to each row in the expansion panel shown above, we could modify the applied filters accordingly. We may need a way to communicate this to the user, though. If they inspect the "Filters" tab of the styling menu, we don't want them to be surprised by the existence of filters that they did not intentionally create.

[BryonLewis]

I didn't expect you to add the numerical labels, layer toggling and the categorical labels in this PR. Thanks for doing that.

I just have one minor suggestion about the categorical limits and capping the number it's rendering/displaying. I should have mentioned that when I suggested the base idea but it slipped my mind.
Other than that I think everything is looking good.

[BryonLewis]

Given the response to my one suggestion, I think this looks good.