Skip to content

Too large font for places_region #183

@Edefritz

Description

@Edefritz

Description
As far as I understand, the places_region layer renders names of states/regions. While this works well for US states, it creates comparatively huge labels for regions in other parts of the world.
The region labels are larger than the country labels and somehow make the map appear cluttered.

I think this is both, a data and a style "issue".

There also seems to be a bug as US state labels seem to disappear after z7 but the state labels in other parts of the world remain rendered:
https://maps.protomaps.com/#map=7.52/42.67/-107.473&theme=light&renderer=maplibregl&tiles=https://build.protomaps.com/20231120.pmtiles
https://maps.protomaps.com/#map=9.64/52.7965/13.1533&theme=light&renderer=maplibregl&tiles=https://build.protomaps.com/20231120.pmtiles

@nvkelso left a comment writing that eventually the source for this layer should transition to Natural Earth data anyway. But in the meantime I would suggest to reduce the font size so the map remains

Location
Looks ok:
https://maps.protomaps.com/#map=5.28/37.241/-83.096&theme=light&renderer=maplibregl&tiles=https://build.protomaps.com/20231120.pmtiles
Not so much:
https://maps.protomaps.com/#map=5.28/52.416/12.78&theme=light&renderer=maplibregl&tiles=https://build.protomaps.com/20231120.pmtiles

Screenshots
Screenshot 2023-11-17 at 15 04 17

Screenshot 2023-11-17 at 14 55 22

I'm not sure how to best address this. I feel changing the style to something like this already looks much tidier:

    {
      id: "places_region",
      type: "symbol",
      source: source,
      "source-layer": "places",
      filter: ["==", "pmap:kind", "region"],
      layout: {
        "symbol-sort-key": ["get", "pmap:min_zoom"],
        "text-field": [
          "step",
          ["zoom"],
          ["get", "name:short"],
          6, // only show full name from zoom 6
          ["get", "name"],
        ],
        "text-font": ["Noto Sans Regular"],
        "text-size": ["interpolate", ["linear"], ["zoom"], 3, 11, 7, 16], // max font size for labels capped at 16
        "text-radial-offset": 0.2,
        "text-anchor": "center",
        "text-transform": "uppercase",
      },
      paint: {
        "text-color": t.state_label,
        "text-halo-color": t.state_label_halo,
        "text-halo-width": 2,
      },
    },

Admittedly, this whole issue might be more of a personal preference thingy :)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions