CODEWITHSUNDEEP
mapboxmapbox-gl-jsmapbox-studio
Charlie Harding
Charlie Harding

Reputation: 685

Make contour labels point uphill: reverse direction of text label on line feature

I am designing a map in Mapbox Studio, using mapbox.mapbox-terrain-v2’s contour layer to determine the contour lines. This is based on the outdoors style.

In the outdoors style, the contour labels are oriented so that the text is displayed between -90° and 90° of horizontal, because Keep Text Upright is set. If I disable this, then the text becomes oriented at any angle. However, this text is oriented at exactly the opposite angle to what I would like: it always points downhill, not uphill. See first image below: note that the numbers are upright where the elevation increases from north to south.

What I am aiming for is to use the Ordnance Survey style of orienting numbers uphill (upright where the elevation increases from south to north), as in the second image below.

My current style can be seen here. I have tried using the text-rotate field, but this rotates each character individually, and there does not appear to be a function to reverse the string to counteract this. Additionally, this rotates about the top of each letter, meaning that the result is offset from the actual contour line, and text-translate + text-translate-anchor seem unable to resolve this.

current state

desired

Upvotes: 0

Views: 676

Answers (2)

volda
volda

Reputation: 101

I improved Steve Bennett's solution, where it is not necessary to create a predefined array of potential values. Again, it's a hacky solution to invert the string of height values. It uses concat and slice methods to reverse the text.

enter image description here

"text-field": [
      "concat",
      [
        "slice",
        [
          "to-string",
          ["get", "height"]
        ],
        3,
        4
      ],
      [
        "slice",
        [
          "to-string",
          ["get", "height"]
        ],
        2,
        3
      ],
      [
        "slice",
        [
          "to-string",
          ["get", "height"]
        ],
        1,
        2
      ],
      [
        "slice",
        [
          "to-string",
          ["get", "height"]
        ],
        0,
        1
      ]
    ]

The text still needs to be rotated and indented.

    "text-offset": [0, 1.5],
    "text-rotate": 180,
    "text-max-angle": 15

Upvotes: 0

Steve Bennett
Steve Bennett

Reputation: 126295

As you noticed, using text-rotate on a symbol layer with placement: line rotates each character individually. So you would need to then reverse the string, which isn't possible within the expressions available.

However. There is one hacky workaround which may solve the problem for you. You can simply hardcode all the possible elevations with their reversals:

["match", ["get", "ele"],
750, "m057",
700, "m007",
650, "m056",
600, "m006",
550, "m055",
500, "m005",
 ""
]

Combined with a text-offset of 0,1.5, this actually looks alright:

enter image description here

I've published the style here

Upvotes: 1

Related Questions