Add suburb, quarter, neighborhood rendering

[wmisener]

This PR renders urban districts (OSM place=suburb, place=quarter, and place=neighbourhood), resolving #1058. Urban districts are rendered in all caps with a dark blue font color, the same font color as currently used for waterway label. However, waterway labels are always mixed case and italicized, so I think the risk of confusion is low. The color and capitalization, along with the lack of a dot, distinguishes urban districts from the 'independent' place hierarchy (i.e. city, town, village).

Since the distinction in OSM between each place value in American usage is fuzzy at best, all three classes are rendered similarly. The only differences are zoom level and font size. Suburbs appear between z11-z15, quarters between z14-z16, and neighbourhoods between z14-z17. I would've liked quarters to appear at z13, but they only begin to appear in the tiles at z14. The maximum zooms ensure that the labels disappear to make room for POIs once you are at high zoom.

In the legend, I labeled suburb "Major district", quarter "Large neighborhood", and neighbourhood "Neighborhood". Though maybe all three could just be grouped together?

Samples:
Los Angeles, z11 (localhost)

San Francisco-Oakland, z11 (localhost)

Oakland, z12 (localhost)

Midtown Manhattan, z14 (localhost)

Manhattan, z16 (localhost)

Marina del Rey, z14 (localhost)

Compare the place=quarter (top) to the natural=water (bottom)

Legend, z14 (localhost)

[1ec5]

Though maybe all three could just be grouped together?

The different font sizes suggest separate entries. At these zoom levels, these are the only entries in the “Populated places” section, so I don’t see a problem with listing up to all three of them at a time.

Since the distinction in OSM between each place value in American usage is fuzzy at best, all three classes are rendered similarly.

It’s fuzzy, but there’s still a hierarchy. The font size is one possible tool, but also explore other options like mixed case, so that the user doesn’t have to squint at two labels to decide whether one is subordinate to the other. Once the user is at a high enough zoom level that only suburb, quarter, and neighbourhood are labeled, consider giving suburb more prominence resembling, say, a village at a lower zoom level.

[ZeLonewolf]

This looks really really good. The only thing I might explore a bit is whether the labels for suburb might be rendered larger at zooms 11-12.

z11 example:

[zekefarwell]

This looks good. Thanks for working on it!

Urban districts are rendered in all caps with a dark blue font color, the same font color as currently used for waterway label.

Any particular reason for this color choice? It feels a bit unexpected to me. So far blue is mostly used for water related features and various POI types. I think even if a shade of gray was used, the capitalization and font weight differences would still be distinct enough. See state labels vs city labels for example.

[wmisener]

The only thing I might explore a bit is whether the labels for suburb might be rendered larger at zooms 11-12.

Increased the font size a bit for suburb at low z:

I think this looks good.

[wmisener]

Any particular reason for this color choice? It feels a bit unexpected to me. So far blue is mostly used for water related features and various POI types.

No particularly strong reason. A lighter blue was used in the sample I posted in the original issue, and going with blue was gently encouraged. But you're right to point out it's not particularly consistent with what's been done so far. I did want to avoid black to remove confusion with street labels, which will be prominent at similar zoom levels.

I think even if a shade of gray was used, the capitalization and font weight differences would still be distinct enough. See state labels vs city labels for example.

I think gray might prove tricky because we already have a lot of gray in the background where these labels appear with buildings and minor streets. But maybe with some iteration a shade can be found that works (this one was a "medium gray", hsl(0,0%,50%), and IMO it's too close to the street color).

[wmisener]

also explore other options like mixed case, so that the user doesn’t have to squint at two labels to decide whether one is subordinate to the other.

I worry that using mixed case will make these look too much like street labels, which they appear at similar zoom levels to. If we do, they probably need to be very clearly not black. Hopefully the tweak above making the labels more different in font size helps distinguish them more.

Once the user is at a high enough zoom level that only suburb, quarter, and neighbourhood are labeled, consider giving suburb more prominence resembling, say, a village at a lower zoom level.

I'm not sure I understand what you mean. Probably it shouldn't get a dot, and the font sizes are already pretty similar to the labels villages get. Actually, at z12 suburbs are in bigger font, which you can tell in that Oakland screenshot by comparing the North Oakland label to that of the village of Canyon.

One thing I was playing around with that maybe accomplishes what you mean is increasing the letter spacing as you zoom in for suburbs:

I feel like this kinda communicates the larger area the text is supposed to label (Sunset District is a suburb, Outer Sunset is a quarter, and Parkside is a neighbourhood here)

[zekefarwell]

A lighter blue was used in the sample I posted in the original issue, and going with blue was gently encouraged.

Oops, I should have looked back at the original issue before commenting. The blue labels on the paper map sample do look good. I wonder about leaning into the color choice with a brighter, more saturated blue closer to the paper map? Here's a test with the color set to hsl(208, 90%, 45%). I think something along these lines could work.

Comparatively, the water label color (hsl(211, 43%, 28%)) is very dark. When used with the thinner text on labels over land I find it looks almost just like a very dark grey or black, but I can discern the blue when looking closely. The dark text gives a bit of a different cartographic effect but it is readable and works well to my eyes. I think it just initially struck me as slightly odd that the water label color was being used.

I think gray might prove tricky because we already have a lot of gray in the background where these labels appear with buildings and minor streets. But maybe with some iteration a shade can be found that works (this one was a "medium gray", hsl(0,0%,50%), and IMO it's too close to the street color).

Yes it would need to be quite a dark gray. In the samples you showed I also find the medium gray labels lack contrast with their background and don't work so well.

[1ec5]

Letter or word spacing is a fantastic idea, almost a must for anything in all caps.

The AAA map’s blue labels look good, but that’s partly because the map has a limited color palette. Most print maps were traditionally printed in CYMK halftone. Brighter blue and magenta colors would almost evoke a note scribbled in highlighter, or marker on a transparent cellophane overlay, floating high above the cityscape. Some maps make heavy use of this effect for not only neighborhood names but also ZIP codes.

If we take this approach, we might want to consider a similar approach at lower zoom levels for other place labels that gesture broadly at a territory rather than pinpointing a specific location, such as states and counties. Even with a lighter blue, we will be encroaching enough on water labels that we should once again look into setting the water labels in a real italic font, maybe even a serif one.

[wmisener]

I've merged in the font size increases I previously showed, as well as an increase of the text spacing for all three classes of labels as one zooms in.

Regarding the coloring, using a lighter blue like in the AAA maps is worth a look. To me, the district labels end up really bright/prominent with this color: they stick out even more to my eye than the city labels, which feels off to me. Kind of a similar phenomenon to #993:

This lighter blue is also really similar to the water fill (probably a purposeful choice by print mapmakers working in CMYK ink, as @1ec5 alluded to):

Based on this, my opinion is that a darker color works better for these labels, since neighborhoods probably shouldn't be terribly high in the visual hierarchy. I think the paper maps get away with it by having the color almost washed out, and having the labels be fully transparent (you can see the roads are on top of them). But I'm not sure that's as workable in this style. Maybe with some iteration a lighter label could work.

Also tried a darker gray (hsl(0, 0%, 30%)): the tricky aspect with shades of gray is that as you zoom in, the roads behind gradually turn from light to dark gray, so some roads always nearly match whatever gray you choose:

Not really a deal-breaker, but I think having a slightly different color is helpful for legibility. One other color already used for place styling is hsl(0, 33%, 30%), which is used to label continents at z0 (!):

[ZeLonewolf]

Need to resolve the taginfo conflict.

[claysmalley]

I think the gray could still work, if we change the font weight to bold:

[zekefarwell]

Thanks for trying out the lighter blue and darker gray @wmisener. I agree with your assessment and support your current color choice (hsl(211, 43%, 28%)). It distinguishes the labels just enough from other dark gray/blackish labels in the vicinity.

@claysmalley, bold could make some sense to tie these labels a bit more closely to the other place labels that use bold. My initial reaction is that it feels a bit like the map is yelling at me with so much bold all over the place. Probably due to bold and caps used together. I think I prefer one or the other.

[wmisener]

Lost momentum on this one just before the finish line, but now my life has settled down so I'm bringing my attention back. From the above conversation it seems like the dark blue text was acceptable to most folks, any final thoughts or is this ready to be merged?

Some miscellaneous samples:

[claysmalley]

I still personally prefer the bold/light gray approach, but at this point I'd just be happy to see labels show up at all. This style is fine by me.

There are some text overlap issues with the legend (example location). Maybe we could substitute a constant letter spacing in the legend.

[1ec5]

Likewise, I think showing something will be an improvement. I suspect the potential for confusion between neighborhoods and waterbodies would be slightly higher in languages like Chinese, since MapLibre ignores italics when using TinySDF to render text. But this is something for MapLibre to worry about instead (see #1149).

At this point, the blueish color is really just the typical trick for lightening text, so color palettes aren’t too relevant. If we want to implement a highlighter/watermark color in the future, increasing label size and letter spacing dramatically would help users make that association. Also, adding multiple kinds of information in the same color would help communicate that this is a feature, not a bug.

[1ec5]

There are some text overlap issues with the legend (example location). Maybe we could substitute a constant letter spacing in the legend.

The column width is probably being constrained in terms of character-relative units.

[zekefarwell]

Looks good to me other than the text overflow issue @claysmalley noted. Let's make an issue for that if it doesn't get resolved before merge.

[wmisener]

There are some text overlap issues with the legend (example location). Maybe we could substitute a constant letter spacing in the legend.

Huh weird, I don't reproduce that text overlap on my PR preview (Mac OS 14.6, Chrome):

[wmisener]

To be honest, I'm not totally sure how to fix that either. I attempted to add a "text-letter-spacing" argument to the legendEntries items. But it seemed to have no effect for me, i.e. the legend text seemed to still have whatever spacing appeared on the map.

[1ec5]

I attempted to add a "text-letter-spacing" argument to the legendEntries items. But it seemed to have no effect for me, i.e. the legend text seemed to still have whatever spacing appeared on the map.

text-letter-spacing is from the style specification, but the legend is built using HTML and SVG. The CSS and SVG equivalent would be letter-spacing.

[1ec5]

In Firefox 133.0b9 on macOS, with either an overlay scrollbar or persistent scrollbar, there’s no overflow when my window is a full 1,728×966 pixels:

However, if I resize the window to, say, 921×966 pixels, then everything goes haywire:

I think this is essentially #684. It’s unfortunate, but I don’t think it needs to block this feature.

[claysmalley]

Yes, definitely not a blocker. Confirming that #684 addresses this issue. We should be good to merge.

[wmisener]

Ah OK, I'm able to reproduce it as well by shrinking my browser window. I agree in thinking that this is another manifestation of #684, and I don't think forcing the legend entries to have fixed letter spacing would actually fix it.