Add labels to municipal boundaries layer

[mstone121]

Overview

This PR adds labels to the municipal boundaries layer.

If the zoom level is less than 9, the labels are not shown as this gets too busy.
On the satellite basemap, the labels are white text instead of the default black.

Closes #49

Demo

Testing Instructions

• Go to draw map page
• Enable municipal boundaries layer
• Zoom in past zoom level 9
• Labels should be present
• Switch to satellite basemap
• The labels should now be white text

Checklist

• fixup! commits have been squashed
• CHANGELOG.md updated with summary of features or fixes, following Keep a Changelog guidelines
• README.md updated if necessary to reflect the changes
• CI passes after rebase

[rajadain]

Taking a quick look

[rajadain]

I like the implementation, it's neat and clean.

One idea I had was to use the darkest and lightest purple for the labels, instead of black and white, to make the labels visually associate more with the layer.

But also, I wanted to record what the labels look like:

2022-09-12.17.56.35.mp4

and ask the UX folks, is this okay? Are there any styling changes you would recommend? /cc @gatesgodin @caseycesari

[gatesgodin]

The labels look great to me. The labels might need a thicker white stroke when on the satellite view for legibility. @rajadain

[rajadain]

Let's go with this:

.muni-label {
    background: rgba(255, 255, 255, 0);
    border: 0;
    border-radius: 0px;
    box-shadow: 0 0px 0px;
    font-weight: bold;
    font-size: var(--chakra-fontSizes-sm);
    color: var(--chakra-colors-purple-900);
    text-shadow: 0 0 0.2em var(--chakra-colors-purple-50), 0 0 0.2em var(--chakra-colors-purple-50);
}

.muni-label-light {
    color: var(--chakra-colors-purple-50);
    text-shadow: 0 0 0.2em var(--chakra-colors-purple-900), 0 0 0.2em var(--chakra-colors-purple-900);
}

The text-shadow adds a darker / lighter blur behind the text that makes it stand out more. The shadow is specified twice for a stronger effect. Still pretty subtle, can't really see it unless you look for it. The larger font size also helps with the legibility.

[mstone121]

@rajadain Good idea. Update here 3b9b071.

[caseycesari]

That looks good to me too!

[rajadain]

Great work!