Quantcast
Channel: maps for developers - Medium
Viewing all articles
Browse latest Browse all 2230

Designing perspective maps in Studio

$
0
0

Here are three tips for designing perspective maps in Studio.

Press Shift ↑ and Shift ↓ to adjust perspective view

pitch-compare

The same map design viewed at 0°, 40°, and 60° pitch.

How do you enable perspective view?

Press Shift ↑ to increase the pitch and Shift ↓ to decrease the pitch while editing a style in Mapbox Studio. You can save the pitch value for future editing by clicking the Position menu.

Use Viewport labels with anchors

label-compare

labels

Road labels with map placement, viewport placement, and viewport placement with leader lines.

Perspective makes it difficult to read labels for roads and other line features when text is placed on the map surface. Use Viewport placement to orient these labels upright toward the camera.

labels-ui-combined

While easier to read, viewport labels can be hard to associate with individual road lines. Use a leader line or other anchoring icon to help connect each label to a specific road.

Account for perspective scaling with 2x icons

sprite-compare

A close look at the pixels rendered for an icon at 1x size vs 2x size.

Perspective view can overscale icons that are rendered close to the camera and result in blurry edges. To keep icons sharp, draw them in your SVG editor at 2x the scale and then counterbalance in Mapbox Studio by setting the Icon Size to 0.5. This approach provides enough pixel density to show sharp details for icons even on maps using an extreme pitch.

icons-ui

More perspective tips?

Do you have tips focused on designing perspective maps that you’d like to share? Tweet at us and don’t forget to check out our gallery for more designs and inspiration.


Viewing all articles
Browse latest Browse all 2230

Trending Articles