tangram-play, tangram-es mismatch as some tags are silently dropped in MVT format

[matkoniecz]

TO REPRODUCE THE ISSUE, FOLLOW THESE STEPS:

bug encountered using https://github.com/matkoniecz/StreetComplete/blob/minimized_for_bug_report/app/src/main/assets/my-style.yaml from Android app

• build https://github.com/matkoniecz/StreetComplete using AndroidStudio 2.3.3 on Ubuntu 16.04 64 bit branch https://github.com/matkoniecz/StreetComplete/tree/minimized_for_bug_report
• run it in Xiaomi Redmi 4 on Android 6.0.1 MMB29M
• zoom to location with hiking trail so

        draw:
            lines:
                order: 1100
                color: green
                width: [[15, 0], [16, 3m]]
                cap: round
        walking_routes:
            filter: {all_walking_networks: true}
            draw:
                lines:
                    order: 1100
                    color: red
                    width: [[1, 4px], [16, 3m]]
                    cap: round

will be relevant

RESULT:

hiking trail is green

EXPECTED RESULT:

hiking trail is red like expected in Tangram Play at https://mapzen.com/tangram/play/?#18.00000/49.27798/19.98151

ENVIRONMENT:

• compilation: AndroidStudio 2.3.3 on Ubuntu 16.04 64 bit
• execution: Xiaomi Redmi 4 on Android 6.0.1 MMB29M
• If you used a released version, what is the version number? 0.7.1

OTHER:

Any additional notes, comments, tips, tricks, gifs, suggestions, poetry, recipes, jokes

If you are able to record the log output from tangram-es, please attach it as a text file or share it using a site like https://hastebin.com/

Tangram play https://mapzen.com/tangram/play/?#18.00000/49.27798/19.98151

View in mobile:

[matteblair]

Hey @matkoniecz, A+ issue reporting!

Short answer:

Replace all_walking_networks with walking_network and it will work as expected.

Long answer:

The all_walking_networks tag is one of a small set of tags in Mapzen tiles that evidently contain a list as their value (docs: https://mapzen.com/documentation/vector-tiles/layers/#roads-transportation). This is trouble, for two reasons:

1. As the documentation notes, list values cannot be encoded in MVT features, which means that if you change your data source format to MVT, filters using these tags will suddenly stop working.

2. In Tangram ES we decode all supported tile data formats into a common structure, which does not support lists as tag values because MVT can't encode them!

What happened in this particular instance was that Tangram ES encountered a list tag for all_walking_networks and couldn't do anything with it, so the tag was ignored. Then the filter checking for that tag correctly determined that the decoded feature didn't have the all_walking_networks tag and excluded it from the layer.

walking_network, on the other hand, has a single string value, so everything will work as expected.

@nvkelso Are there many feature tags with list values like this? It seems like a Bad Thing to provide tags in some formats that are absent in others, for the reasons I outlined above.

[matkoniecz]

@matteblair Thanks, it solved my problem!

I will keep the issue open as it appears that discussion is not finished.

[nvkelso]

Yes, there are a number of properties like this:

roads layer lists:

• all_networks
• all_shield_texts
• all_walking_networks
• all_walking_shield_texts
• all_bicycle_networks
• all_bicycle_shield_texts
• all_bus_networks
• all_bus_shield_texts

Paired with some single props &/or booleans to make life easier:

• network and shield_text
• walking_network and walking_shield_text
• bicycle_network and bicycle_shield_text
• bus_network and bus_shield_text
• is_bicycle_related
• is_bus_route

pois layer lists:

Each station has several (optional) lists of routes per transport type:

• train_routes a list of train routes, generally above-ground and commuter or inter-city “heavy” rail.
• subway_routes a list of subway or underground routes, generally underground commuter rail.
• light_rail_routes a list of light rail or rapid-transit passenger train routes.
• tram_routes a list of tram routes.

Paired with some booleans:

• is_* a set of boolean flags indicating whether this station has any routes of the given type. These are, corresponding to the above *_routes. This is provided as a convenience for styling:
  • is_train
  • is_subway
  • is_light_rail
  • is_tram

[nvkelso]

The lists are there because in GeoJSON and TopoJSON they are allowed structures, and Mapzen basemap styles we generally work around the problem by relying on the single props version &/or booleans. The exception to this is transit stations who's styling suffers with MVT versus it's original TopoJSON source.

A design case we've also allowed for in the Tilezen tiles are so-called "multi-shields" where a single road has multiple designated routes passing thru it and each route should get a shield. This is optional for roads, but common for bus routes. Tangram doesn't currently support this case, but renderers like Mapnik do.

The recommendation talking with Mapbox folks is to stringify complex JSON properties on writing to MVT format, and then expand those on read of the tile.

It sounds like Tangram JS already supports GeoJSON and TopoJSON complex properties now for free, but Tangram ES would need to grow support for that. I've filed #1617

Both Tangram JS and ES would need to grow support for un-stringifying complex properties in MVT. I've filed #1618 for ES and tangrams/tangram#581 for JS.

I'm closing this issue in favor of the other issues I've opened.

[nvkelso]

@matkoniecz I'll also note your YAML can be reconfigured a bit to remove lines:

        draw:
            lines:
                order: 1100
                color: green
                width: [[15, 0], [16, 3m]]        # I'm not sure how this will behave, it may be better to say 0px
                cap: round
        walking_routes:
            filter: {all_walking_networks: true}
            draw:
                lines:
                    order: 1100                   # not needed, duplicate of inherited value
                    color: red
                    width: [[1, 4px], [16, 3m]]   # needed since the size is different
                    cap: round                    # not needed, duplicate of inherited value