Mapzen house styles have been updated with road shields! This feature greatly enhances map display and is powered by new Tangram v0.11 label placement strategies along with the network and shield_text properties released in v1.0 Vector Tiles.

Bubble Wrap Shields

For this update, we are starting with custom state road shields for California, New York and Pennsylvania (with network values of US:CA, US:NY, US:PA) along with the US Interstate Highway System (US:I) and US Federal Routes (US:US).

Here’s how we filter for California shields in Tangram’s YAML syntax:

US-CA:
    # Match California state highways: `US:CA`
    filter: |
        function() {
            return feature.shield_text &&
                /^US:CA$/.test(feature.network)
        }
    draw:
        icons:
            sprite: |
                function() {
                    return (feature.network + '_' +
                            feature.shield_text.length +
                            'char');
                }
            text:
                offset: [0px, 1px]
                font:
                    fill: [1.0,1.0,1.0]
                    size: [[7,7px],[13,9px],[15,10px]]

Let’s break this down: we select roads with the US:CA network tag using a regular expression and do a sprite image lookup in the texture definition based on the number of characters in the shield_text. For California Route 1 we’d look for US:CA_char1, for California Route 36 we’d look for US:CA_char2, and so on. Tangram then composites the shield_text onto the sprite artwork dynamically. The same logic holds for US Routes and Interstates.

The OpenStreepMap data for road networks in the United States is very thorough. As more network relations are added in Europe and elsewhere it will be easier to support additional custom shields for more countries (and to add logic for when a national road shield should win over an E-Road shield).

Until then, we fall back to generic shield artwork and shield text sourced from the road’s basic ref value, and generate generic shields that can handle one to five characters. This helps Europe close the gap, but in the United States if you see a mix of custom shields and generic shields along the same road it’s probably because small segments of highway need be added to the overall network relation. But you can fix this! For reference, you can see how I-90 through Illinois is a relation made up of many smaller segments of ways in OSM.)

If you have custom shield logic and/or vector artwork to contribute, please open an issue. (Links to public domain road shield signs are great, but the first step is to ensure that the road network is defined in OpenStreetMap!)

Walkabout Shields

To improve performance and keep the map balanced, we thin out the total number of shields visible based on the road’s importance. Highway shields are visible first, then major roads, and finally minor roads. We also adjusted the relative priority between road shields, road text labels, and other label features.

Here’s London with highway shields filtered on the left, and unfiltered on the right.

Tron Shields

Explore all our house styles below:

( These maps are interactive! Open full screen ➹ )