refill-style.yaml

# Refill provides a high contrast, black & white basemap useful for data visualization.
# Give OpenStreetMap data a professional basemap skin using the Tangram graphics library
# and Mapzen's versatile Vector Tiles.
#
# Refill is a modern GL take on Geraldine's work on Toner for Stamen as part of their
# great CityTracking project. Please use and adapt the open source scene file in
# your own projects!
#
# Authors: Geraldine Sarmiento, Nathaniel V. Kelso
# Read more: https://github.com/tangrams/refill-style
#

import:
    - themes/refill-icons.yaml
    - themes/color-black.yaml
    - themes/label-5.yaml

global:
    # Sign up for a Mapzen API key to enjoy higher rate limits
    # https://mapzen.com/documentation/overview/#developer-accounts-and-api-keys
    sdk_api_key: ''     # set this value to your Mapzen API key

    #ux/ui
    ux_language: false             # l10n language code, trusting OSM in v0.10 tiles, fixed in v1.0 tiles
    ux_language_fallback: false    # l10n language code, trusting OSM in v0.10 tiles, fixed in v1.0 tiles
    ux_language_text_source: |
        function() {
            // if a ux_langauge has been defined use that, else if there is feature name in the fallback_ux_language then use that, else use the feature's default name in the local language
            return (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature.name;
        }
    ux_language_text_source_left: |
        function() {
            // if a ux_langauge has been defined use that, else if there is feature name in the fallback_ux_language then use that, else use the feature's default name in the local language
            return (global.ux_language && feature['name:left:'+global.ux_language]) || (global.ux_language_fallback && feature['name:left:'+global.ux_language_fallback]) || feature['name:left'];
        }
    ux_language_text_source_right: |
        function() {
            // if a ux_langauge has been defined use that, else if there is feature name in the fallback_ux_language then use that, else use the feature's default name in the local language
            return (global.ux_language && feature['name:right:'+global.ux_language]) || (global.ux_language_fallback && feature['name:right:'+global.ux_language_fallback]) || feature['name:right'];
        }
    ux_language_text_source_boundary_lines_left_right:
        left: global.ux_language_text_source_left
        right: global.ux_language_text_source_right
    ux_language_text_source_boundary_lines: |
        function() {
           var right = (global.ux_language && feature['name:right:'+global.ux_language]) || (global.ux_language_fallback && feature['name:right:'+global.ux_language_fallback]) || feature['name:right'];
           var left = (global.ux_language && feature['name:left:'+global.ux_language]) || (global.ux_language_fallback && feature['name:left:'+global.ux_language_fallback]) || feature['name:left'];
           if( right && left ) {
               //if( right.includes(' ') || left.includes(' ') ) {
                   return left + " - " + right;
               //} else {
               //    return right + '\n' + left;
               //}
           } else {
               return (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature.name;
           }
        }
    ux_language_text_source_short: |
        function() {
            return (global.ux_language && feature['name:short:'+global.ux_language]) || (global.ux_language_fallback && feature['name:short:'+global.ux_language_fallback]) || feature['name:short'];
        }
    ux_language_text_source_short_proxy_name: |
        function() {
            var name  = (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature['name'] || '';
            var short = (global.ux_language && feature['name:short:'+global.ux_language]) || (global.ux_language_fallback && feature['name:short:'+global.ux_language_fallback]) || feature['name:short'];
            return short ? name : '';
        }
    ux_language_text_source_abbreviation: |
        function() {
            var name  = (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature['name'] || '';
            var abbrev = (global.ux_language && feature['name:abbreviation:'+global.ux_language]) || (global.ux_language_fallback && feature['name:abbreviation:'+global.ux_language_fallback]) || feature['name:abbreviation'];
            return abbrev || name;
        }
    ux_language_text_source_iata: |
        function() {
            var name = (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature['name'];
            if(feature.iata) {
                if (name) {
                    return name + ' (' + feature.iata + ')';
                }
                else {
                    return feature.iata;
                }
            } else {
                return name;
            }
        }
    ux_language_text_source_ocean: |
        function() {
            var name = (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature['name'] || '';
            name = name.split(' ').join('\n');
            return name.split('').join('  ');
        }
    ux_language_text_source_sea: |
        function() {
            var name = (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature['name'] || '';
            name = name.split(' ').join('\n');
            return name.split('').join(' ');
        }
    ux_language_text_source_continent_stacked_only: |
        function() {
            var name = (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature['name'] || '';
            return name.split(' ').join('\n');
        }
    ux_language_text_source_continent: |
        function() {
            var name = (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature['name'] || '';
            name = name.split(' ').join('\n');
            return name.split('').join(' ');
        }
    ux_language_text_source_road_ref_and_name: |
        function() {
            // if a ux_langauge has been defined use that, else if there is feature name in the fallback_ux_language then use that, else use the feature's default name in the local language
            return (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature.name;

            /*
            var name = (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature['name'];
            if(feature.ref && name) {
                return (feature.ref + ' ' + name);
            } else {
                return name;
            }
            */
        }
    ux_language_text_source_road_ref_and_name_short: |
        function() {
            // if a ux_langauge has been defined use that, else if there is feature name in the fallback_ux_language then use that, else use the feature's default name in the local language
            return (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature.name;

            /*
            var name = (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature['name'];
            if (feature.ref && (feature.ref.length < 6) && name) {
                return feature.ref + ' ' + name;
            } else {
                return name;
            }
            */
        }
    ux_language_text_source_piste_advanced: |
        function() {
            var name = (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature['name'];
            return name ? ('◆ ' + name) : '◆';
        }
    ux_language_text_source_piste_expert: |
        function() {
            var name = (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature['name'];
            return name ? ('◆◆ ' + name) : '◆◆';
        }
    ux_language_text_source_building_and_address: |
        function() {
            var name = (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature['name'];
            if (name && feature.addr_housenumber) {
                return name + '\n' + feature.addr_housenumber;
            } else {
                return name;
            }
        }

    # To facilitate data visualizations several recommended sort orders are provided
    #
    # Your classic raster map overlay.
    # Over all line and polygon features.
    # Under map labels (icons and text), under UI elements
    # (like routeline and search result pins).
    sdk_order_over_everything_but_text_0: 490
    sdk_order_over_everything_but_text_1: 491
    sdk_order_over_everything_but_text_2: 492
    sdk_order_over_everything_but_text_3: 493
    sdk_order_over_everything_but_text_4: 494
    sdk_order_over_everything_but_text_5: 495
    sdk_order_over_everything_but_text_6: 496
    sdk_order_over_everything_but_text_7: 497
    sdk_order_over_everything_but_text_8: 498
    sdk_order_over_everything_but_text_9: 499
    #
    # Your classic "underlay"
    # Under roads. Above borders, water, landuse, and earth.
    sdk_order_under_roads_0: 290
    sdk_order_under_roads_1: 291
    sdk_order_under_roads_2: 292
    sdk_order_under_roads_3: 293
    sdk_order_under_roads_4: 294
    sdk_order_under_roads_5: 295
    sdk_order_under_roads_6: 296
    sdk_order_under_roads_7: 297
    sdk_order_under_roads_8: 298
    sdk_order_under_roads_9: 299
    #
    # Under water.
    # Above earth and most landuse.
    sdk_order_under_water_0: 190
    sdk_order_under_water_1: 191
    sdk_order_under_water_2: 192
    sdk_order_under_water_3: 193
    sdk_order_under_water_4: 194
    sdk_order_under_water_5: 195
    sdk_order_under_water_6: 196
    sdk_order_under_water_7: 197
    sdk_order_under_water_8: 198
    sdk_order_under_water_9: 199
    #
    # Under everything.
    # Tip: disable earth layer.
    sdk_order_under_everything_0: 0
    sdk_order_under_everything_1: 1
    sdk_order_under_everything_2: 2
    sdk_order_under_everything_3: 3
    sdk_order_under_everything_4: 4
    sdk_order_under_everything_5: 5
    sdk_order_under_everything_6: 6
    sdk_order_under_everything_7: 7
    sdk_order_under_everything_8: 8
    sdk_order_under_everything_9: 9
    #
    # TRANSIT OVERLAY
    # should default to "auto", with SDK overriding it to true or false,
    # or app logic sets other booleans that triggers auto behavior later
    sdk_transit_overlay: false
    #
    # BATHYMETRY
    # Show relief shading under water
    # should default to "false", with SDK overriding it to true or false,
    sdk_bathymetry: false
    #
    # COASTLINE
    # Show coastline shader
    # should default to "true", with SDK overriding it to true or false,
    sdk_coastline: true
    #
    # SHIELDS
    sdk_shield_color: black
    sdk_shield_text_color: white
    #
    # enable interactivity for key features
    sdk_interactive: true
    #
    # default order for basemap features
    feature_order: function() { return feature.sort_rank; }
    feature_order_down_1: function() { return feature.sort_rank - 1; }
    #
    # areas:
    sdk_building_extrude: true            # building extrusion toggle
    building_extrude_height: |              # building extrude height logic
        function() { return feature.height || 20; }

    # labels:
    text_font_family:      'Open Sans'            # branding in asperational Unicode, yo (or Helvetica)


textures:
    building-grid:
        url: images/building-grid.gif
        filtering: mipmap

sources:
    mapzen:
        type: MVT #GeoJSON, MVT, TopoJSON
        # prod
        url:  https://tile.nextzen.org/tilezen/vector/v1/512/all/{z}/{x}/{y}.mvt
        # dev
        #url: https://dev-tile.nextzen.org/tilezen/vector/v1/512/all/{z}/{x}/{y}.mvt
        url_params:
            api_key: global.sdk_api_key
        tile_size: 512
        max_zoom: 15
    normals: # normals
        type: Raster
        # prod
        url: https://tile.nextzen.org/tilezen/terrain/v1/512/normal/{z}/{x}/{y}.png
        url_params:
            api_key: global.sdk_api_key
        tile_size: 512
        max_zoom: 14

    # # Only enable this for local debug, should not be enabled for prod (app inserts these at runtime)
    # # These are all in San Francisco, California
    # #
    # # Current location gem
    # mz_current_location:
    #    type: GeoJSON
    #    url: https://gist.githubusercontent.com/anonymous/9e9588228b0a604264a2/raw/b28be49bea0b7feb859eb65b588c28e9fee5ae2c/map.geojson
    # # Route line
    # mz_route_line:
    #    type: GeoJSON
    #    # sf to ny
    #    #url: https://gist.githubusercontent.com/anonymous/30c6c1a75c168d91d90c/raw/92bfe55e622766d250b1f2f5d17bdc7c26acb956/map.geojson
    #    # local sf trip
    #    url: https://gist.githubusercontent.com/anonymous/9a610ebda6fe4be7bccc/raw/8d217e43f2412d48d01534ba115f1e42dac72e68/map.geojson
    # # Transit route line
    # mz_route_line_transit:
    #    type: GeoJSON
    #    url: https://gist.githubusercontent.com/anonymous/71ae88cbc6d62c4d141ecd6a61060050/raw/2254bbc18243f5dc609e663a580c9412a7447936/map.geojson
    # # Pin at start of route
    # mz_route_start:
    #    type: GeoJSON
    #    url: https://gist.githubusercontent.com/anonymous/5262969cb7549ea69221/raw/be03f233fa323d9b5cf50ef1d8e89a1faa3750f1/map.geojson
    # # Pin at end of route
    # mz_route_destination:
    #    type: GeoJSON
    #    url: https://gist.githubusercontent.com/anonymous/dbae9635dfe46796490e/raw/df55c318635a7d91b309ed40754d4738a292fd38/map.geojson
    # # Arrow for current route location
    # mz_route_location:
    #    type: GeoJSON
    #    url: https://gist.githubusercontent.com/anonymous/36613092be6e2aa004fd/raw/f753d13069425199e1dea1b449ef67d723f6510e/map.geojson
    # # Dots for transit stops in route preview
    # mz_route_transit_stop:
    #    type: GeoJSON
    #    url: https://gist.githubusercontent.com/anonymous/b9f16bca4a804f50faf71277d52ee4ab/raw/db13e4e765fa1ac8844b8ba02f4a0f66fe772907/map.geojson
    # # Pins showing search result locations
    # mz_search_result:
    #    type: GeoJSON
    #    url: https://gist.githubusercontent.com/anonymous/57dc09eeb120919f76de/raw/43426217da3c2bae0522dc4257aaa61e4df3981e/map.geojson
    # # Default point styling (SDK)
    # mz_default_point:
    #    type: GeoJSON
    #    url: https://gist.githubusercontent.com/anonymous/16324c771edfce45be0721390389b878/raw/7dbaebf17da7da8562e6c6f8768bc8cff83efa88/map.geojson
    # # Default shield styling (SDK)
    # mz_default_shield:
    #    type: GeoJSON
    #    url: https://gist.githubusercontent.com/anonymous/5a789f6bd8b51b5693ba9cd57a767aa1/raw/d4523a6c9deebca125298c31085958262caa1ecd/map.geojson
    # # Default line styling (SDK)
    # mz_default_line:
    #    type: GeoJSON
    #    url: https://gist.githubusercontent.com/anonymous/26f4e8b6b34b2617b5d5533d89decb39/raw/df8e180ab4f7f19448014dccc4a755f7cfa20003/map.geojson
    # # Default polygon styling (SDK)
    # mz_default_polygon:
    #    type: GeoJSON
    #    url: https://gist.githubusercontent.com/anonymous/88235c795bb44b8c45150bdd5561f947/raw/71d4fab97b6513833bf1a589167119e6169ef86d/map.geojson

cameras:
    isometric:
        type: isometric

styles:

##### LIBRARY OF FUNCTIONS
#    SPACE functions
    space-tile:
        shaders:
            blocks:
                global: |
                    // Variant to be add to both vertex and fragments shaders
                    varying vec3 v_pos;
                    //
                    // Get the coordinates in tile space
                    // ================================
                    vec2 getTileCoords() {
                        return fract(v_pos.xy);
                    }

                position: |
                    // Normalize the attribute position of a vertex
                    v_pos = modelPosition().xyz;
    space-constant:
        shaders:
            blocks:
                global: |
                    // Get the constant coordinates (glitches on zooms)
                    // ================================
                    vec2 getConstantCoords () {
                        #ifdef TANGRAM_FRAGMENT_SHADER
                        const float pixel_scale = 695.;
                        float meter_pixels = u_meters_per_pixel / u_device_pixel_ratio;
                        vec2 st = gl_FragCoord.xy/pixel_scale;
                        const float dot_wrap = 1000.;
                        st += mod(u_map_position.xy / meter_pixels, dot_wrap)/pixel_scale;
                        return st;
                        #else
                        return vec2(0.0,0.0);
                        #endif
                    }
#    TILING functions
    tiling-tile:
        shaders:
            blocks:
                global: |
                    // Repeats a coordinate space (st) in diferent tiles
                    // ================================
                    vec2 tile(vec2 st, float zoom){
                        st *= zoom;
                        return fract(st);
                    }
    tiling-brick:
        shaders:
            blocks:
                global: |
                    // Repeats a coordinate space (st) in diferent brick-like tiles
                    // ================================
                    vec2 brick(vec2 st, float zoom){
                        st *= zoom;
                        // Here is where the offset is happening
                        st.x += step(1., mod(st.y, 2.0)) * 0.5;
                        return fract(st);
                    }
    tiling-mirror:
        shaders:
            blocks:
                global: |
                    // Mirror the coordinate space
                    // ================================
                    vec2 mirror(vec2 _st, vec2 _zoom){
                        _st *= _zoom;
                        if (fract(_st.y * 0.5) > 0.5){
                            _st.x = _st.x + 0.5;
                            _st.y = 1.0 - _st.y;
                        }
                        return fract(_st);
                    }
#    Usefull functions
    functions-aastep:
        shaders:
            extensions: OES_standard_derivatives
            blocks:
                global: |
                    // AntiAliased Step function
                    //=============================
                    float aastep(float threshold, float value) {
                        #ifdef TANGRAM_FRAGMENT_SHADER
                            #ifdef TANGRAM_EXTENSION_OES_standard_derivatives
                                float afwidth = length(vec2(dFdx(value), dFdy(value))) * 0.70710678118654757;
                                return smoothstep(threshold-afwidth, threshold+afwidth, value);
                            #else
                                return step(threshold, value);
                            #endif
                        #else
                            return step(threshold, value);
                        #endif
                    }
#    Generative functions
    generative-random:
        shaders:
            blocks:
                global: |
                    // 1D Random for 1 and 2 dimentions
                    // ================================
                    float random(float x) { return fract(sin(x)*43758.5453);}
                    float random(vec2 p) { return fract(1e4 * sin(17.0 * p.x + p.y * 0.1) * (0.1 + abs(sin(p.y * 13.0 + p.x)))); }
                    float random(vec3 p) { return fract(sin(dot(p.xyz, vec3(70.9898,78.233,32.4355)))* 43758.5453123); }
                    //
                    // 2D Random for 2 dimentions
                    // ================================
                    vec2 random2 (vec2 xy) { return fract(sin(vec2(dot(xy,vec2(127.1,311.7)),dot(xy,vec2(269.5,183.3))))*43758.5453); }
                    //
                    // 3D Random for 2 dimentions
                    // ================================
                    vec3 random3 (vec2 xy) { return fract(sin(vec3( dot(xy,vec2(127.1,311.7)), dot(xy,vec2(269.5,183.3)), dot(xy,vec2(419.2,371.9)) ))*43758.5453); }
                    vec3 random3 (vec3 c) {
                        float j = 4096.0*sin(dot(c,vec3(17.0, 59.4, 15.0)));
                        vec3 r;
                        r.z = fract(512.0*j);
                        j *= .125;
                        r.x = fract(512.0*j);
                        j *= .125;
                        r.y = fract(512.0*j);
                        return r-0.5;
                    }
#    Drawing Shapes functions
    shapes-circle:
        mix: functions-aastep
        shaders:
            defines:
                PI: 3.14159265358979323846
            blocks:
                global: |
                    // get distance field of a Circle
                    // ================================
                    float circleDF (vec2 st) {
                        return dot(st,st);
                    }
                    //
                    // Draw a circle in the middle of the ST space
                    // ================================
                    float circle (vec2 st, float radius) {
                        return 1.-aastep(radius, circleDF(st-vec2(0.5))*PI);
                    }
    shapes-rect:
        shaders:
            blocks:
                global: |
                    // get distance field of a rectangle in the center
                    // ================================
                    float rectDF(vec2 st, vec2 size) {
                        //float aspect = u_resolution.x/u_resolution.y;
                        st = st*2.-1.;
                        //st.x *= aspect;
                        return length(max(abs(st)-size,.0));
                    }
                    float rectDF(vec2 st, float size) {
                        //float aspect = u_resolution.x/u_resolution.y;
                        st = st*2.-1.;
                        //st.x *= aspect;
                        return length(max(abs(st)-size,.0));
                    }

                    // Draw a round corners rectangle in the center
                    // ================================
                    float rect(vec2 st, vec2 size, float radio) {
                        radio = max(.000001, radio);
                        return 1.0-step(radio, rectDF(st, size-radio));
                    }

                    float rect(vec2 st, float size, float radio) {
                        return rect(st,vec2(size),radio);
                    }

                    // Draw a rectangle in the center
                    // ================================
                    float rect(vec2 st, vec2 size){
                        size = .25-size*.125;
                        vec2 uv = step(size,st*(1.0-st));
                        return (uv.x*uv.y);
                    }

                    float rect(vec2 st, float size){
                        return rect(st,vec2(size));
                    }
#    Patterns compositions functions
    patterns-stripes:
        mix: functions-aastep
        shaders:
            defines:
                PI: 3.14159265358979323846
            blocks:
                global: |
                    // Return a distance function of stripes
                    float stripesDF (vec2 st) {
                        return abs(sin(st.y*PI));
                    }

                    // Adjustable width stripes
                    float stripes (vec2 st, float width) {
                        return aastep(width,stripesDF(st));
                    }

                    // Faster optimisation of diagonal stripes
                    float diagonalStripes (vec2 st) {
                        vec2 i_st = floor(st);
                        vec2 f_st = fract(st);
                        if (mod(i_st.y,2.) - mod(i_st.x,2.) == 0.) {
                            return 1.0 - aastep(f_st.x,f_st.y);
                        } else {
                            return aastep(f_st.x,f_st.y);
                        }
                    }
    dots-honeycomb:
        mix: [space-tile, tiling-brick, shapes-circle]
        shaders:
            blocks:
                global: |
                    // Interpolated dot patern between zooms attached to tile coords
                    float TileDots(float scale, float size) {
                        // Beginning of the transition
                        vec2 IN = brick(getTileCoords()*scale,2.);
                        float A = circleDF(vec2(0.5)-IN)*1.8;
                        //
                        // If over 18. add an end B to transition with
                        float d = 0.0;
                        if (u_map_position.z < 18.) {
                            vec2 OUT = fract(getTileCoords()*scale*2.);
                            float B = circleDF(vec2(0.25)-OUT)*5.;
                            B = min(B, circleDF(vec2(0.75,0.25)-OUT)*5.);
                            B = min(B, circleDF(vec2(0.5,0.75)-OUT)*5.);
                            B = min(B, circleDF(vec2(0.,0.75)-OUT)*5.);
                            B = min(B, circleDF(vec2(1.,0.75)-OUT)*5.);
                            d = mix(A, B, pow(fract(u_map_position.z),10.));
                        } else {
                            d = A;
                        }
                        //
                        // Use the antialias step to make a shape from the DF
                        return aastep(size,d);;
                    }
##### ACTUAL STYLES
    pixel-pattern-light:
        mix: [space-tile, generative-random]
        base: polygons
        shaders:
            uniforms:
                u_tint: global.ultralight_color
            blocks:
                filter: |
                    vec3 pos = vec3(getTileCoords()*130.0,1.0);
                    color.rgb = u_tint * vec3(random(abs(floor(pos)))+0.925);

    pixel-pattern-bright:
        mix: [space-tile, generative-random]
        base: polygons
        shaders:
            uniforms:
                u_tint: global.lightest_color
            blocks:
                filter: |
                    vec3 pos = vec3(getTileCoords()*180.0,1.0);
                    color.rgb = vec3(random(abs(floor(pos)))+0.950);
                    color.rgb *= u_tint;

    waves:
        base: polygons
        mix: [space-constant, patterns-stripes]
        shaders:
            uniforms:
                u_lighter: global.lighter_color
                u_lightest: global.lightest_color
            blocks:
                global: |
                    float stripes2(vec2 st){
                        return step(.3,1.0-smoothstep(.5,1.,abs(sin(st.y*3.14159265358))));
                    }
                filter: |
                    vec2 st = getConstantCoords();

                    const float wave_width = 30.0;
                    const float wave_height = .01;
                    st.y += sin(st.x*wave_width)*wave_height;

                    // gradient
                    color.rgb = mix(u_lighter, color.rgb, gl_FragCoord.x / u_resolution.x);
                    color = mix(color,vec4(u_lightest,1.0),stripes(st*92.,.5))*1.0;

    coast:
        base: lines
        mix: [space-constant]
        blend: overlay
        shaders:
            defines:
                OPACITY: 0.8
            blocks:
                global: |
                    mat2 rotate2d(float angle){
                        return mat2(cos(angle),-sin(angle),
                                    sin(angle),cos(angle));
                    }

                    float stripes(vec2 st){
                        st = rotate2d(3.14159265358*-0.25 )*st;
                        //return step(.9,1.0-smoothstep(.5,1.,abs(sin(st.x*3.14159265358))));
                        return step(.75,1.0-smoothstep(.75,1.,abs(sin(st.x*3.14159265358)))); // more spaced out stripes?
                    }
                color: |
                    vec2 st = getConstantCoords();
                    color = mix(vec4(color.rgb, 0.4), vec4(0.0), stripes(st*130.))*OPACITY; // transparent stripes

    riverlines:
        base: lines
        mix: [space-constant]
        blend: opaque
        shaders:
            uniforms:
                u_tint: global.light_color
                u_fill: global.white_color
            blocks:
                global: |
                    mat2 rotate2d(float angle){
                        return mat2(cos(angle),-sin(angle),
                                    sin(angle),cos(angle));
                    }

                    float stripes(vec2 st){
                        st = rotate2d(3.14159265358*-0.25 )*st;
                        return step(.75,1.0-smoothstep(.75,1.,abs(sin(st.x*3.14159265358)))); // more spaced out stripes?
                    }
                color: |
                    vec2 st = getConstantCoords();
                    color = mix(vec4(u_tint.rgb, 0.9), vec4(u_fill.rgb, 1.0), stripes(st*130.));

    dots:
        mix: [space-tile, tiling-tile, shapes-circle]
        base: polygons
        shaders:
            defines:
                PATTERN_SCALE: 50.0
                DOT_SIZE: .1
                COLOR1: vec3(1.00,1.00,1.00)
                COLOR2: color.rgb
            blocks:
                color: |
                    color.rgb = mix(COLOR1, COLOR2, circle(tile(getTileCoords(),PATTERN_SCALE), DOT_SIZE));

    dots-rev-grid:
        mix: [space-tile, tiling-tile, shapes-circle]
        base: polygons
        shaders:
            defines:
                PATTERN_SCALE: 60.0
                DOT_SIZE: .4
                COLOR1: vec3(1.00,1.00,1.00)
                COLOR2: color.rgb
            blocks:
                color: |
                    color.rgb = mix(COLOR2, COLOR1, circle(tile(getTileCoords(),PATTERN_SCALE), DOT_SIZE));

    medium-dots:
        mix: dots
        base: polygons
        shaders:
            defines:
                PATTERN_SCALE: 60.0
                DOT_SIZE: .25
                COLOR1: vec3(1.00,1.00,1.00)
                COLOR2: color.rgb

    tiny-dots:
        mix: dots
        shaders:
            defines:
                PATTERN_SCALE: 70.0
                DOT_SIZE: .125
                COLOR1: vec3(1.00,1.00,1.00)
                COLOR2: color.rgb

    dots-rev:
        base: polygons
        mix: dots-honeycomb
        shaders:
            defines:
                COLOR1: vec3(1.00,1.00,1.00)
                PATTERN_SCALE: 35.0
            blocks:
                color: |
                    color.rgb = mix(COLOR1, color.rgb, TileDots(PATTERN_SCALE, 0.31));

    horizontal-bars:
        base: polygons
        mix: [space-constant, shapes-rect]
        texcoords: false
        shaders:
            defines:
                COLOR1: vec3(1.0,1.0,1.0)
            blocks:
                global: |
                    float bar(in vec2 st, float size){
                        return  rect(st, vec2(size*0.90,size*0.2));
                    }
                filter: |
                    vec2 pos = getConstantCoords()*50.0;
                    float pct = clamp(bar(fract(pos),0.5),0.0,1.0);
                    color.rgb = mix(COLOR1,color.rgb,pct);

    horizontal-bars-rev:
        base: polygons
        mix: [space-constant, shapes-rect]
        texcoords: false
        shaders:
            defines:
                COLOR1: vec3(1.0,1.0,1.0)
                PATTERN_SCALE: 50.0
            blocks:
                global: |
                    float bar(in vec2 st, float size){
                        return rect(st, vec2(size*1.05,size*0.5));
                    }
                filter: |
                    vec2 pos = getConstantCoords()*PATTERN_SCALE;
                    float pct = clamp(bar(fract(pos),0.5),0.0,1.0);
                    color.rgb = mix(color.rgb,COLOR1,pct);

    scale-buildings:
        shaders:
            blocks:
                position: |
                    // scale buildings based on zoom
                    float zoom = u_map_position.z;
                    float min = .1;       // minimum building scale
                    float midpoint = 16.; // middle of zoom range
                    float inspeed = .1;   // number of zooms to scale buildings up
                    float outspeed = 2.;  // number of zooms to scale buildings back down
                    float e = 0.;

                    if (zoom >= midpoint) {
                        e = (zoom - midpoint) / (outspeed * .2);
                    } else {
                        e = abs(zoom - midpoint) / inspeed;
                    }
                    position.z *= ((1. - min) / (1. + (exp(e)))) + min;

    building-grid:
        base: polygons
        lighting: false
        mix: [scale-buildings]
        texcoords: true
        shaders:
            uniforms:
                u_tex_grid: building-grid
                u_grid_color: global.black_color
            defines:
                WALL_TINT: vec3(1., 3., .993)
            blocks:
                color: |
                    // If it's a wall
                    color.rgb = mix(mix(color.rgb, u_grid_color.rgb, texture2D(u_tex_grid, v_texcoord).a),
                                    color.rgb,
                                    step(.5,dot(vec3(0., 0., 1.), worldNormal())));

    building-lines:
        base: lines
        mix: scale-buildings
        texcoords: true
    lines_transparent:
        base: lines
        blend: overlay
    outline_transparent:
        base: lines
        blend: overlay
    polygons_transparent:
        base: polygons
        blend: overlay
    text-blend-order:
        base: text
        blend_order: 1
    ux-lines-overlay:
        base: lines
        blend: overlay
        blend_order: 0
    ux-transit-line-overlay:
        base: lines
        blend: overlay
        blend_order: 0
    ux-location-gem-overlay:
        base: points
        texture: mapzen_icon_library
        blend: overlay
        blend_order: 2
    ux-icons-overlay:
        base: points
        texture: mapzen_icon_library
        blend: overlay
        blend_order: 3
    sdk-point-overlay:
        base: points
        texture: mapzen_icon_library
        blend: overlay
        blend_order: 3
    sdk-shield-overlay:
        base: points
        texture: mapzen_icon_library
        blend: overlay
        blend_order: 3
    sdk-line-overlay:
        base: lines
        blend: overlay
        blend_order: 0
    sdk-polygon-overlay:
        base: polygons
        blend: overlay
        blend_order: 0

scene:
    background:
        color: global.white_color

fonts:
    Open Sans:
        - weight: 300 # Light
          url: fonts/OpenSans-Light.woff
        - weight: normal # Regular
          url: fonts/OpenSans-Regular.woff
        - weight: normal # Regular
          style: italic
          url: fonts/OpenSans-Italic.woff
        - weight: 600 # Semi Bold
          url: fonts/OpenSans-Semibold.woff
        - weight: 600 # Semi Bold
          style: italic
          url: fonts/OpenSans-SemiboldItalic.woff
        - weight: bold
          url: fonts/OpenSans-Bold.woff
    Montserrat:
        - weight: normal
          #url: https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff
          url: fonts/Montserrat-Regular.woff
        - weight: 500
          #url: https://fonts.gstatic.com/s/montserrat/v10/BYPM-GE291ZjIXBWrtCweqLy3K7m9xj_O5xwN3SdQNs.woff
          url: fonts/Montserrat-Medium.woff
        - weight: 700
          #url: https://fonts.gstatic.com/s/montserrat/v10/IQHow_FEYlDC4Gzy_m8fcnbFhgvWbfSbdVg11QabG8w.woff
          url: fonts/Montserrat-Bold.woff


layers:
    # Map overlays for styling the server response (using special source layer names) for route line, current location, and search result pins
    mz_route_line:
        data: { source: mz_route_line }
        draw:
            ux-lines-overlay:
                interactive: global.sdk_interactive
                color: global.route_line
                order: 500
                width: [[0,3.5px],[5,5px],[9,7px],[10,6px],[11,6px],[13,8px],[14,9px],[15,10px],[16,11px],[17,12px],[18,10px]]
    mz_route_line_transit:
        data: { source: mz_route_line_transit }
        draw:
            ux-transit-line-overlay:
                # each transit route segment could be a different "line" each with it's own color
                # but some transit lines don't define a color, in those cases default to blue
                # and since the color is coming from Transit.land they call it "color" instead of "colour"
                interactive: global.sdk_interactive
                color: function() { return feature.color || '#06a6d4'; }
                order: 500
                width: [[0,3.5px],[5,5px],[9,7px],[10,6px],[11,6px],[13,8px],[14,9px],[15,10px],[16,11px],[17,12px],[18,10px]]
    mz_current_location_gem:
        data: { source: mz_current_location }
        draw:
            ux-location-gem-overlay:
                interactive: global.sdk_interactive
                sprite: ux-current-location
                size: 36px
                collide: false
                transition: { show: { time: 0s }, hide: { time: 0s } }
    mz_route_location:
        data: { source: mz_route_location }
        draw:
            ux-location-gem-overlay:
                interactive: global.sdk_interactive
                sprite: ux-route-arrow
                size: [60px,60px]
                collide: false
                transition: { show: { time: 0s }, hide: { time: 0s } }
    mz_route_start:
        data: { source: mz_route_start }
        draw:
            ux-icons-overlay:
                interactive: global.sdk_interactive
                priority: 1
                sprite: ux-route-start
                size: [36px,46px]
                collide: false
                anchor: top
                transition: { show: { time: 0s }, hide: { time: 0s } }
    mz_route_destination:
        data: { source: mz_route_destination }
        draw:
            ux-icons-overlay:
                interactive: global.sdk_interactive
                priority: 1
                sprite: ux-route-stop
                size: [36px,46px]
                collide: false
                anchor: top
                transition: { show: { time: 0s }, hide: { time: 0s } }
    mz_route_transit_stop:
        data: { source: mz_route_transit_stop }
        draw:
            ux-icons-overlay:
                interactive: global.sdk_interactive
                sprite: ux-transit-stop
                size: [15px,15px]
                collide: false
                transition: { show: { time: 0s }, hide: { time: 0s } }
    mz_search_result:
        data: { source: mz_search_result }
        draw:
            ux-icons-overlay:
                interactive: global.sdk_interactive
                sprite: ux-search-active
                size: [36px,54px]
                collide: false
                anchor: top
                transition: { show: { time: 0s }, hide: { time: 0s } }
        inactive:
            filter: { state: inactive }
            draw:
                ux-icons-overlay:
                    sprite: ux-search-inactive
    mz_dropped_pin:
        data: { source: mz_dropped_pin }
        draw:
            ux-icons-overlay:
                interactive: global.sdk_interactive
                sprite: ux-search-active
                size: [36px,54px]
                collide: false
                anchor: top
                transition: { show: { time: 0s }, hide: { time: 0s } }

    # Used by the SDK to place point, line, and polygon overlays on the map
    mz_default_point:
        data: { source: mz_default_point }
        draw:
            sdk-point-overlay:
                interactive: global.sdk_interactive
                sprite: ux-search-active
                size: [36px,54px]
                collide: false
                anchor: top
                transition: { show: { time: 0s }, hide: { time: 0s } }
    mz_default_shield:
        data: { source: mz_default_shield }
        draw:
            sdk-shield-overlay:
                interactive: global.sdk_interactive
                sprite: |
                    function() {
                        if( feature.ref ) {
                            return ('sdk_shield-' + feature.ref.length + 'char');
                        } else {
                            return ('sdk_shield-' + feature.name.length + 'char');
                        }
                    }
                sprite_default: sdk_shield-1char
                color: global.sdk_shield_color
                collide: false
                transition: { show: { time: 0s }, hide: { time: 0s } }
                text:
                    # offset: [0px, -1px]
                    text_source: |
                        function() {
                            if( feature.ref ) {
                                return feature.ref;
                            } else {
                                return feature.name;
                            }
                        }
                    anchor: center
                    font:
                        family: Montserrat
                        fill: global.sdk_shield_text_color
                        style: bold
                        size: [[7,7px],[12,8px],[16,11px]]

        width_1char:
            filter: |
                function() {
                    if( feature.ref ) {
                        return (feature.ref.length === 1);
                    } else {
                        return (feature.name.length === 1);
                    }
                }
            draw:
                sdk-shield-overlay:
                    size: [[6,[16px,16px]],[13,[18px,18px]],[16,[21px,21px]]]
        width_2char:
            filter: |
                function() {
                    if( feature.ref ) {
                        return (feature.ref.length === 2);
                    } else {
                        return (feature.name.length === 2);
                    }
                }
            draw:
                sdk-shield-overlay:
                    size: [[6,[21px,16px]],[13,[24px,18px]],[16,[28px,21px]]]
        width_3char:
            filter: |
                function() {
                    if( feature.ref ) {
                        return (feature.ref.length === 3);
                    } else {
                        return (feature.name.length === 3);
                    }
                }
            draw:
                sdk-shield-overlay:
                    size: [[6,[27px,16px]],[13,[31px,18px]],[16,[36px,21px]]]
        width_4char:
            filter: |
                function() {
                    if( feature.ref ) {
                        return (feature.ref.length === 4);
                    } else {
                        return (feature.name.length === 4);
                    }
                }
            draw:
                sdk-shield-overlay:
                    size: [[6,[32px,16px]],[13,[36px,18px]],[16,[41px,21px]]]
        width_5char:
            filter: |
                function() {
                    if( feature.ref ) {
                        return (feature.ref.length === 5);
                    } else {
                        return (feature.name.length === 5);
                    }
                }
            draw:
                sdk-shield-overlay:
                    size: [[6,[37px,16px]],[13,[41px,18px]],[16,[48px,21px]]]
        # this is kinda a hack
        width_longggggg:
            filter: |
                function() {
                    if( feature.ref ) {
                        return (feature.ref.length > 5);
                    } else {
                        return (feature.name.length > 5);
                    }
                }
            draw:
                sdk-shield-overlay:
                    visible: false
    mz_default_line:
        data: { source: mz_default_line }
        draw:
            sdk-line-overlay:
                interactive: global.sdk_interactive
                color: '#06a6d4'
                order: 503
                width: 3px
    mz_default_polygon:
        data: { source: mz_default_polygon }
        draw:
            sdk-polygon-overlay:
                interactive: global.sdk_interactive
                color: [0.02,0.65,0.82,0.5]  #'#06b1e2'
                order: 501
            sdk-line-overlay:
                color: '#06a6d4'
                order: 502
                width: 0px

    # Basemap styling
    earth:
        data: { source: mapzen, layer: earth }
        continent:
            filter: { kind: [continent], $zoom: { max: 5 } }
            draw:
                text-blend-order:
                    visible: global.text_visible_continent
                    text_source: global.ux_language_text_source_continent_stacked_only
                    text_wrap: false
                    font:
                        family: global.text_font_family
                        size: [[1, 11px], [3, 14px]]
                        style: italic
                        fill: global.black_color
                        weight: normal
                        transform: uppercase
            continent-spacer:
                filter: { $zoom: { min: 2 } }
                draw:
                    text-blend-order:
                        text_source: global.ux_language_text_source_continent
        island:
            filter: { kind: [archipelago, island, islet] }
            draw:
                text-blend-order:
                    visible: global.text_visible_island
                    text_wrap: 10
                    font:
                        family: global.text_font_family
                        size: 12px
                        style: italic
                        fill: global.black_color
                        weight: normal
                        stroke: { color: global.text_stroke, width: 4px }


    water:
        data: { source: mapzen, layer: water }
        draw:
            polygons:
                style: waves
                visible: false
                order: global.feature_order
                color: [[0, global.lightest_color], [12, global.lighter_color]]

        lakes:
            filter:
                all:
                    - kind: [ocean, lake, water, riverbank, reservoir, swimming_pool]
                any:
                    # limit show smaller landuse areas to higher zooms
                    - { $zoom: [1],  area: { min: 10000000000 } }
                    - { $zoom: [2],  area: { min: 7000000000 } }
                    # some weird natural earth scale set transition
                    - { $zoom: [3],  area: { min: 5000000000 } }
                    - { $zoom: [4],  area: { min: 300000000 } }
                    - { $zoom: [5],  area: { min: 50000000 } }
                    - { $zoom: [6],  area: { min: 50000000 } }
                    - { $zoom: [7],  area: { min: 50000000 } }
                    - { $zoom: [8],  area: { min: 50000000 } }
                    - { $zoom: [9],  area: { min: 15000000 } }
                    - { $zoom: [10], area: { min: 4000000 } }
                    - { $zoom: [11], area: { min: 1000000 } }
                    - { $zoom: [12], area: { min: 250000 } }
                    - { $zoom: [13], area: { min: 150000 } }
                    - { $zoom: [14], area: { min: 40000 } }
                    - { $zoom: { min: 15 } }
            draw:
                polygons:
                    style: waves
                    visible: true
                    color: global.lighter_color

        other-water-areas:
            filter: { not: { kind: [ocean, lake, water, reservoir] }, $zoom: { min: 11 }, area: { min: 100 } }
            draw:
                polygons:
                    style: waves
                    visible: true
                    color: global.lighter_color
        playas:
            filter: { kind: playa }
            draw:
                polygons:
                    style: polygons
                    visible: true
                    order: global.feature_order
                    color: global.playas_color

        water-boundary-ocean:
            enabled: global.sdk_coastline
            filter: { boundary: true, kind: ocean, $zoom: { min: 1 } }
            draw:
                lines:
                    style: coast
                    visible: true
                    order: global.feature_order
                    color: [[1, global.light_color], [6, global.mid_color]]
                    width: [[1, 1px], [20, 10px]]
                    join: round

        water_boundaries-not-ocean:
            enabled: global.sdk_coastline
            filter:
                all:
                    - boundary: true
                    - not: { kind: ocean }
                    - $zoom: { min: 8 }
                any:
                    # limit show smaller landuse areas to higher zooms
                    - { $zoom: [1],  area: { min: 10000000000 } }
                    - { $zoom: [2],  area: { min: 7000000000 } }
                    # some weird natural earth scale set transition
                    - { $zoom: [3],  area: { min: 5000000000 } }
                    - { $zoom: [4],  area: { min: 300000000 } }
                    - { $zoom: [5],  area: { min: 50000000 } }
                    - { $zoom: [6],  area: { min: 50000000 } }
                    - { $zoom: [7],  area: { min: 50000000 } }
                    - { $zoom: [8],  area: { min: 50000000 } }
                    - { $zoom: [9],  area: { min: 15000000 } }
                    - { $zoom: [10], area: { min: 4000000 } }
                    - { $zoom: [11], area: { min: 1000000 } }
                    - { $zoom: [12], area: { min: 250000 } }
                    - { $zoom: [13], area: { min: 150000 } }
                    - { $zoom: [14], area: { min: 40000 } }
                    - { $zoom: { min: 15 } }
            draw:
                lines:
                    style: coast
                    visible: true
                    order: global.feature_order
                    color: [[6, global.lightest_color], [11, global.mid_color]]
                    width: [[6, 0.75px], [10, 1px], [14, 2px], [16, 3px]]
                    join: round
            # do we still need this?
            # early:
            #     filter: { $zoom: { min: 14 } }
            #     draw:
            #         lines:
            #             order: 241
            swimming-pools-early:
                filter: { kind: swimming_pool, $zoom: { max: 19 } }
                draw:
                    lines:
                        style: coast
                        visible: false
            riverbank:
                # river boundaries like the thames in london, la seine in paris
                filter: { kind: riverbank }
                draw:
                    lines:
                        style: coast
                        visible: true
                        color: global.dark_color
                        width: [[9, 0.5px], [15, 2px]]
        river:
            #river center lines, not boundaries for polygons
            filter: { kind: [river,canal,stream,dam,ditch,drain], $zoom: { min: 11 }, not: { is_tunnel: true } }
            draw:
                lines:
                    style: riverlines
                    visible: true
                    order: global.feature_order_down_1
                    color: global.extralight_color
                    width: [[11, 0.5px], [14, 2px], [ 18, 8px]]
                    cap: round
            intermittent:
                filter:
                    any:
                        - intermittent: [true]
                        - kind: drain
                draw:
                    lines:
                        style: coast
                        color: global.extralight_color


        water-area-labels:
            filter:
                all:
                    - name: true
                    - function() { return global.text_visible_water_labels; }
            draw:
                text-blend-order:
                    text_source: global.ux_language_text_source
                    visible: false
                    font:
                        fill: global.black_color
                        family: global.text_font_family
                        weight: normal
            ocean-labels:
                filter:
                    all:
                        - $zoom: { min: 1 }
                        - kind: [ocean]
                draw:
                    text-blend-order:
                        visible: global.text_visible_water_labels
                        text_source: global.ux_language_text_source_ocean
                        text_wrap: false
                        priority: 1
                        font:
                            size: [[1, 7px], [2, 9px], [4, 11px]]
                            transform: uppercase

            sea-labels:
                filter:
                    all:
                        - $zoom: { min: 4 }
                        - kind: [sea]
                draw:
                    text-blend-order:
                        visible: global.text_visible_water_labels
                        text_source: global.ux_language_text_source_sea
                        text_wrap: false
                        priority: 2
                        font:
                            fill: global.dark_color
                            size: [[4, 8px], [6, 10px], [18, 16px]]
                            transform: uppercase
            mostly-lakes:
                filter:
                    all:
                        - $zoom: { min: 3 }
                        - $geometry: point
                        - not: { kind: [riverbank, dock, playa] }
                        - area: true
                    any:
                        # show labels for smaller landuse areas at higher zooms
                        - { $zoom: [3],  area: { min: 100000000000 } }
                        - { $zoom: [4],  area: { min: 50000000000 } }
                        - { $zoom: [5],  area: { min: 10000000000 } }
                        - { $zoom: [6],  area: { min: 1700000000 } }
                        - { $zoom: [7],  area: { min: 425000000 } }
                        - { $zoom: [8],  area: { min: 40000000 } }
                        - { $zoom: [9],  area: { min: 40000000 } }
                        - { $zoom: [10], area: { min: 10000000 } }
                        - { $zoom: [11], area: { min: 1500000 } }
                        - { $zoom: [12], area: { min: 700000 } }
                        - { $zoom: [13], area: { min: 100000 } }
                        - { $zoom: [14], area: { min: 50000 } }
                        - { $zoom: [15], area: { min: 50000 } }
                        - { $zoom: [15], area: { min: 25000} }
                        - { $zoom: [16], area: { min: 1000 } }
                        - { $zoom: { min: 17 } }
                draw:
                    text-blend-order:
                        visible: global.text_visible_water_labels
                        text_wrap: 8
                        font:
                            style: italic
                            size: [[5, 9px], [14, 12px]]

            playa-labels:
                filter:
                    all:
                        - $geometry: point
                        - kind: playa
                        - area: true
                    any:
                        # show labels for smaller landuse areas at higher zooms
                        - { $zoom: { min: 7 },  area: { min: 1500000000 } }
                        - { $zoom: { min: 8 },  area: { min: 200000000 } }
                        - { $zoom: { min: 9 },  area: { min: 100000000 } }
                        - { $zoom: { min: 10 }, area: { min: 100000000 } }
                        - { $zoom: { min: 11 }, area: { min: 10000000 } }
                        - { $zoom: { min: 12 }, area: { min: 2000000 } }
                        - { $zoom: { min: 13 }, area: { min: 1000000 } }
                        - { $zoom: { min: 14 }, area: { min: 500000 } }
                        - { $zoom: { min: 15 }, area: { min: 100000 } }
                        - { $zoom: { min: 15 }, area: { min: 50000 } }
                        - { $zoom: { min: 16 }, area: { min: 20000 } }
                        - { $zoom: { min: 17 } }
                draw:
                    text-blend-order:
                        visible: global.text_visible_water_labels
                        font:
                            fill: global.mid_color
                            style: italic
                            size: 9px
                            stroke: { color: global.text_stroke, width: 3px }

            water-line-labels:
                filter:
                    all:
                        - $geometry: line
                        - kind: [river,canal,stream,dam,ditch,drain]
                        - $zoom: { min: 14 }
                draw:
                    text-blend-order:
                        visible: global.text_visible_water_labels
                        font:
                            style: italic
                            size: [[14, 12px], [17, 14px]]
                not-river-not-stream:
                    filter: { kind: [canal,dam,ditch,drain], $zoom: { max: 16 } }
                    draw:
                        text-blend-order:
                            visible: false
                stream:
                    filter: { kind: [stream], $zoom: { max: 17 } }
                    draw:
                        text-blend-order:
                            visible: false

    transit:
        data: { source: mapzen, layer: transit }
        subway-light-rail:
            filter: { not: { kind: [platform] }, $zoom: { min: 14 } }
            draw:
                lines:
                    order: function() { return feature.sort_rank || 275; }
            railway:
                filter: { kind: [railway,train] }
                draw:
                    lines:
                        color: global.lighter_color
                        width: [[14, 0.5px], [16, 1px], [18, 1px]]
            subway:
                filter: { kind: subway }
                draw:
                    lines:
                        color: global.lighter_color
                        width: [[14, 0.5px], [16, 1px], [18, 1px]]
            light_rail:
                filter: { kind: [light_rail,tram], $zoom: { min: 15 } }
                draw:
                    lines:
                        order: 415
                        color: global.lighter_color
                        width: [[14, 0px], [16, 1px]]
        transit-overlay-rail-lines:
            filter:
                not: { kind: [platform, railway] }
            draw:
                lines:
                    order: 499
                    visible: global.sdk_transit_overlay
                    color: purple
                    width: [[5, 1.5px], [6, 2px], [11, 3px], [18, 4px]]
                    outline:
                        color: [1.00,1.00,1.00,0.8]
                        width: [[7,0px],[8,0.25px],[9,0.5px],[12,1.0px],[13,1.75px],[14,2px]]
            train-sizing-color:
                filter: { kind: train }
                draw:
                    lines:
                        color: purple
                        width: [[5, 1.0px], [6, 1.0px], [7, 1.25px], [11, 2.0px], [13, 2.5px], [18, 3.5px]]
                        outline:
                            width: [[12, 1.0px], [13, 1.75px], [14, 2px]]
                stack-below-other-transit-later-zooms:
                    filter: { $zoom: { min: 9 } }
                    draw:
                        lines:
                            order: 511
            subway-sizing:
                filter: { kind: subway }
                draw:
                    lines:
                        width: [[9, 1px], [11, 2px], [12, 3px], [13, 4px], [15, 5px], [16, 7px], [17, 9px]]
                        outline:
                            #color: [[10,white],[11,black]]
                            width: [[9, 0px], [10, 0.5px], [12, 1.25px], [13, 1.5px], [15, 2px]]
                            #width: [[12,1.5px],[13,2.0px],[14,2.5px]]
            light-rail-and-tram-sizing:
                filter: { kind: [light_rail, tram] }
                draw:
                    lines:
                        width: [[10, 1px], [12, 1.5px], [15, 2px], [18, 3.5px]]
                        outline:
                            #color: [[11,white],[12,black]]
                            width: [[12, 0.25px], [13, 0.5px], [14, 1px], [16, 2px]]
            has-data-color:
                filter: { colour: true }
                draw:
                    lines:
                        order: 510
                        width: [[9, 2px], [11, 3px], [12, 4px]]
                        color: function() { return feature.colour || 'purple'; }
                        #outline:
                            #color: function() { if(feature.colour == 'silver') { return 'black'; } else { return [0.,0.,0.,.1]; } }
                            #width: [[12,1.0px],[13,1.75px],[14,2px]]
                train-with-color:
                    filter: { kind: train }
                    draw:
                        lines:
                            order: 514
                subway-with-color:
                    filter: { kind: subway }
                    draw:
                        lines:
                            order: 513
                light-rail-and-tram-with-color:
                    filter: { kind: [light_rail, tram] }
                    draw:
                        lines:
                            order: 512
            missing-colour:
                filter: { colour: false }
                train-missing-color:
                    filter: { kind: train, colour: false }
                    draw:
                        lines:
                            #width: [[5,1.25px],[6,1.75px],[11,2.0px],[13,2.5px],[18,2.5m]]
                            order: 506
                subway-missing-color:
                    filter: { kind: subway, colour: false }
                    draw:
                        lines:
                            order: 505
                            #outline:
    #                            width: [[12,1.5px],[13,2.0px],[14,2.5px]]
                light-rail-and-tram-missing-color:
                    filter: { kind: [light_rail, tram], colour: false }
                    draw:
                        lines:
                            order: 504
            labels-transit-lines:
                filter:
                    all:
                        - function() { return global.sdk_transit_overlay; }
                        - all:
                            - $zoom: { min: 13 }
                            - ref: true
                draw:
                    mapzen_icon_library:
                        priority: 20
                        # you need to match any custom shield to the vector tile `network` values
                        sprite: function() { return ('sdk_shield-' + feature.ref.length + 'char'); }
                        sprite_default: sdk_shield_5char
                        color: function() { if ( feature.kind === 'train') { return 'purple' } else { return feature.colour || 'purple'; } }
                        # Size is specified below, and limited to 5 char in another filter
                        repeat_group: shields
                        repeat_distance: [[8, 90px], [10, 40px], [13, 30px]]
                        placement: midpoint
                        placement_min_length_ratio:
                            - [8, 0.1]
                            - [9, 0.25]
                            - [10, 0.25]
                            - [11, 0.15]
                            - [12, 1]
                            - [13, 1.50]
                            - [14, 2.0]
                        cull_from_tile: true
    #                    visible: false
                        text:
                            offset: [0px, -0.5px]
                            repeat_distance: 200px
                            anchor: center
                            text_source: function() { if( feature.ref.length < 6 ) { return feature.ref; } else { return ''; } }
                            font:
                                family: Montserrat
                                fill: function() { if(feature.colour == 'yellow') { return '#555'; } else { return 'white'; } }
                                #style: bold
                                weight: 700
                                size: [[7, 7px], [12, 8px], [16, 11px]]
                                # disable the default mapzen_icon_library stroke
                                stroke: { width: 0px }

                width_1char:
                    filter: function() { return (feature.ref.length === 1); }
                    draw:
                        mapzen_icon_library:
                            size: [[6,[16px,16px]],[13,[18px,18px]],[16,[21px,21px]]]
                width_2char:
                    filter: function() { return (feature.ref.length === 2); }
                    draw:
                        mapzen_icon_library:
                            size: [[6,[21px,16px]],[13,[24px,18px]],[16,[28px,21px]]]
                width_3char:
                    filter: function() { return (feature.ref.length === 3); }
                    draw:
                        mapzen_icon_library:
                            size: [[6,[27px,16px]],[13,[31px,18px]],[16,[36px,21px]]]
                width_4char:
                    filter: function() { return (feature.ref.length === 4); }
                    draw:
                        mapzen_icon_library:
                            size: [[6,[32px,16px]],[13,[36px,18px]],[16,[41px,21px]]]
                    # London sucks
                    early:
                        filter: { $zoom: { max: 14 } }
                        draw:
                            mapzen_icon_library:
                                visible: false
                width_5char:
                    filter: function() { return (feature.ref.length === 5); }
                    draw:
                        mapzen_icon_library:
                            size: [[6,[37px,16px]],[13,[41px,18px]],[16,[48px,21px]]]
                    # London sucks
                    early:
                        filter: { $zoom: { max: 14 } }
                        draw:
                            mapzen_icon_library:
                                visible: false
                # this is kinda a hack
                width_longggggg:
                    filter: function() { return (feature.ref.length > 5); }
                    draw:
                        mapzen_icon_library:
                            visible: false

            z19-show-long-route-name:
                    filter:
                        all:
                            - function() { return global.sdk_transit_overlay; }
                            - $zoom: { min: 19 }
                    draw:
                        text:
                            font:
                                fill: global.black_color
                                style: italic
                                stroke: { color: global.text_stroke, width: 3px }
    platforms:
        data: { source: mapzen, layer: transit }
        filter: { kind: platform }
        draw:
            lines_transparent:
                color: global.transparent
                width: 5m
                visible: true
        polygon_geom:
            filter: { $geometry: polygon }
            draw:
                polygons_transparent:
                    color: global.transparent
                    visible: true
                lines_transparent:
                    visible: false
                outline_transparent:
                    color: global.transparent
                    width: [[15, 0px], [16, 0.5px], [17, 1px], [19, 2px]]
        # do we still need this z-order?
        # z-order:
        #     draw:
        #         lines_transparent:
        #             order: function() { if($zoom<17) { return 10; } else { return 100; } }
        #         polygons_transparent:
        #             order: function() { if($zoom<17) { return 10; } else { return 100; } }
        #         outline_transparent:
        #             order: function() { if($zoom<17) { return 11; } else { return 101; } }

# is this still a problem?
#    transit-platforms:
#        data: { source: mapzen, layer: transit }
#        filter: { kind: platform, $zoom: { min: 15 }, $geometry: [polygon,line] }
#        draw:
#            lines:
#                visible: global.sdk_transit_overlay
#                color: '#bc8f96'
#                width: 10m          # something fishy here with the #include syntax in v0.7 tangram?
#                order: 1000         # this selection should sort above basemap, but grey Zinc color still applies
#                outline:
#                    order: 1002
#            polygons:
#                visible: global.sdk_transit_overlay
#                order: 1001
#        polygon_geom:
#            filter: { $geometry: polygon }
#            draw:
#                polygons:
#                    color: '#bc8f96'
#                    outline:
#                        color: '#bc8f96'
#                        width: [[15,0px],[16,0.5px],[17,1px],[19,2px]]
#                lines:
#                    visible: false

    roads:
        data: { source: mapzen, layer: roads }
        draw:
            lines:
                width: 1px
                order: global.feature_order
                # but give them all the same outline
                outline:
                    order: 352
            text-blend-order:
                text_source: global.ux_language_text_source
                visible: false    # labels are enabled by each layer below
                font:
                    family: global.text_font_family
                    weight: normal
                    fill: global.black_color

        arrows:
            # oneway arrows and shields are distinct groups!
            filter: { oneway: yes, shield_text: false, not: { kind: rail }, $zoom: { min: 17 } }
            draw:
                arrows:
                    style: mapzen_icon_library
                    flat: true
                    visible: global.icon_visible_arrows
                    sprite: arrow
                    color: global.midlight_color
                    size: [[17, 6px], [20, 14px]]
                    placement: spaced
                    placement_spacing: [[17, 70px], [20, 175px]]
                    angle: auto
                    text:
                        visible: false

        early:
            filter: { $zoom: { max: 15 } }
            draw:
                lines:
                    outline:
                        order: global.feature_order

        bridges-tunnels:
            filter: { any: [is_bridge: true, is_tunnel: true] }
            draw:
                lines:
                    #cap: butt
                    outline:
                        # except bridges and tunnels, their outlines should also self-sort
                        order: global.feature_order

        # default outlines starting at zoom 16
        default-outline-width:
            filter: { $zoom: { min: 16 } }
            draw:
                lines:
                    outline:
                        width: function () { return 3/16 * Math.log($zoom); }

        natural_earth_highways:
            filter: { $zoom: { min: 5, max: 8 } }
            draw:
                lines:
                    color: [[5, global.mid_color], [6, global.black_color]]
                    width: [[5, 0.5px], [6, 0.5px], [7, 0.75px]]
                    outline:
                        color: global.mid_color
                        width: [[9, 0px], [10, 0px], [12, 1px], [16, 2px]]
            major_road:
                filter: { kind: major_road }
                draw:
                    lines:
                        color: [[5, global.light_color], [7, global.mid_color]]
                        width: [[5, 0.25px], [7, 0.5px]]
                        # outline:
                        #     width: [[8, 0.0px], [9, 0.0px], [11, .5px], [16, .75px]]
            minor_road:
                filter: { kind: minor_road }
                draw:
                    lines:
                        color: global.offwhite_color
                        width: 0.5px
                        # outline:
                        #     width: [[12, 0px], [14, .5px], [17, 1px]]
            ferry:
                filter: { kind: ferry }
                draw:
                    lines:
                        color: global.light_color
                        width: 0.5px
                        outline:
                            width: 0px
        highway:
            filter: { kind: highway, $zoom: { min: 8 } }
            draw:
                lines:
                    color: [[8, global.black_color], [13, global.black_color], [14, global.white_color]]
                    width: [[8, 1px], [13, 1.25px], [14, 0.1px], [15, 1.5px], [17, 8px], [18, 10m]]
                    outline:
                        color: [[8, global.white_color], [12, global.white_color], [13, global.black_color]]
                        width: [[8, 0px], [13, 0px], [14, 1px], [15, 2px], [19, 6px]]
            link:
                filter: { is_link: true } # on- and off-ramps, etc
                draw:
                    lines:
                        color: [[9, global.mid_color], [13, global.mid_color], [14, global.white_color]]
                        width: [[9, 0px], [13, 0.75px], [14, 0.1px], [17, 4px], [18, 5m]]
                        outline:
                            color: [[9, global.white_color], [12, global.white_color], [13, global.mid_color], [15, global.black_color]]
                            width: [[9, 0px], [13, 0px], [14, 0.4px], [17, 1.5px], [18, 2px]]
                early_link:
                    filter: { $zoom: {min: 13, max: 15} }
                    draw:
                        lines:
                            order: 352
                tunnel-link:
                    filter: {is_tunnel: true, $zoom: { min: 13 } }
                    draw:
                        lines:
                            color: [[13, global.light_color], [14, global.ultralight_color]]
                            outline:
                                color: [[12, global.white_color], [13, global.light_color]]
            tunnel:
                filter: { is_tunnel: true, $zoom: { min: 13 } }
                draw:
                    lines:
                        color: [[13, global.light_color], [14, global.ultralight_color]]
                        outline:
                            color: [[12, global.white_color], [13, global.light_color]]
            highway_bridge:
                filter: { is_bridge: true }
                draw:
                    lines:
                        cap: round
                        outline:
                            cap: butt
            labels-highway-z13-z14:
                filter:
                    $zoom: [13,14]
                draw:
                    text-blend-order:
                        priority: 50
                        visible: global.text_visible_highway
                        text_source: global.ux_language_text_source_road_ref_and_name
                        font:
                            fill: global.black_color
                            weight: 600
                            size: 11px
                            stroke: { color: global.text_stroke, width: 4px }
            labels-highway-z15-up:
                filter: { $zoom: { min: 15 } }
                draw:
                    text-blend-order:
                        priority: 50
                        visible: global.text_visible_highway
                        font:
                            fill: global.white_color
                            weight: 600
                            size: [[15, 12px], [19, 16px]]
                            stroke: { color: global.black_color, width: [[15, 3px], [17, 4px]] }

        major_road:
            filter: { kind: major_road, $zoom: { min: 8 } }
            # default style
            draw:
                lines:
                    color: [[8, global.black_color], [13, global.black_color], [17, global.white_color]]
                    width: [[13, 1px], [14, 1px], [16, 2.5px], [17, 3px]]
                    outline:
                        width: [[12, 0px], [13, 0.5px], [15, 1px], [17, 2px]]
            trunk_primary:
                filter: { kind_detail: [trunk, primary] }
                draw:
                    lines:
                        color: [[8, global.midlight_color], [12, global.mid_color], [13, global.black_color], [14, global.white_color]]
                        width: [[8, 0.5px], [11, 0.5px], [13, 1px], [14, 0.1px], [16, 2px], [17, 8px], [18, 10m]]
                        outline:
                            color: [[8, global.white_color], [12, global.white_color], [13, global.black_color]]
                            width: [[8, 0px], [13, 0px], [14, 0.75px], [16, 1.5px], [18, 4px]]
                early:
                    filter: { $zoom: { max: 16 } }
                    draw:
                        lines:
                            order: 352
                            outline:
                                order: function() { return feature.sort_rank + 2; }
                    primary:
                        filter: { kind: [primary] }
                        draw:
                            lines:
                                outline:
                                    order: function() { return feature.sort_rank + 1; }
                routes:
                    filter: { ref: true }
                    draw:
                        lines:
                            color: [[8, global.midlight_color], [12, global.mid_color], [13, global.black_color], [14, global.white_color]]
                            width: [[9, 0.5px], [13, 1px], [14, 0.1px], [15, 1.25px], [16, 2px], [17, 8px], [18, 10m]]
                            outline:
                                color: [[8, global.white_color], [12, global.white_color], [13, global.black_color]]
                                width: [[8, 0px], [13, 0px], [14, 0.75px], [15, 1.5px], [17, 3px], [18, 4px]]
                    early:
                        filter: { $zoom: { max: 16 } }
                        draw:
                            lines:
                                order: function() { return feature.sort_rank + 2; }
                                outline:
                                    order: 353
                    tunnel:
                        filter: { is_tunnel: true, $zoom: { min: 13 } }
                        draw:
                            lines:
                                color: [[13, global.light_color], [14, global.ultralight_color]]
                                outline:
                                    color: [[12, global.white_color], [13, global.light_color]]
                    labels-trunk_primary-route-z13-z14:
                        filter: { $zoom: [13,14] }
                        draw:
                            text-blend-order:
                                priority: 51
                                visible: global.text_visible_trunk_primary
                                text_source: global.ux_language_text_source_road_ref_and_name
                                font:
                                    fill: global.dark_color
                                    size: 11px
                                    stroke: { color: global.text_stroke, width: 3px }
                    labels-trunk_primary-route-z15-up:
                        filter: { $zoom: { min: 15 } }
                        draw:
                            text-blend-order:
                                priority: 51
                                visible: global.text_visible_trunk_primary
                                text_source: global.ux_language_text_source_road_ref_and_name
                                font:
                                    fill: global.black_color
                                    weight: 600
                                    size: [[15, 12px], [16, 13px], [19, 16px]]
                                    stroke: { color: global.text_stroke, width: [[15, 4px], [17, 6px]] }
                labels-trunk_primary-z11-z15:
                    filter:
                        $zoom: [11,12,13,14,15]
                    draw:
                        text-blend-order:
                            priority: 51
                            visible: global.text_visible_trunk_primary
                            text_source: global.ux_language_text_source_road_ref_and_name_short
                            font:
                                fill: global.dark_color
                                size: [[11, 10px], [15, 12px]]
                                stroke: { color: global.text_stroke, width: 4px }
                labels-trunk_primary-z16-up:
                    filter: { $zoom: { min: 16 } }
                    draw:
                        text-blend-order:
                            priority: 51
                            visible: global.text_visible_trunk_primary
                            text_source: global.ux_language_text_source_road_ref_and_name
                            font:
                                fill: [[16, global.dark_color], [18, global.black_color]]
                                weight: 600
                                size: [[16, 13px], [18, 13px], [19, 16px]]
                                stroke: { color: global.text_stroke, width: [[16, 4px], [17, 6px]]}
            link:
                filter: { is_link: true } # on- and off-ramps, etc
                draw:
                    lines:
                        color: [[10, global.mid_color], [15, global.light_color], [16, global.white_color]]
                        width: [[10, 0.5px], [12, 0.5px], [15, 1px], [16, 1.75px], [17, 3px], [18, 5m]]
                        outline:
                            color: [[10, global.white_color], [15, global.mid_color], [16, global.black_color]]
                            width: [[10, 0px], [15, 0px], [16, 1px], [18, 2px]]
            tunnel:
                filter: { is_tunnel: true, $zoom: { min: 13 } }
                draw:
                    lines:
                        color: [[13, global.light_color], [14, global.ultralight_color]]
                        outline:
                            color: [[12, global.white_color], [13, global.light_color]]
            secondary:
                filter: { kind_detail: secondary }
                draw:
                    lines:
                        color: [[10, global.lighter_color], [13, global.midlight_color], [15, global.dark_color], [16, global.white_color]]
                        width: [[10, 0.5px], [12, 0.5px], [14, 1px], [15, 1.5px], [16, 0.1px], [17, 7.5px], [18, 9m]]
                        outline:
                            color: [[10, global.white_color], [14, global.white_color], [15, global.black_color]]
                            width: [[10, 0px], [15, 0px], [16, 1.1px], [17, 2px]]
                early:
                    filter: { $zoom: { max: 16 } }
                    draw:
                        lines:
                            order: 352
                            outline:
                                order: 353 #function() { return feature.sort_rank + 2; }
                routes:
                    filter: { ref: true, $zoom: { min: 12 } }
                    draw:
                        lines:
                            color: [[10, global.lighter_color], [13, global.mid_color], [15, global.black_color], [16, global.white_color]]
                            width: [[10, 0.5px], [13, 1px], [15, 1.5px], [16, 0.1px], [17, 7.5px], [18, 9m]]
                            outline:
                                color: [[10, global.white_color], [14, global.white_color], [15, global.black_color]]
                                width: [[10, 0px], [15, 0px], [16, 1.5px], [17, 2px]]
                    early:
                        filter: { $zoom: { max: 15 } }
                        draw:
                            lines:
                                order: function() { return feature.sort_rank + 2; }
                                outline:
                                    order: 353
                    tunnel:
                        filter: {is_tunnel: true, $zoom: { min: 13 } }
                        draw:
                            lines:
                                color: [[13, global.light_color], [15, global.light_color], [16, global.ultralight_color]]
                                outline:
                                    color: [[13, global.white_color], [14, global.white_color], [15, global.light_color]]
                    labels-secondary-routes-z13-z14:
                        filter: { $zoom: [13,14] }
                        draw:
                            text-blend-order:
                                priority: 56
                                visible: global.text_visible_secondary
                                text_source: global.ux_language_text_source_road_ref_and_name_short
                                font:
                                    fill: global.black_color
                                    size: 11px
                                    stroke: { color: global.text_stroke, width: 4px }
                    labels-secondary-routes-z15-up:
                        filter: { $zoom: { min: 15 } }
                        draw:
                            text-blend-order:
                                priority: 56
                                visible: global.text_visible_secondary
                                text_source: global.ux_language_text_source_road_ref_and_name_short
                                font:
                                    fill: global.black_color
                                    weight: 600
                                    size: [[15, 11px], [17, 13px]]
                                    stroke: { color: global.text_stroke, width: 4px }
                labels-secondary:
                    filter: { $zoom: { min: 13 } }
                    draw:
                        text-blend-order:
                            priority: 56
                            visible: global.text_visible_secondary
                            text_source: global.ux_language_text_source_road_ref_and_name_short
                            font:
                                fill: [[13, global.dark_color], [17, global.black_color]]
                                size: [[13, 10px], [17, 13px]]
                                stroke: { color: global.text_stroke, width: 4px }
            tertiary:
                filter: { kind_detail: [tertiary, tertiary_link] }
                draw:
                    lines:
                        color: [[11, global.lighter_color], [15, global.dark_color], [16, global.white_color]]
                        width: [[11, 0.5px], [15, 1.25px], [16, 0.1px], [17, 6px], [18, 9m]]
                        outline:
                            color: [[11, global.white_color], [14, global.white_color], [15, global.black_color]]
                            width: [[11, 0px], [15, 0px], [16, 1px], [17, 2px], [18, 2px]]
                early:
                    filter: { $zoom: { max: 15 } }
                    draw:
                        lines:
                            order: 352
                            outline:
                                order: function() { return feature.sort_rank + 3; }
                routes:
                    filter: { ref: true, $zoom: { min: 12 } }
                    draw:
                        lines:
                            color: [[11, global.lighter_color], [15, global.dark_color], [16, global.white_color]]
                            width: [[11, 0.5px], [15, 1.25px], [16, 0.1px], [17, 6px], [18, 9m]]
                            outline:
                                color: [[11, global.white_color], [14, global.white_color], [15, global.black_color]]
                                width: [[11, 0px], [15, 0px], [16, 1px], [17, 2px], [18, 2px]]
                    early:
                        filter: { $zoom: { max: 15 } }
                        draw:
                            lines:
                                order: function() { return feature.sort_rank + 3; }
                                outline:
                                    order: 353
                    tunnel:
                        filter: { is_tunnel: true, $zoom: { min: 13 } }
                        draw:
                            lines:
                                color: [[13, global.light_color], [15, global.light_color], [16, global.ultralight_color]]
                                outline:
                                    color: [[13, global.white_color], [14, global.white_color], [15, global.light_color]]
                link:
                    filter: { is_link: true } # on- and off-ramps, etc
                    draw:
                        lines:
                            color: [[14, global.light_color], [15, global.dark_color], [16, global.white_color]]
                            width: [[11, 0.0px], [15, 0.5px], [16, 0.1px], [18, 4.5m]]
                            outline:
                                color: [[11, global.white_color], [14, global.white_color], [15, global.black_color]]
                                width: [[11, 0px], [14, 0px], [16, 0.25px], [18, 2px]]
                labels-tertiary:
                    filter: { $zoom: { min: 13 } }
                    draw:
                        text-blend-order:
                            priority: 57
                            visible: global.text_visible_tertiary
                            text_source: global.ux_language_text_source_road_ref_and_name_short
                            font:
                                fill: [[13, global.dark_color], [18, global.black_color]]
                                size: [[13, 10px], [17, 13px]]
                                stroke: { color: global.text_stroke, width: 5px }
        minor_road:
            filter: { kind: minor_road, not: { kind_detail: service }, $zoom: { min: 8 } }
            draw:
                lines:
                    color: [[11, global.ultralight_color], [14, global.mid_color], [16, global.white_color]]
                    width: [[11, 0.35px], [13, 0.5px], [14, 1px], [15, 1px], [16, 0.1px], [17, 4px], [18, 9m]]
                    outline:
                        color: [[15, global.mid_color], [17, global.black_color]]
                        width: [[11, 0px], [15, 0px], [16, 0.75px], [17, 1.5px], [18, 1.5px]]
            early:
                filter: { $zoom: { max: 16 } }
                draw:
                    lines:
                        order: 350
                        outline:
                            order: 351
            # Is this junk code?
            round:
                filter: { $zoom: { min: 17 } }
                draw:
                    lines:
                        cap: round
                        join: round

            tunnel:
                filter: {is_tunnel: true, $zoom: { min: 13 } }
                draw:
                    lines:
                        color: [[13, global.light_color], [15, global.light_color], [16, global.ultralight_color]]
                        outline:
                            color: [[13, global.white_color], [14, global.white_color], [15, global.light_color]]
            minor_road_bridge:
                filter: { is_bridge: true }
                draw:
                    lines:
                        cap: round
                        outline:
                            cap: butt
            labels-minor_road:
                filter: { $zoom: { min: 15 } }
                draw:
                    text-blend-order:
                        priority: 59
                        visible: global.text_visible_minor_road
                        text_source: name
                        font:
                            fill: [[15, global.mid_color], [18, global.black_color]]
                            size: [[15, 10px], [18, 13px]]
                            stroke: { color: global.text_stroke, width: 4px }
        service_road:
            filter: { kind: minor_road, kind_detail: service, $zoom: { min: 13 } }
            draw:
                lines:
                    color: [[13, global.offwhite_color], [15, global.midlight_color], [16, global.white_color]]
                    width: [[13, 0px], [15, 0.75px], [16, 0.1px], [17, 2.5px], [18, 5m]]
                    outline:
                        color: [[13, global.white_color], [14, global.white_color], [15, global.mid_color], [18, global.black_color]]
                        width: [[13, 0px], [15, 0px], [16, 0.6px], [19, 1.5px]]
            labels-service_road:
                filter: { $zoom: { min: 17 } }
                draw:
                    text-blend-order:
                        priority: 60
                        visible: global.text_visible_service_road
                        text_source: name
                        font:
                            fill: [[17, global.dark_color], [18, global.black_color]]
                            size: [[17, 11px], [18, 12px]]
                            stroke: { color: global.text_stroke, width: 4px }

        path:
            filter:
                all:
                    - kind: [path, portage_way]
                not:
                    - kind_detail: [steps, track, pier]
            draw:
                lines:
                    color: global.white_color
                    width: [[14, 0px], [16, 0.15px], [17, 2.5px], [20, 3m]]
                    outline:
                        color: [[13, global.light_color], [15, global.extralight_color]]
                        width: [[14, 0.25px], [16, 0.35px], [17, 1px]]
            early:
                filter:
                    $zoom: { max: 15 }
                draw:
                    lines:
                        order: 351
                        outline:
                            order: 350
            pedestrian:
                filter: { kind_detail: pedestrian }
                draw:
                    lines:
                        color: global.white_color
                        width: [[14, 0px], [16, 0.15px], [17, 2.5px], [20, 3m]]
                        outline:
                            color: [[13, global.light_color], [15, global.extralight_color]]
                            width: [[14, 0.25px], [16, 0.35px], [17, 1px]]
            footway:
                filter: { kind_detail: footway }
                draw:
                    lines:
                        color: global.white_color
                        width: [[14, 0px], [16, 0.15px], [17, 2.5px], [20, 3m]]
                        outline:
                            color: [[13, global.light_color], [15, global.mid_color]]
                            width: [[14, 0.25px], [16, 0.35px], [17, 1px]]
                bridge:
                    filter: { is_bridge: true }
                    draw:
                        lines:
                            cap: round
                            outline:
                                color: [[13, global.light_color], [15, global.mid_color]]
                                cap: butt
            bridge:
                filter: { is_bridge: true }
                draw:
                    lines:
                        cap: round
                        outline:
                            color: global.mid_color
                            cap: butt
            labels-path:
                filter: { $zoom: { min: 17 } }
                draw:
                    text-blend-order:
                        priority: 61
                        visible: global.text_visible_path
                        text_source: name
                        font:
                            fill: global.dark_color
                            size: 12px
                            stroke: { color: global.text_stroke, width: 4px }
        track:
            filter: { kind: path, kind_detail: track }
            draw:
                lines:
                    color: global.white_color
                    width: [[13, 0px], [16, 0.15px], [17, 2.5px], [20, 4m]]
                    outline:
                        color: [[13, global.light_color], [15, global.midlight_color]]
                        width: [[13, 0.25px], [16, 0.5px], [17, 1px]]
            bridge:
                filter: { is_bridge: true }
                draw:
                    lines:
                        cap: butt
                        color: global.white_color
                        outline:
                            color: [[13, global.light_color], [15, global.black_color]]
                            cap: butt

            labels-track:
                filter: { $zoom: { min: 17 } }
                draw:
                    text-blend-order:
                        priority: 61
                        visible: global.text_visible_path
                        text_source: name
                        font:
                            fill: global.dark_color
                            size: 12px
                            stroke: { color: global.text_stroke, width: 4px }

        steps:
            filter:
                all:
                    - kind: path
                    - kind_detail: steps
            draw:
                lines:
                    dash: [0.75, 0.25]
                    dash_background_color: global.white_color
                    order: global.feature_order
                    color: [[15, global.light_color], [19, global.lighter_color]]
                    width: [[15, 0.5px], [18, 3px], [19, 1.5m]]
                    outline:
                        color: global.offwhite_color
                        width: [[15, 0px], [18, 1px]]
            labels-steps:
                filter: { $zoom: { min: 17 } }
                draw:
                    text-blend-order:
                        priority: 62
                        visible: global.text_visible_steps
                        text_source: name
                        font:
                            fill: global.mid_color
                            size: 11px
                            stroke: { color: global.text_stroke, width: 4px }

        shields:
            filter:
                all:
                    - $zoom: { min: 6 }
                    #
                    # United State looks great with shield_text alone, but...
                    #
                    #shield_text: true    # some roads don't have shield text, deal with that later
                    #
                    # Europe doesn't have many network relations set, so we could look for either
                    # shield_text or ref (with no shield_text) but...
                    # that makes United States look a bit funky with `(xxx)` and generic shields
                    # showing up in fields of custom state shields like US:CA and US:NY
                    #
                    - function() { return global.sdk_road_shields; }
                    - any:
                        - shield_text: true    # some roads don't have shield text, deal with that later
                        - all:
                            - shield_text: false    # some roads don't have shield text, deal with that later
                            - ref: true
                            - kind_detail: [motorway, trunk, primary, secondary, tertiary]
            # default
            draw:
                mapzen_icon_library:
                    # you need to match any custom shield to the vector tile `network` values
                    sprite: |
                        function() {
                            if( feature.shield_text ) {
                                return ('generic_shield-' + feature.shield_text.length + 'char');
                            } else {
                                return ('generic_shield-' + feature.ref.length + 'char');
                            }
                        }
                    sprite_default: generic_shield_5char
                    size: [[7,[75%,75%]],[12,[100%,100%]],[15,[110%,110%]]]
                    priority: 58
                    repeat_group: shields
                    repeat_distance: [[8, 90px],[10, 40px],[13, 30px]]
                    placement: midpoint
                    placement_min_length_ratio:
                        - [8, 0.1]
                        - [9, 0.25]
                        - [10, 0.25]
                        - [11, 0.15]
                        - [12, 1]
                        - [13, 1.50]
                        - [14, 2.0]
                    cull_from_tile: true
                    visible: false
                    text:
                        offset: [0px, -0.5px]
                        repeat_distance: 200px
                        anchor: center
                        text_source: |
                            function() {
                                if( feature.shield_text ) {
                                    return feature.shield_text;
                                } else {
                                    return feature.ref;
                                }
                            }
                        font:
                            family: Montserrat
                            fill: global.black_color
                            size: [[7,7px],[12,8px],[16,11px]]
                            stroke: { width: 0px }

            default_priority_highway:
                filter:
                    all:
                        - kind_detail: motorway
                        - $zoom: { min: 9 }
                draw:
                    mapzen_icon_library:
                        priority: 47
                        #color: yellow
                        visible: global.sdk_road_shields
                early:
                    filter:
                        - $zoom: { max: 7 }
                    draw:
                        mapzen_icon_library:
                            visible: false

            default_priority_trunk:
                filter:
                    all:
                        - kind_detail: major_road
                        - kind_detail: trunk
                draw:
                    mapzen_icon_library:
                        priority: 48
                        #color: red
                        visible: global.sdk_road_shields
                early:
                    filter:
                        - $zoom: { max: 9 }
                    draw:
                        mapzen_icon_library:
                            visible: false
            default_priority_primary:
                filter:
                    all:
                        - kind: major_road
                        - kind_detail: primary
                draw:
                    mapzen_icon_library:
                        priority: 49
                        #color: aqua
                        visible: global.sdk_road_shields
                early:
                    filter:
                        - $zoom: { max: 10 }
                    draw:
                        mapzen_icon_library:
                            visible: false
            default_priority_trunk_secondary:
                filter:
                    all:
                        - kind: major_road
                        - kind_detail: secondary
                draw:
                    mapzen_icon_library:
                        priority: 53
                        #color: blue
                        visible: global.sdk_road_shields
                early:
                    filter:
                        - $zoom: { max: 12 }
                    draw:
                        mapzen_icon_library:
                            visible: false
            default_priority_trunk_tertiary:
                filter:
                    all:
                        - kind: major_road
                        - kind_detail: tertiary
                draw:
                    mapzen_icon_library:
                        priority: 55
                        #color: green
                        visible: global.sdk_road_shields
                early:
                    filter:
                        - $zoom: { max: 13 }
                    draw:
                        mapzen_icon_library:
                            visible: false
            default_priority_minor_road:
                filter:
                    - kind: minor_road
                draw:
                    mapzen_icon_library:
                        priority: 56
                        visible: global.sdk_road_shields
                early:
                    filter:
                        - $zoom: { max: 14 }
                    draw:
                        mapzen_icon_library:
                            visible: false

            width_4char:
                filter: |
                    function() {
                        if( feature.shield_text ) {
                            return (feature.shield_text.length === 4)
                        } else {
                            return (feature.ref.replace(" ", "").length === 4 )
                        }
                    }
                draw:
                    mapzen_icon_library:
                        # this is sensitive to values > 56
                        priority: 56
                early:
                   filter: { $zoom: { max: 12 } }
                   draw:
                        mapzen_icon_library:
                            visible: false
            width_5char:
                filter: |
                    function() {
                        if( feature.shield_text ) {
                            return (feature.shield_text.length === 5)
                        } else {
                            return (feature.ref.replace(" ", "").length === 5)
                        }
                    }
                draw:
                    mapzen_icon_library:
                        # this is sensitive to values > 56
                        priority: 56
                early:
                   filter: { $zoom: { max: 13 } }
                   draw:
                       mapzen_icon_library:
                           visible: false
            # this is kinda a hack
            # FYI: This happens to "win" in style resolution because it's a-z sorted
            # don't rename the layer or it'll fail
            width_longggggg:
                filter: |
                    function() {
                        if( feature.shield_text ) {
                            return (feature.shield_text.length > 5)
                        } else {
                            return (feature.ref.length > 5)
                        }
                    }
                draw:
                    mapzen_icon_library:
                        visible: false

            # Now for the good stuff
            #
            # JK: see the theme files for USA and international shields

            # FYI: When the USA shields theme is imported it replaces this layer with a richer set of textures
            shields-usa:
                filter:
                    all:
                        - network: ['US:I','US:I:Business','US:I:Truck','US:I:Alternate','US:US','US:US:Business','US:US:Truck','US:US:Alternate']
                        - shield_text: true
                draw:
                    mapzen_icon_library:
                        #texture: mapzen_icon_library_shields_usa
                        # you need to match any custom shield to the vector tile `network` values
                        sprite: function() { return (feature.network + '-' + feature.shield_text.length + 'char'); }
                        # FYI: sprite_default doesn't support functions, default is carried by parent style's sprite function

                # US Interstate roads
                US-I:
                    filter:
                        network: 'US:I'
                        shield_text: true
                    draw:
                        mapzen_icon_library:
                            priority: 46
                            # always show (or not show), irrespective of zoom
                            visible: global.sdk_road_shields
                # US Federal Routes
                US-US:
                    filter:
                        network: ['US:US','US:US:Business','US:US:Truck','US:US:Alternate']
                        shield_text: true
                        $zoom: { min: 7 }
                    draw:
                        mapzen_icon_library:
                            priority: 47
                            cull_from_tile: true
                            # always show (or not show), irrespective of zoom
                            visible: global.sdk_road_shields
                            text:
                                font:
                                    fill: [0.380,0.318,0.312]
                                    size: [[7,8px],[13,10px],[15,11px]]

        winter_sport_pistes:
            filter: { kind: piste }
            draw:
                lines:
                    order: 388   # We override the server value here because Eraser Map is also a special Ski Map
                    cap: round
                    join: round
                    color: global.offwhite_color
                    width: [[13, 0px], [14, 3px], [15, 5px], [16, 6px], [18, 3m]]
                text-blend-order:
                    priority: 18
                    visible: global.text_visible_piste
                    font:
                        fill: global.midlight_color
                        size: [[15, 11px], [17, 12px]]
            early:
                filter: { $zoom: { max: 15 } }
                draw:
                    text-blend-order:
                        visible: false
            easy:
                filter: { piste_difficulty: easy }
                draw:
                    lines:
                        color: global.white_color
            intermediate:
                filter: { piste_difficulty: intermediate }
                draw:
                    lines:
                        color: global.white_color
            advanced:
                filter: { piste_difficulty: advanced }
                draw:
                    lines:
                        color: global.white_color
                    text-blend-order:
                        text_source: global.ux_language_text_source_piste_advanced
            expert:
                filter: { piste_difficulty: expert }
                draw:
                    lines:
                        color: global.white_color
                    text-blend-order:
                        text_source: global.ux_language_text_source_piste_expert
        pier:
            filter: { kind: path, kind_detail: pier }
            draw:
                lines:
                    color: global.offwhite_color
                    width: [[13, 0px], [14, 0.5px],[15, 1.5px], [16, 2.5px], [17, 3px], [18, 3m]]
                    outline:
                        color: global.mid_color
                        width: [[15, 0px], [16, 0.65px], [17, 0.75px], [18, 1px], [19, 1.5px]]
        racetrack:
            filter: { kind: racetrack }
            draw:
                lines:
                    cap: round
                    join: round
                    color: global.black_color
                    width: [[13, 0.5px], [14, 1px], [15, 1px], [16, 1.5px], [18, 3px], [19, 5px]]
        airport-lines:
            filter: { kind: aeroway, kind_detail: [runway,taxiway] }
            draw:
                lines:
                    color: global.mid_color
                    cap: butt
                    width: [[10, 1px], [13, 3px], [15, 16px], [17, 60m]]
                    outline:
                        color: global.white_color
            # Features come in at zoom 9, but include mostly minor airports without POIs until z13
            early:
                filter: { $zoom: { max: 12 }, not: { landuse_kind: [aerodrome, runway, taxiway] } }
                draw:
                    lines:
                        visible: false
            not-round:
                filter: { $zoom: { min: 17 } }
                draw:
                    lines:
                        cap: butt
            taxiway:
                filter: { kind_detail: taxiway }
                draw:
                    lines:
                        color: global.lighter_color
                        width: [[14, 1px], [16, 6px], [18, 4m]]
                        outline:
                            width: 0.5px
                            color: global.white_color
                early:
                    filter: { $zoom: { max: 13 } }
                    draw:
                        lines:
                            visible: false
        ferry:
            filter: { kind: ferry }
            draw:
                lines:
                    color: global.light_color
                    width: [[12, 0.5px], [13, 0.75px], [15, 1.0px]]
        aerialway:
            filter: { kind: aerialway }
            draw:
                lines:
                    color: global.mid_color
                    width: [[14, 0.5px], [15, 1.0px], [16, 2m]]
            gondola_cable_car:
                filter: { kind_detail: [gondola, cable_car] }
                draw:
                    lines:
                        color: global.midlight_color
                        width: [[12, 0.5px], [14, 0.6px], [16, 2px]]
            chair_lift:
                filter: { kind_detail: chair_lift }
                draw:
                    lines:
                        color: global.midlight_color
                        width: [[12, 0.5px], [14, 0.6px], [16, 2px], [18, 3m]]
            aerialway-labels:
                filter: { $zoom: { min: 14 } }
                draw:
                    text-blend-order:
                        priority: 63
                        visible: global.text_visible_aerialway
                        text_source: name
                        font:
                            fill: global.black_color
                            size: 10px
                            stroke: { color: global.text_stroke, width: 4px }
                minor:
                    filter: { not: { kind_detail: [gondola,cable_car,chair_lift] }, $zoom: { max: 17 } }
                    draw:
                        text-blend-order:
                            visible: false
                later:
                    filter: { $zoom: { min: 15 } }
                    draw:
                        text-blend-order:
                            font:
                                weight: 600
        railway:
            filter: { kind: rail, not: { kind_detail: [subway,light_rail,tram] } }
            draw:
                lines:
                    dash: [0.25, 1.0]
                    dash_background_color: global.offwhite_color
                    color: [[12, global.lightest_color], [17, global.light_color]]
                    width: [[12, 0px], [12, 0.5px], [18, 4px], [20, 2m]]
                    # let roads sort themselves past zoom 14
                    order: global.feature_order
                    # but give them all the same outline
                    outline:
                        order: 354
            bridges-tunnels:
                filter: { any: [is_bridge: true, is_tunnel: true] }
                draw:
                    lines:
                        outline:
                            # except bridges and tunnels, their outlines should also self-sort
                            order: function() { return feature.sort_rank || 305; }
            service:
                filter: { service: true }
                draw:
                    lines:
                        color: global.white_color
                        width: [[14,0px],[15,0.5px],[18,2px]]

    buildings:
        data: { source: mapzen, layer: buildings }
        filter:
            not: { location: underground }
       # set default footprint and extrusion draw properties, but don't draw by default (rules below will turn visibility on)
        draw:
            polygons:
                visible: false
                order: 329
                color: global.white_color
            lines:
                visible: false
                style: lines
                order: 330
                color: [[14, global.light_color], [16, global.midlight_color], [19, global.dark_color]]
                width: [[14, 0.3px], [15, 0.5px], [16, 0.75px],[18, 0.75px], [19, 1px]]

        # building footprints, pre-extrusion
        footprints:
            filter:
                any:
                    - { $zoom: [13], scale_rank: [1,2] }
                    - { $zoom: [14], scale_rank: [1,2,3] }
                    - { $zoom: [15], height: { min: 100 } }
                    - { $zoom: [15], area: { min: 500 } }
                    - { $zoom: [15], volume: { min: 100000 } }
                    - { $zoom: [16], area: { min: 100 } }
                    - { $zoom: [16], volume: { min: 50000 } }
                    - { $zoom: { min: 17 }, area: true }
            draw:
                polygons:
                    visible: true
                lines:
                    visible: true

            # 3d buildings
            extrude:
                filter:
                    all:
                        - function() { return global.sdk_building_extrude; }
                        - any:
                            - { $zoom: [15], height: { min: 190 } }
                            - { $zoom: [15], area: { min: 5000 } }
                            - { $zoom: [15], volume: { min: 100000 } }
                            - { $zoom: [16], height: { min: 100 } }
                            - { $zoom: [16], area: { min: 3500 } }
                            - { $zoom: [16], volume: { min: 50000 } }
                            - { $zoom: [17], area: { min: 500 } }
                            - { $zoom: [17], volume: { min: 15000 } }
                            - { $zoom: { min: 18 } }
                        - not:
                            - layer: [-1, -2, -3, -4, -5]
                draw:
                    polygons:
                        visible: true
                        order: 438
                        style: building-grid
                        extrude: global.building_extrude_height
                        # color: global.white_color
                    lines:
                        visible: true
                        order: 439
                        style: building-lines
                        extrude: global.building_extrude_height
            basement:
                filter:
                    all:
                        - layer: [-1, -2, -3, -4, -5]
                draw:
                    lines:
                        color: global.lightest_color


        building-labels:
            filter:
                all:
                    - { $zoom: { min: 16 } }
                    - $geometry: point
                    - landuse_kind: [university, college, school, kindergarten]
                    - function() { return global.text_visible_building; }
                any:
                    - { $zoom: [16], area: { min: 5000 }, name: true }
                    - { $zoom: [16], area: { min: 5000 }, kind: true }
                    - { $zoom: [16], area: { min: 10000 }, landuse_kind: true }
                    - { $zoom: [16], area: { min: 7000 }, kind_detail: [university, college, school, kindergarten] }
                    - { $zoom: [16], volume: { min: 50000 }, name: true }
                    - { $zoom: [17], area: { min: 3000 }, name: true }
                    - { $zoom: [17], area: { min: 2000 }, kind_detail: [university, college, school, kindergarten] }
                    - { $zoom: [18], area: { min: 1000 }, name: true }
                    - { $zoom: [18], kind_detail: [university, college, school, kindergarten] }
                    - { $zoom: [19], area: { min: 200 }, name: true }
                    - { $zoom: { min: 19 }, kind_detail: [university, college, school, kindergarten] }
                    - { $zoom: { min: 20 }, name: true }
            draw:
                text-blend-order:
                    interactive: global.sdk_interactive
                    text_source: global.ux_language_text_source_building_and_address
                    move_into_tile: true
                    priority: 72
                    order: 7
                    font:
                        fill: global.dark_color
                        family: global.text_font_family
                        style: italic
                        size: 11px
                        stroke: { color: global.text_stroke , width: 4px }
            building_labels-z15-z16:
                filter: { $zoom: [15,16] }
                draw: { text-blend-order: { font: { size: 9px, stroke: { width: 3px } } } }
            building_labels-z17-z18:
                filter: { $zoom: [17,18] }
                draw: { text-blend-order: { font: { size: 11px, stroke: { width: 3px } } } }
            building_labels-z19-up:
                filter: { $zoom: [19,20] }
                draw: { text-blend-order: { font: { size: 12px, stroke: { width: 3px }  } } }
            building-labels-z16:
                filter: function() { if( $zoom == 16 && feature.name.length > 20 ) { return true; } else { return false; } }
                draw:
                    text-blend-order:
                        visible: false
            building-labels-z17:
                filter: function() { if( $zoom == 17 && feature.name.length > 30 ) { return true; } else { return false; } }
                draw:
                    text-blend-order:
                        visible: false
            building-labels-z20+:
                filter: { $zoom: { min: 20 } }
                draw:
                    text-blend-order:
                        text_source: function() { if( feature.addr_housenumber ) { return feature.name + '\n' + feature.addr_housenumber; } else { return feature.name; } }
        address-labels:
            filter:
                all:
                    - $zoom: { min: 20 }
                    - function() { return global.text_visible_address; }
                any:
                    - kind: address
                    - { label_position: true, addr_housenumber: true, name: false }
            draw:
                text-blend-order:
                    interactive: global.sdk_interactive
                    order: 7
                    text_source: addr_housenumber
                    font:
                        fill: global.mid_color
                        family: global.text_font_family
                        style: italic
                        size: 11px
                        stroke: { color: global.text_stroke, width: 4px }

    boundaries:
        data: { source: mapzen, layer: boundaries }
        # country subdivisions (states, provinces)
        draw:
            lines:
                order: global.feature_order
        country:
            filter:
                any:
                    - kind: country
                    - admin_level: 2
            draw:
                country-outerline:
                    style: lines
                    order: function() { return (feature.sort_rank -1); }
                    color: global.light_color
                    width: [[0, 0px], [4, 2px], [8, 5px], [14, 7px], [17, 14m]]
                lines:
                    color: global.white_color
                    width: [[0, 0px], [5, 0px], [6, 1px], [14, 2px]]
            water:
                filter: { maritime_boundary: true }
                draw:
                    country-outerline:
                        visible: false
                    lines:
                        visible: false
            country-labels:
                filter: { name: true, $zoom: { min: 8 }, not: { maritime_boundary: true } }
                draw:
                    text-blend-order:
                        priority: 2
                        visible: global.text_visible_admin
                        text_source: global.ux_language_text_source_boundary_lines_left_right
                        offset: [[8, [0, 7px]], [11, [0, 8px]], [12, [0, 9px]]]
                        text_wrap: 100
                        font:
                            family: global.text_font_family
                            size: 10px
                            fill: global.black_color
                            transform: uppercase
                no-left-right:
                    filter: { "name:left": false, "name:right": false }
                    draw:
                        text-blend-order:
                            text_source: global.ux_language_text_source_boundary_lines
                            offset: 0px

        other_country_boundary_disputed_etc:
            filter: { kind: [disputed, indefinite, indeterminate, lease_limit, line_of_control, overlay_limit] }
            draw:
                lines:
                    dash: [1.25, 1.25]
                    order: global.feature_order
                    color: global.light_color
                    width: [[1,0.2px],[9,1.5px],[17,10m]]
            disputed:
                filter: { kind: [disputed, line_of_control] }
                draw:
                    lines:
                        dash: [2.0, 1.0]
                        order: global.feature_order
                        color: global.light_color
                        width: [[1, 0.5px], [9, 2.5px], [17,14m]]

        region:
            filter:
                any:
                    - kind: [region,macroregion]
                    - kind_detail: [3,4]
            draw:
                lines:
                    color: global.light_color
                    # width: [[0, 0.5px], [9, 2px], [14, 4px], [16, 6.5px], [17, 16m]]
                    width: [[0, 0.5px], [14, 3px], [16, 5px], [17, 16m]]

            water:
                filter: { maritime_boundary: true }
                draw:
                    lines:
                        visible: false

            dash-borders:
                filter:
                    $zoom: { min: 7 }
                draw:
                    lines:
                        dash: [7.0, 2.0]

            early:
                filter: { not: { min_zoom: [1,2] }, $zoom: { max: 8 } }
                draw:
                    lines:
                        visible: false

            region-labels:
                filter: { name: true, $zoom: { min: 9 }, not: { maritime_boundary: true } }
                draw:
                    text-blend-order:
                        priority: 3
                        visible: global.text_visible_admin
                        text_source: global.ux_language_text_source_boundary_lines_left_right
                        offset: [[8,[0, 5px]], [11, [0, 6px]], [12,[0, 7px]]]
                        text_wrap: 100
                        # offset: [0px, 10px]
                        # anchor: top
                        font:
                            family: global.text_font_family
                            size: 9px
                            fill: global.mid_color
                            transform: uppercase
                no-left-right:
                    filter: { "name:left": false, "name:right": false }
                    draw:
                        text-blend-order:
                            text_source: global.ux_language_text_source_boundary_lines
                            offset: 0px

    places:
        data: { source: mapzen, layer: places }
        filter:
            name: true
        draw:
            mapzen_icon_library:
                visible: false
                text:
                    text_source: global.ux_language_text_source
                    visible: false
                    buffer: 3px
                    font:
                        family: global.text_font_family
                        fill: global.black_color
            # NOTE: This is a hack for localities because of an icon & text bug, see note below
            text-blend-order:
                text_source: global.ux_language_text_source
                visible: false    # labels are enabled by each layer below
                buffer: 3px
                font:
                    family: global.text_font_family
                    fill: global.black_color
            # END NOTE

        country:
            filter:
                kind: country
                $zoom: { min: 2, max: 9 }
            draw:
                text-blend-order:
                    priority: 3
                    visible: global.text_visible_admin
                    text_source: global.ux_language_text_source
                    font:
                        fill: global.black_color
                        weight: 600
                        stroke: { color: global.text_stroke, width: 4px }
            country-z2-3:
                filter:
                    $zoom: [2,3]
                draw:
                    text-blend-order:
                        priority: 10
                        buffer: 10px
                        font:
                            weight: 300
                            size: 11px
                early-ones-z2:
                    filter:
                        $zoom: [2]
                        not: { name: [United States of America,Brasil,中华人民共和国,Россия,Canada,Kalaallit Nunaat,Ísland,Australia,India,日本,Guam,Indonesia,South Africa,مصر,Nigeria,Kenya] }
                    draw:
                        text-blend-order:
                            visible: false
                early-ones-z3:
                    filter:
                        $zoom: [3]
                        name: [Nederland,Luxembourg,Liechtenstein,San Marino,Civitatis Vaticanæ,Crna Gora,Македонија,The Gambia,Burundi,Swaziland,الإمارات العربية المتحدة,العراق,Singapore,El Salvador,Belize,Trinidad and Tobago, Saint Lucia, Montserrat,Anguilla,República Dominicana,Bahamas,British Virgin Islands,Antigua and Barbuda,Grenada,Sint Maarten,Saint Kitts and Nevis,Cayman Islands,België - Belgique - Belgien,Deutschland,España]
                    draw:
                        text-blend-order:
                            visible: false
            country-z4:
                filter:
                    $zoom: [4]
                draw:
                    text-blend-order:
                        buffer: 10px
                        priority: 8
                        font:
                            weight: 300
                            size: 13px
                early-ones-z4:
                    filter:
                        name: [Nederland,Luxembourg,Liechtenstein,San Marino,Civitatis Vaticanæ,Crna Gora,Македонија,The Gambia,Burundi,Swaziland,الإمارات العربية المتحدة,العراق,Singapore,El Salvador,Belize,Trinidad and Tobago, Saint Lucia, Montserrat,Anguilla,República Dominicana,Bahamas,British Virgin Islands,Antigua and Barbuda,Grenada,Sint Maarten,Saint Kitts and Nevis,Cayman Islands,België - Belgique - Belgien,Deutschland,España,Magyarország,Österreich,Polska,Хуссар Ирыстон,Аҧсны - Абхазия]
                    draw:
                        text-blend-order:
                            visible: false
            country-z5:
                filter:
                    $zoom: [5]
                draw:
                    text-blend-order:
                        priority: 8
                        font:
                            size: 13px
                early-ones-z5:
                    filter:
                        # South Ossetia and Abkhazia aren't countries (they are disputed areas)
                        - name: [Luxembourg,Liechtenstein,San Marino,Civitatis Vaticanæ,El Salvador,Belize,België - Belgique - Belgien,"Хуссар Ирыстон - Южная Осетия","Хуссар Ирыстон","Аҧсны - Абхазия","Լեռնային Ղարաբաղի Հանրապետությու (Nagorno-Karabakh Republic)"]
                        - population: { max: 5000000 }
                    draw:
                        text-blend-order:
                            visible: false
            country-z6:
                filter:
                    $zoom: [6]
                draw:
                    text-blend-order:
                        priority: 8
                        font:
                            size: 14px
                small-ones-z6:
                    filter:
                        # South Ossetia and Abkhazia aren't countries (they are disputed areas)
                        - name: [Luxembourg,Liechtenstein,San Marino,Civitatis Vaticanæ,België - Belgique - Belgien,"Хуссар Ирыстон - Южная Осетия","Хуссар Ирыстон","Аҧсны - Абхазия","Լեռնային Ղարաբաղի Հանրապետությու (Nagorno-Karabakh Republic)"]
                        - population: { max: 5000000 }
                    draw:
                        text-blend-order:
                            visible: false
            country-z7:
                # South Ossetia and Abkhazia aren't countries (they are disputed areas)
                filter: { $zoom: { min: 7, max: 9 } }
                draw:
                    text-blend-order:
                        font:
                            size: [[7,18px],[9,24px]]
                small-ones-z7:
                    filter:
                        $zoom: [7]
                        # South Ossetia and Abkhazia aren't countries (they are disputed areas)
                        name: [Liechtenstein,San Marino,Civitatis Vaticanæ,"Хуссар Ирыстон - Южная Осетия","Хуссар Ирыстон","Аҧсны - Абхазия","Լեռնային Ղարաբաղի Հանրապետությու (Nagorno-Karabakh Republic)"]
                    draw:
                        text-blend-order:
                            visible: false
                small-pop:
                    filter:
                        - population: { max: 5000000 }
                    draw:
                        text-blend-order:
                            priority: 30
                            font:
                                size: 12px

        region:
            filter:
                kind: region
                $zoom: { min: 4, max: 9 }
            draw:
                text-blend-order:
                    priority: 14
                    visible: false
                    text_source: global.ux_language_text_source_short
                    font:
                        size: 11px
                        weight: normal
                        fill: [[4, global.light_color], [9, global.midlight_color]]
                        stroke: { color: global.text_stroke, width: 4px }
            region-z4:
                filter:
                    $zoom: [4]
                    not: { name: [Western Cape,Eastern Cape,Northern Cape,North West,Limpopo,KwaZulu-Natal,Hamburg,Freie und Hansestadt Hamburg,Neuchâtel,Nordrhein-Westfalen,Haute-Normandie,Baden-Württemberg,Bayern,Sachsen-Anhalt,Berlin,Mecklenburg-Vorpommern,Schleswig-Holstein,Brandenburg,Niedersachsen,Saarland,Thüringen,Hessen,Sachsen] }
                draw:
                    text-blend-order:
                        visible: global.text_visible_admin
                        # font:
                        #     fill: [0.70,0.70,0.70]
            region-z5:
                filter:
                    $zoom: [5]
                    not: { name: [Western Cape,Eastern Cape,Northern Cape,North West,Limpopo,KwaZulu-Natal,Hamburg,Freie und Hansestadt Hamburg,Neuchâtel,Nordrhein-Westfalen,Haute-Normandie,Baden-Württemberg,Bayern,Sachsen-Anhalt,Berlin,Mecklenburg-Vorpommern,Schleswig-Holstein,Brandenburg,Niedersachsen,Saarland,Thüringen,Hessen,Sachsen] }
                draw:
                    text-blend-order:
                        visible: global.text_visible_admin
                        font:
                            size: 18px
                            weight: 300
            region-z6:
                filter:
                    $zoom: [6]
                    not: { name: [Western Cape,Eastern Cape,Northern Cape,North West,Limpopo,KwaZulu-Natal,Hamburg,Freie und Hansestadt Hamburg,Neuchâtel,Nordrhein-Westfalen,Haute-Normandie,Baden-Württemberg,Bayern,Sachsen-Anhalt,Berlin,Mecklenburg-Vorpommern,Schleswig-Holstein,Brandenburg,Niedersachsen,Saarland,Thüringen,Hessen,Sachsen] }
                draw:
                    text-blend-order:
                        visible: global.text_visible_admin
                        font:
                            size: 21px
                            weight: 300
                            transform: uppercase

            region-z7-z8:
                filter: { $zoom: [7,8] }
                draw:
                    text-blend-order:
                        visible: global.text_visible_admin
                        text_source: global.ux_language_text_source_short_proxy_name
                        font:
                            size: 30px
                            weight: 300
                            transform: uppercase
                pesky:
                    filter:
                        $zoom: [7]
                        name: [Western Cape,Eastern Cape,Northern Cape,North West,Limpopo,KwaZulu-Natal,Hamburg,Freie und Hansestadt Hamburg,Neuchâtel,Nordrhein-Westfalen,Haute-Normandie,Baden-Württemberg,Bayern,Sachsen-Anhalt,Berlin,Mecklenburg-Vorpommern,Schleswig-Holstein,Brandenburg,Niedersachsen,Saarland,Thüringen,Hessen,Sachsen]
                    draw:
                        text-blend-order:
                            visible: false
                abbrev-small-ones-z7:
                    filter:
                        $zoom: [7]
                        name: [Delaware,New Jersey,Connecticut,Rhode Island,Massachusetts,New Hampshire,Vermont]
                    draw:
                        text-blend-order:
                            text_source: global.ux_language_text_source_abbreviation
                            font: { transform: uppercase }
                region-z8:
                    filter:
                        $zoom: [8]
                    draw:
                        text-blend-order:
                            text_source: global.ux_language_text_source
                    no-pop:
                        filter:
                            any:
                                - population: false
                                - population: { max: 1000000 }
                        draw:
                            text-blend-order:
                                font:
                                    size: 16px

        populated-places:
            filter:
                kind: locality
            draw:
                mapzen_icon_library:
                    visible: global.icon_visible_populated_places
                    size: [[10,4px],[11,0px]]
                    sprite: townspot-xs-rev
                    buffer: 8px
                    priority: 30
                    text:
                        visible: global.text_visible_populated_places
                        buffer: 3px
                        font:
                            size: [[5,9px],[8,10px],[12,11px]]
                            stroke: { color: global.text_stroke, width: 4px }
                            # fill: global.text_fill
                text-blend-order:
                    visible: global.text_visible_populated_places
                    buffer: 10px
                    font:
                        size: [[5,9px],[8,10px],[12,11px]]
                        stroke: { color: global.text_stroke, width: 4px }
                        # fill: global.text_fill

            #
            # NOTE: you'd think no-townspot would be the way to go, but icons with size 0px seems to have a bug to also hide the text :(
            #
            # no-townspot:
            #     filter: { $zoom: { min: 11 } }
            #     draw:
            #         mapzen_icon_library:
            #             size: 0px
            #             text:
            #                 anchor: center
            #
            # NOTE: So instead we play a shell game with symbolizers per zoom
            #
            _icons_later:
                filter: { $zoom: { min: 11 } }
                draw:
                    mapzen_icon_library:
                        visible: false
                    text-blend-order:
                        visible: global.text_visible_populated_places

            _text_early:
                filter: { $zoom: { max: 11 } }
                draw:
                    text-blend-order:
                        visible: false
            # END HACK

            z8-50k-below:
                filter: { $zoom: [8,9], population: { min: 10000, max: 50000 } }
                draw:
                    mapzen_icon_library:
                        buffer: 25px
                        #color: red
                        #visible: false
            z9-10k-below:
                filter: { $zoom: [8,9], population: { max: 10000 } }
                draw:
                    mapzen_icon_library:
                        buffer: 18px
                        #color: blue
                        #visible: false
            z9-no-population:
                filter: { $zoom: [8,9], population: false }
                draw:
                    mapzen_icon_library:
                        buffer: 10px
                        #color: yellow
                        #visible: false

            sorry-denver:
                filter:
                    $zoom: [3]
                    name: [Denver]
                draw:
                    mapzen_icon_library:
                        visible: false

            # HACK
            # NOTE: These should use icon: buffer instead of going visible: false, but there are problems using icon here :(
            # This fixes Paris area, but causes problems for small places in the USA eg Table Bluff near Eureka, California.
            funky-village:
                filter: { $zoom: [11], population: { max: 1000 }, kind_detail: [village] }
                draw:
                    text-blend-order:
                        visible: false
            funky-isolated_dwelling:
                filter: { $zoom: [13], kind_detail: [isolated_dwelling] }
                draw:
                    text-blend-order:
                        visible: false
            hamlet:
                filter: { $zoom: [13], kind_detail: hamlet }
                draw:
                    text-blend-order:
                        visible: false
            # END HACK

            # someone in London and Salt Lake City thought neighbourhoods should be tagged place: locality
            # They were wrong
            funky-fake-neighbourhoods:
                filter: { $zoom: { min: 13 }, kind_detail: [locality] }
                draw:
                    text-blend-order:
                        visible: false


            population-10m-up:
                filter:
                    population: { min: 10000000 }
                draw:
                    mapzen_icon_library:
                        size: [[4,5px],[8,6px],[9,0px]]
                        sprite: townspot-m-rev
                        priority: 6
                        text:
                            font:
                                size: [[2,11px],[6,15px],[8,18px],[10,20px],[12,20px],[13,0px]]
                    text-blend-order:
                        priority: 6
                        font:
                            size: [[2,11px],[6,15px],[8,18px],[10,20px],[12,20px],[13,0px]]
                capital:
                    filter: { country_capital: true, $zoom: { min: 5 } }
                    draw:
                        mapzen_icon_library:
                            size: [[10,8px],[11,0px]]
                            sprite: capital-l
                            priority: 5
                        text-blend-order:
                            priority: 5
            population-5m-10m:
                filter:
                    population: { min: 5000000, max: 10000000 }
                draw:
                    mapzen_icon_library:
                        size: [[4,5px],[8,6px],[9,0px]]
                        sprite: townspot-m-rev
                        priority: 7
                        text:
                            font:
                                size: [[4,10px],[6,14px],[8,18px],[10,20px],[12,20px],[13,0px]]
                    text-blend-order:
                        priority: 7
                        font:
                            size: [[4,10px],[6,14px],[8,18px],[10,20px],[12,20px],[13,0px]]
                capital:
                    # we only want townspots to show as capital dots starting at zoom 5
                    filter: { country_capital: true, $zoom: { min: 5 } }
                    draw:
                        mapzen_icon_library:
                            size: [[10,8px],[11,0px]]
                            sprite: capital-l
                            priority: 6
                        text-blend-order:
                            priority: 6
            population-1m-5m:
                filter:
                    population: { min: 1000000, max: 5000000 }
                draw:
                    mapzen_icon_library:
                        size: [[4,5px],[8,6px],[9,0px]]
                        sprite: townspot-m-rev
                        priority: 9
                        text:
                            font:
                                size: [[4,10px],[6,14px],[8,15px],[12,18px],[13,0px]]
                    text-blend-order:
                        priority: 9
                        font:
                            size: [[4,10px],[6,14px],[8,15px],[12,18px],[13,0px]]
                capital:
                    # we only want townspots to show as capital dots starting at zoom 5
                    filter: { country_capital: true, $zoom: { min: 5 } }
                    draw:
                        mapzen_icon_library:
                            size: [[10,8px],[11,0px]]
                            sprite: capital-l
                            priority: 8
                        text-blend-order:
                            priority: 8
            population-500k-1m:
                filter:
                    population: { min: 500000, max: 1000000 }
                draw:
                    mapzen_icon_library:
                        size: [[8,6px],[9,0px]]
                        sprite: townspot-m-rev
                        priority: 11
                        text:
                            font:
                                size: [[5,10px],[8,12px],[10,14px],[12,16px],[13,0px]]
                    text-blend-order:
                        priority: 11
                        font:
                            size: [[5,10px],[8,12px],[10,14px],[12,16px],[13,0px]]
                capital:
                    filter: { country_capital: true, $zoom: { min: 5 } }
                    draw:
                        mapzen_icon_library:
                            size: [[10,6px],[11,0px]]
                            sprite: capital-m
                            priority: 10
                        text-blend-order:
                            priority: 10
            population-200k-500k:
                filter:
                    population: { min: 200000, max: 500000 }
                draw:
                    mapzen_icon_library:
                        size: [[8,6px],[9,6px],[10,6px],[11,0px]]
                        sprite: townspot-m-rev
                        priority: 13
                        text:
                            font:
                                size: [[6,10px],[8,14px],[10,15px],[12,16px],[13,0px]]
                    text-blend-order:
                        priority: 13
                        font:
                            size: [[6,10px],[8,14px],[10,15px],[12,16px],[13,0px]]
                capital:
                    filter: { country_capital: true, $zoom: { min: 5 } }
                    draw:
                        mapzen_icon_library:
                            size: [[10,6px],[11,0px]]
                            sprite: capital-m
                            priority: 12
                        text-blend-order:
                            priority: 12
            population-100k-200k:
                filter:
                    population: { min: 100000, max: 200000 }
                draw:
                    mapzen_icon_library:
                        size: [[8,6px],[9,6px],[10,6px],[11,0px]]
                        sprite: townspot-m-rev
                        priority: 15
                        text:
                            font:
                                size: [[6,10px],[8,12px],[14,14px],[15,0px]]
                    text-blend-order:
                        priority: 15
                        font:
                            size: [[6,10px],[8,12px],[14,14px],[15,0px]]
                capital:
                    filter: { country_capital: true, $zoom: { min: 5 } }
                    draw:
                        mapzen_icon_library:
                            size: [[10,6px],[11,0px]]
                            sprite: capital-m
                            priority: 14
                        text-blend-order:
                            priority: 14
            population-50k-100k:
                filter:
                    population: { min: 50000, max: 100000 }
                draw:
                    mapzen_icon_library:
                        size: [[8,5px],[9,5px],[10,6px],[11,0px]]
                        sprite: townspot-s-rev
                        priority: 17
                        text:
                            font:
                                size: [[6,10px],[8,12px],[14,14px],[15,0px]]
                    text-blend-order:
                        priority: 17
                        font:
                            size: [[6,10px],[8,12px],[14,14px],[15,0px]]
                capital:
                    filter: { country_capital: true, $zoom: { min: 5 } }
                    draw:
                        mapzen_icon_library:
                            size: [[10,5px],[11,0px]]
                            sprite: capital-m
                            priority: 16
                        text-blend-order:
                            priority: 16
            population-20k-50k:
                filter:
                    population: { min: 20000, max: 50000 }
                draw:
                    mapzen_icon_library:
                        size: [[8,5px],[9,5px],[10,5px],[11,0px]]
                        sprite: townspot-s-rev
                        priority: 19
                        text:
                            font:
                                size: [[9,10px],[14,12px],[15,0px]]
                    text-blend-order:
                        priority: 19
                        font:
                            size: [[9,10px],[14,12px],[15,0px]]
                capital:
                    filter: { country_capital: true, $zoom: { min: 5 } }
                    draw:
                        mapzen_icon_library:
                            size: [[10,5px],[11,0px]]
                            sprite: capital-s
                            priority: 18
                        text-blend-order:
                            priority: 18
            population-10k-20k:
                filter:
                    population: { min: 10000, max: 20000 }
                draw:
                    mapzen_icon_library:
                        size: [[8,4px],[9,4px],[10,4px],[11,0px]]
                        sprite: townspot-xs-rev
                        priority: 21
                        text:
                            font:
                                fill: [[9, global.dark_color], [11, global.black_color]]
                                size: [[9, 10px], [14, 12px], [15, 0px]]
                    text-blend-order:
                        priority: 21
                        font:
                            fill: [[9, global.dark_color], [11, global.black_color]]
                            size: [[9, 10px],[14, 12px],[15, 0px]]
                capital:
                    filter: { country_capital: true, $zoom: { min: 5 } }
                    draw:
                        mapzen_icon_library:
                            size: [[10,5px],[11,0px]]
                            sprite: capital-s
                            priority: 20
                        text-blend-order:
                            priority: 20
            population-5k-10k:
                filter:
                    population: { min: 5000, max: 10000 }
                draw:
                    mapzen_icon_library:
                        size: [[8,4px],[9,4px],[10,4px],[11,0px]]
                        sprite: townspot-xs-rev
                        priority: 23
                        text:
                            font:
                                fill: [[9, global.dark_color], [11, global.black_color]]
                                size: [[9,10px], [14,12px], [15,0px]]
                    text-blend-order:
                        priority: 23
                        font:
                            fill: [[9, global.dark_color], [11, global.black_color]]
                            size: [[9,10px], [14,12px], [15,0px]]
                capital:
                    filter: { country_capital: true, $zoom: { min: 5 } }
                    draw:
                        mapzen_icon_library:
                            size: [[10,5px],[11,0px]]
                            sprite: capital-s
                            priority: 22
                        text-blend-order:
                            priority: 22
            population-2k-5k:
                filter:
                    population: { min: 2000, max: 5000 }
                draw:
                    mapzen_icon_library:
                        size: [[8,4px],[9,4px],[10,4px],[11,0px]]
                        sprite: townspot-xs-rev
                        priority: 25
                        text:
                            font:
                                fill: [[9, global.dark_color],[11, global.black_color]]
                                size: [[9,10px], [14,12px], [15,0px]]
                    text-blend-order:
                        priority: 25
                        font:
                            fill: [[9, global.dark_color],[11, global.black_color]]
                            size: [[9,10px], [14,12px], [15,0px]]
                capital:
                    filter: { country_capital: true, $zoom: { min: 5 } }
                    draw:
                        mapzen_icon_library:
                            size: [[10,5px],[11,0px]]
                            sprite: capital-s
                            priority: 24
                        text-blend-order:
                            priority: 24
            population-1k-2k:
                filter:
                    population: { min: 1000, max: 2000 }
                draw:
                    mapzen_icon_library:
                        size: [[8,4px],[9,4px],[10,4px],[11,0px]]
                        sprite: townspot-xs-rev
                        priority: 27
                        text:
                            font:
                                fill: [[9, global.dark_color], [11, global.black_color]]
                                size: [[9,10px], [14,12px], [15,0px]]
                    text-blend-order:
                        priority: 27
                        font:
                            fill: [[9, global.dark_color], [11, global.black_color]]
                            size: [[9, 10px], [14, 12px], [15, 0px]]
                capital:
                    filter: { country_capital: true, $zoom: { min: 5 } }
                    draw:
                        mapzen_icon_library:
                            size: [[10,5px],[11,0px]]
                            sprite: capital-s
                            priority: 26
                        text-blend-order:
                            priority: 26
            population-200-1k:
                filter:
                    population: { min: 200, max: 1000 }
                draw:
                    mapzen_icon_library:
                        size: [[8,4px],[9,4px],[10,4px],[11,0px]]
                        sprite: townspot-xs-rev
                        priority: 28
                        text:
                            font:
                                fill: [[9, global.dark_color],[11, global.black_color]]
                                size: [[9, 10px], [14, 11px], [15, 0px]]
                    text-blend-order:
                        priority: 28
                        font:
                            fill: [[9, global.dark_color],[11, global.black_color]]
                            size: [[9, 10px], [14, 11px], [15, 0px]]
                capital:
                    filter: { country_capital: true, $zoom: { min: 5 } }
                    draw:
                        mapzen_icon_library:
                            size: [[10,5px],[11,0px]]
                            sprite: capital-s
                            priority: 27
                        text-blend-order:
                            priority: 27


        neighbourhoods:
            filter:
                all:
                    - kind:
                        - borough
                        - macrohood
                        - neighbourhood
                        #- microhood       # until Tenderloin microhoods are cleaned up, ban this placetype
                    - $zoom: { min: 10, max: 17 }
                    - is_landuse_aoi: false
                    - function() { return (feature.min_zoom <= ($zoom+0.5) && feature.max_zoom >= ($zoom+1)) }
            draw:
                text-blend-order:
                    visible: global.text_visible_neighbourhoods_e
                    priority: 29
                    buffer: 8px
                    text_wrap: 10
                    max_lines: 2
                    font:
                        fill: global.mid_color
                        size: [[11, 9px], [12, 10px], [13, 12px], [14, 16px], [16, 24px]]
                        weight: normal
                        transform: uppercase
                        stroke: { color: global.text_stroke, width: [[12, 4px], [13, 6px], [15, 8px]] }

            z13-up:
                filter:
                    $zoom: { min: 13 }
                draw:
                    text-blend-order:
                        font:
                            weight: 300

                low_quality_kind_tile_rank:
                    filter:
                        kind_tile_rank: { min: 8 }
                    draw:
                        text-blend-order:
                            visible: false

                z14-up:
                    filter:
                        $zoom: { min: 14 }
                    draw:
                        text-blend-order:
                            text_wrap: 9
                            visible: global.text_visible_neighbourhoods

                    z15-up:
                        filter:
                            $zoom: { min: 15 }
                            min_zoom: { min: 15 }
                        draw:
                            text-blend-order:
                                priority: 19
                                font:
                                    size: 13px

    pois:
        data: { source: mapzen, layer: pois }
        #visible: global.label_visible_poi_landuse
        filter:
            all:
                - not: { kind: [building,address,farm,tree,apron,residential,commercial,industrial] }
                # White list a few kinds to "always" show per the tile zoom inclusion, else test feature's min_zoom
                #- function() { return feature.min_zoom <= $zoom }
                - function() { if( feature.kind == 'restaurant' || feature.kind == 'landmark' || feature.kind == 'cafe' ) { return true } else { return feature.min_zoom <= $zoom } }
        draw:
            mapzen_icon_library:
                visible: global.icon_visible_poi_landuse
                size: global.icon_size
                sprite: function() { return feature.kind; }
                sprite_default: generic
                interactive: global.sdk_interactive
                priority: 65 #function() { return (feature.min_zoom && Math.floor(feature.min_zoom * 1000)) || 65; }
                repeat_group: abc
                buffer: 3px
                text:
                    visible: global.text_visible_poi_landuse
                    text_source: global.ux_language_text_source
                    buffer: 3px
                    text_wrap: 18
                    max_lines: 3
                    font:
                        family: global.text_font_family
                        weight: normal
                        fill: global.dark_color
                        size: [[13, 10px], [14, 11px], [17, 12px], [19, 12px], [20, 14px]]
                        stroke: { color: global.text_stroke, width: 4px }
        # improve legibility at high zooms
        poi_labels-z18:
            filter: { $zoom: { min: 18 } }
            draw:
                mapzen_icon_library:
                    text:
                        # some pois have really long names
                        max_lines: 5
                        font:
                            weight: 600

        low-value-priority:
            filter: { min_zoom: { min: 17 } }
            draw:
                mapzen_icon_library:
                    priority: 70

            traffic_signals:
                filter: { kind: traffic_signals }
                draw:
                    mapzen_icon_library:
                        priority: 71

        # source icon sprite from something other than kind
        sports-pitch:
            filter: { kind: [grass, pitch] }
            draw:
                mapzen_icon_library:
                    sprite: function() { return feature.kind_detail; }
                    # needs a better recreation icon, so just use generic (default) for now
                    #sprite_default: sports
        place_of_worship:
            filter:
                kind: [place_of_worship, wayside_chapel]
            draw:
                mapzen_icon_library:
                    sprite: function() { return feature.religion; }
                    sprite_default: place_of_worship
        # TODO: some or all of this may be unnecessary for the sprite, but is necessary for the early filter
        building-icon:
            filter:
                kind: [apartments, auditorium, building, hangar, manor, recreation_center, retirement_home, terminal]
            draw:
                mapzen_icon_library:
                    sprite: building
            early:
                filter:
                    any:
                        # show labels for smaller landuse areas at higher zooms
                        - { $zoom: [14], area: { max: 200000 } }
                        - { $zoom: [15], area: { max: 20000 } }
                        - { $zoom: [16], area: { max: 5000 } }
                        - { $zoom: [17], area: { max: 1000 } }
                draw:
                    mapzen_icon_library:
                        visible: false
        #end different icon sprites

        #most POI icons without name should be hidden, except these
        no-name:
            filter: { name: false }
            draw:
                mapzen_icon_library:
                    visible: false
            # eg park polygons in SF that have area but no name, sigh
            no-name-no-area:
                filter:
                    kind: true
                    name: false
                draw:
                    mapzen_icon_library:
                        visible: false
                        priority: 72
            sports-pitch:
                filter:
                    $zoom: { min: 17 }
                    kind: [grass, pitch]
                    kind_detail: [baseball, basketball, football, hockey, soccer, tennis]
                draw:
                    mapzen_icon_library:
                        visible: global.icon_visible_poi_landuse_e
                        priority: 69
            z17:
                filter:
                    $zoom: { min: 17 }
                    kind: [parking]
                draw: { mapzen_icon_library: { visible: global.icon_visible_poi_landuse_e } }
            z18:
                # for different styles, different sets
                # since [picnic_site] doesn't have bubble-wrap icon, it's omitted here
                filter:
                    $zoom: { min: 18 }
                    kind: [drinking_water, information, playground, toilets, traffic_signals]
                draw: { mapzen_icon_library: { visible: global.icon_visible_poi_landuse_e } }
            z19:
                filter:
                    $zoom: { min: 19 }
                    kind: [bicycle_parking]
                draw: { mapzen_icon_library: { visible: global.icon_visible_poi_landuse_e } }

        # NOTE: all natural_* should only be in landuse layer
        suppress-icon-always:
            filter:
                kind: [natural_forest, natural_park, natural_wood]
            draw:
                mapzen_icon_library:
                    size: 0px
                    priority: 100
                    text:
                        font:
                            fill: global.mid_color
                            family: global.text_font_family
                            style: italic
                            size: 11px

        # the server should be setting better values here
        z-server-friend:
            hide-until-z12-any:
                filter:
                    kind: [landmark, museum, prison]
                    $zoom: { max: 12 }
                draw:
                    mapzen_icon_library:
                        visible: false
            hide-until-z14-any:
                filter:
                    kind: [natural_forest, natural_park, natural_wood, post_office]
                    $zoom: { max: 14 }
                draw:
                    mapzen_icon_library:
                        visible: false
            hide-until-z15-any:
                filter:
                    $zoom: { max: 15 }
                    kind: [cafe, restaurant]
                draw:
                    mapzen_icon_library:
                        visible: false
            hide-until-z15-no-area:
                filter:
                    area: false
                    $zoom: { max: 15 }
                    kind: [park]
                draw:
                    mapzen_icon_library:
                        visible: false
            hide-until-z15-with-area:
                filter:
                    area: true
                    $zoom: { max: 15 }
                    kind: [nursing_home]
                draw:
                    mapzen_icon_library:
                        visible: false
            hide-until-z16-any:
                filter:
                    kind: [fire_station, grass, peak, police, tram_stop]
                    $zoom: { max: 16 }
                draw:
                    mapzen_icon_library:
                        visible: false
            hide-until-z16-no-area:
                filter:
                    area: false
                    kind: [allotments, college, garden, university]
                    $zoom: { max: 16 }
                draw:
                    mapzen_icon_library:
                        visible: false
            # no POIs for commercial, residential
            hide-until-z17-any:
                filter:
                    $zoom: { max: 17 }
                    kind: [bank, bus_stop, car_sharing, wood]
                draw:
                    mapzen_icon_library:
                        visible: false
            hide-until-z17-with-area:
                filter:
                    area: true
                    $zoom: { max: 17 }
                    kind: [common, grass, houseboat, pedestrian, pitch, railway, ship, wetland]
                draw:
                    mapzen_icon_library:
                        visible: false
            hide-until-z17-no-area:
                filter:
                    area: false
                    $zoom: { max: 17 }
                    # note: atm and drinking_water appear hear and in area versions
                    kind: [accountant, administrative, advertising_agency, animal, architect, association, atm, bakery, bed_and_breakfast, bicycle, bicycle_parking, bicycle_rental_station, books, butcher, car, car_repair, chalet, clothes, company, computer, consulting, convenience, doityourself, drinking_water, dry_cleaning, educational_institution, emergency_phone, employment_agency, estate_agent, fashion, financial, florist, foundation, gift, government, greengrocer, guest_house, hairdresser, hostel, hotel, insurance, it, jewelry, lawyer, mast, memorial, mobile_phone, motel, newspaper, ngo, notary, optician, parking, pet, physician, playground, political_party, post_box, religion, research, subway_entrance, tax_advisor, telecommunication, telephone, theatre, therapist, toilets, traffic_signals, travel_agent, water_tower]
                draw:
                    mapzen_icon_library:
                        visible: false
            hide-until-z18-any:
                filter:
                    kind: [atm, bus_stop, drinking_water]
                    $zoom: { max: 18 }
                draw:
                    mapzen_icon_library:
                        visible: false
            hide-until-z18-no-area:
                filter:
                    $zoom: { max: 18 }
                    area: false
                    kind: [bench, parking, waste_basket]
                draw:
                    mapzen_icon_library:
                        visible: false
            hide-until-z19-any:
                filter:
                    $zoom: { max: 19 }
                    kind: [bicycle_parking, burial_vault, car_sharing]
                draw:
                    mapzen_icon_library:
                        visible: false

            # hide based on kind and area filters
            military-early:
                filter:
                    kind: [military]
                    any:
                        # show labels for smaller landuse areas at higher zooms
                        - { $zoom: [8], area: { max: 50000000 } }
                draw:
                    mapzen_icon_library:
                        visible: false
            university-early:
                filter:
                    kind: [university, college]
                    any:
                        # show labels for smaller landuse areas at higher zooms
                        - { $zoom: [11], area: { max: 2000000 } }
                        - { $zoom: [12], area: { max: 500000 } }
                draw:
                    mapzen_icon_library:
                        visible: false
            school-early:
                filter:
                    kind: [school, kindergarten]
                    any:
                        # show labels for smaller landuse areas at higher zooms
                        - { $zoom: [13], area: { max: 100000 } }
                        - { $zoom: [14], area: { max: 50000 } }
                        - { $zoom: [15], area: { max: 10000 } }
                        - { $zoom: [16], area: { max: 5000 } }
                        - { $zoom: [17], area: { max: 2000 } }
                draw:
                    mapzen_icon_library:
                        visible: false
            garden-area-early:
                filter:
                    kind: [garden, allotments]
                    any:
                        # limit show smaller landuse areas to higher zooms
                        - { $zoom: [12], area: { max: 500000 } }
                        - { $zoom: [13], area: { max: 100000 } }
                        - { $zoom: [14], area: { max: 10000 } }
                        - { $zoom: [15], area: { max: 5000 } }
                draw:
                    mapzen_icon_library:
                        visible: false
            cemetery-early:
                filter:
                    kind: [cemetery]
                    # limit show smaller landuse areas to higher zooms
                    any:
                        - { $zoom: [12], area: { max: 3000000 } }
                draw:
                    mapzen_icon_library:
                        visible: false
            golf_course-early:
                filter:
                    kind: golf_course
                    any:
                        - { $zoom: [12], area: { max: 2500000 } }
                draw:
                    mapzen_icon_library:
                        visible: false
            office-early:
                filter:
                    - { kind: [insurance, office, company], $zoom: [15], area: { max: 10000 } }
                    - { kind: [insurance, office, company], $zoom: [16], area: { max: 5000 } }
                draw:
                    mapzen_icon_library:
                        visible: false
            landuse-labels-green-areas-not-national-park:
                filter:
                    kind: [park, conservation, protected_area, nature_reserve, forest, grass]
                    any:
                    # show labels for smaller landuse areas at higher zooms
                    - { $zoom: { max: 6 }, area: true }
                    - { $zoom: [6],    area: { max: 5000000000 } }
                    - { $zoom: [7],    area: { max: 5000000000 } }
                    - { $zoom: [8],    area: { max: 1000000000 } }
                    - { $zoom: [9],    area: { max: 100000000 } }
                    - { $zoom: [10],   area: { max: 50000000 } }
                    - { $zoom: [11],   area: { max: 25000000 } }
                    - { $zoom: [12],   area: { max: 5000000 } }
                    - { $zoom: [13],   area: { max: 200000 } }
                    - { $zoom: [14],   area: { max: 50000 } }
                    - { $zoom: [15],   area: { max: 10000 } }
                    - { $zoom: [16],   area: { max: 1000 } }
                draw:
                    mapzen_icon_library:
                        visible: false
                wilderness-areas-early:
                    filter: function() { return $zoom < 9 && feature.name && (feature.name.indexOf("Wilderness") > -1 || feature.name.indexOf("BLM") > -1 || feature.protect_class == '1' || feature.protect_class == '1a' || feature.protect_class == '1b' ); }
                    draw:
                        mapzen_icon_library:
                            visible: false
                not-national-park:
                    filter: function() { return feature.name && !((feature.name.indexOf("National Park") > -1) || feature.name.indexOf("National Monument") > -1); }
                    early:
                        filter: { $zoom: { max: 8 } }
                        draw:
                            mapzen_icon_library:
                                visible: false
            landuse-labels-not-any-above:
                filter:
                    $zoom: { max: 6 }
                    not: { kind: [aerodrome, airport, allotments, aquarium, attraction, battlefield, beach, cemetery, college, conservation, forest, garden, glacier, golf_course, grass, kindergarten, landmark, maze, national_park, nature_reserve, park, playground, protected_area, resort, school, stadium, station, theme_park, university, winery, winter_sports, zoo] }
                draw:
                    mapzen_icon_library:
                        visible: false
            glacier:
                filter: { $zoom: { max: 14 }, kind: glacier, area: false }
                draw:
                    mapzen_icon_library:
                        visible: false

        # set special priority, sprite, and text styles per kind
        has-area:
            filter: { area: true }
            draw:
                mapzen_icon_library:
                    priority: 41

        parks:
            filter:
                - kind: [national_park, battlefield, park, protected_area, forest, beach]
            draw:
                mapzen_icon_library:
                    visible: global.icon_visible_landuse_green
                    size: global.icon_size_green
                    text:
                        visible: global.text_visible_landuse_green
                        font:
                            fill: global.dark_color
                            style: italic
            park-icon:
                filter:
                    - kind: [national_park, battlefield, protected_area]
                draw:
                    mapzen_icon_library:
                        sprite: park
        airport:
            filter:
                kind: [airport, aerodrome]
            draw:
                mapzen_icon_library:
                    priority: 42
                    visible: global.icon_visible_landuse_green
                    size: global.icon_size_green
                    text:
                        visible: global.text_visible_landuse_green
                        text_source: global.ux_language_text_source_iata
            early:
                filter: { $zoom: [9,10,11] }
                draw: { mapzen_icon_library: { text: { text_source: iata } } }
        enclosure-related:
            filter:
                kind: [enclosure, animal]
            draw:
                mapzen_icon_library:
                    priority: 43
                    size: 0px
                    #: dot-black
                    text:
                        text_wrap: 10
                        font:
                            style: italic
                            weight: normal
        glacier:
            filter:
                kind: glacier
            draw:
                mapzen_icon_library:
                    size: 0px
                    #visible: false
                    text:
                        visible: true
                        priority: 44
                        text_wrap: 10
                        font:
                            weight: normal
                            style: italic
                            fill: global.dark_color

        landuse-labels-not-any-above:
            filter:
                not: { kind: [aerodrome, airport, allotments, aquarium, attraction, battlefield, beach, cemetery, college, conservation, forest, garden, glacier, golf_course, kindergarten, landmark, maze, national_park, nature_reserve, park, playground, protected_area, resort, school, stadium, station, theme_park, university, winery, winter_sports, zoo] }
            draw:
                mapzen_icon_library:
                    priority: 43

        building-like:
            filter: { kind: [commercial,residential,warehouse,public,dormitory], osm_relation: false }
            draw:
                mapzen_icon_library:
                    sprite: building

        station-train-subway:
            filter: { kind: [station, train_station] }
            draw:
                mapzen_icon_library:
                    visible: global.icon_visible_station
                    size: [[13, 12px], [14, 12px], [15, 16px], [17, 18px], [18, 20px]]
                    priority: 42
                    text:
                        visible: global.text_visible_station
            station-early:
                filter:
                    $zoom: { max: 11 }
                draw:
                    mapzen_icon_library:
                        visible: false
            # for a transit style we'd want to see **all**, so don't move this above (it's special to this style)
            low-priority-early:
                filter: { kind_tile_rank: { min: 5 }, $zoom: { min: 0, max: 13 } }
                draw:
                    mapzen_icon_library:
                        visible: false
            low-priority-early-z13:
                filter: { kind_tile_rank: { min: 5 }, $zoom: [13] }
                draw:
                    mapzen_icon_library:
                        visible: false
            low-priority-early-z14:
                filter: { kind_tile_rank: { min: 7 }, $zoom: [14] }
                draw:
                    mapzen_icon_library:
                        text: { visible: false }

        garden-no-area-early:
            filter: { kind: [garden, allotments], $zoom: [16], area: false }
            draw:
                mapzen_icon_library:
                    priority: 45
                    size: 14px
                    text:  { font: { size: 10px, style: italic } }
        garden-no-area-later:
            filter: { kind: [garden, allotments], $zoom: { min: 17 }, area: false }
            draw:
                mapzen_icon_library:
                    priority: 45
                    size: 16px
                    text:  { font: { size: 11px, style: italic } }
        gate:
            filter: { kind: gate, name: true  }
            draw: { mapzen_icon_library: { sprite: generic } }

        parking-labels:
            filter:
                kind: [parking]
                $zoom: { min: 18 }
            draw:
                mapzen_icon_library:
                    text:
                        visible: global.text_visible_poi_landuse
                        font:
                            size: 10px
        tower:
            filter: { kind: [tower], label_placement: true }
            draw:
                mapzen_icon_library:
                    size: 0px
                    #visible: false
                    text:
                        font:
                            style: italic

        bus_stop:
            filter:
                kind: [bus_stop]
            draw:
                mapzen_icon_library:
                    size: [[18,12px],[20,18px]]
                    text:
                        optional: true
                        font:
                            size: 11px
                            weight: normal
            early:
                filter: { $zoom: { max: 19 } }
                draw:
                    mapzen_icon_library:
                        text:
                            visible: false

        airport-gate:
            filter: { kind: aeroway_gate }
            draw:
                mapzen_icon_library:
                    visible: false
                text-blend-order:
                    visible: global.text_visible_airport_gate
                    text_source: ref
                    priority: 63
                    font:
                        fill: global.mid_color
                        size: [[16,9px],[17,12px],[20,14px]]
            later:
                filter: { $zoom: { min: 19 } }
                draw:
                    mapzen_icon_library:
                        text:
                            font:
                                weight: 600

        highway-exit:
            filter: { kind: motorway_junction, $zoom: { min: 14 } }
            draw:
                mapzen_icon_library:
                    visible: false
                text-blend-order:
                    visible: global.text_visible_exits
                    text_source: ref
                    priority: 63
                    font:
                        family: Montserrat
                        fill: global.mid_color
                        size: [[12,9px],[15,12px],[17,14px]]
                        stroke: { color: global.text_stroke, width: 4px }
            later:
                filter: { $zoom: { min: 16 } }
                draw:
                    mapzen_icon_library:
                        text:
                            font:
                                weight: 600

        transit-overlay-station-labels:
            filter:
                all:
                    - function() { return global.sdk_transit_overlay; }
                    - kind: [station, tram_stop, bus_station, subway_entrance, halt, stop, platform, bus_stop, stop_position ]
                    - any:
                        - area: false
                        - area: true
                          all:
                              - $geometry: point
                              - kind: true
            draw:
                mapzen_icon_library:
                    size: [[13, 12px], [16, 16px], [19, 20px]]
                    interactive: global.sdk_interactive
                    priority: 15
                    text:
                        buffer: 4px
                        move_into_tile: false # preserves text alignment w/icons in JS
                        #anchor: bottom
                        #offset: [[13, [0, 6px]], [16, [0, 8px]], [19, [0, 10px]]] # offset tracks alongside icon size (half icon height)
                        interactive: global.sdk_interactive
                        priority: 16
                        font:
                            fill: global.black_color
                            weight: normal
                            size: 11px
                            stroke: { color: global.text_stroke, width: 3px }
            poi_labels-z14:
                filter: { $zoom: [14] }
                draw: { mapzen_icon_library: { text: { font: { size: 11px } } } }
            poi_labels-z15:
                filter: { $zoom: [15,16,17] }
                draw: { mapzen_icon_library: { text: { font: { size: 12px, stroke: { width: 2px } } } } }
            poi_labels-z18:
                filter: { $zoom: [18,19] }
                draw: { mapzen_icon_library: { text: { font: { size: 12px, weight: 600, stroke: { width: 3px } } } } }
            poi_labels-z20-up:
                filter: { $zoom: { min: 20 } }
                draw: { mapzen_icon_library: { text: { font: { size: 14px, weight: 600, stroke: { width: 3px }  } } } }
            station-train-subway:
                filter: { kind: [station, train-station, train_station] } #, $zoom: { min: 13 }
                draw:
                    mapzen_icon_library:
                        sprite: train_station
                        size: [[13, 12px], [14, 14px], [15, 16px], [17, 20px]]
                        priority: 11
                        text:
                            #offset: [[13, [0, 6px]], [14, [0, 7px]],[15, [0, 8px]], [17, [0, 10px]]]
                            priority: 12
                low-priority-early:
                    filter: { kind_tile_rank: { min: 3 }, $zoom: { min: 0, max: 12 } }
                    draw:
                        mapzen_icon_library:
                            size: [[12, 5px], [14, 6px], [15, 16px]]
                            text:
                                visible: false
                    long-tail:
                        filter: { kind_tile_rank: { min: 10 }, $zoom: [10] }
                        draw:
                            mapzen_icon_library:
                                visible: false
                low-priority-early-z12:
                    filter: { kind_tile_rank: { min: 8 }, $zoom: [12] }
                    draw:
                        mapzen_icon_library:
    #                        visible: false
                            size: [[12, 5px], [14, 6px], [15, 16px]]
                            text:
                                visible: false
                low-priority-early-z13:
                    filter: { kind_tile_rank: { min: 8 }, $zoom: [13] }
                    draw:
                        mapzen_icon_library:
                            #visible: false
                            size: [[12, 8px], [14, 6px], [15, 16px]]
                            text:
                                visible: false
                low-priority-early-z14:
                    filter: { kind_tile_rank: { min: 7 }, $zoom: [14] }
                    draw:
                        mapzen_icon_library:
                            size: [[12, 10px], [14, 11px], [15, 16px]]
                            #visible: false
                            text:
                                visible: false
                late:
                    filter: { $zoom: { min: 16 } }
                    draw:
                        mapzen_icon_library:
                            text:
                                font:
                                    weight: 600
                                    size: 12px
            subway-early:
                filter: { is_subway: true, is_train: false, $zoom: { max: 12 } }
                draw:
                    mapzen_icon_library:
                        visible: false
                        text:
                            visible: false
            halt-early:
                filter: { kind: [halt,stop], $zoom: { max: 15 } }
                draw:
                    mapzen_icon_library:
                        size: [[15, 8px], [16, 18px]]
                        visible: global.sdk_transit_overlay
                        sprite: light_rail
                        text:
                            visible: false
            platform-early:
                filter: { kind: [platform] }
                draw:
                    mapzen_icon_library:
                        size: [[15, 8px], [16, 18px]]
                        visible: global.sdk_transit_overlay
                        sprite: generic
                        text:
                            visible: false
            tram-stop-early:
                filter: { kind: [tram_stop], $zoom: { max: 16 } }
                draw:
                    mapzen_icon_library:
                        size: [[13, 0px], [14, 7px], [15, 8px]]
                        visible: global.sdk_transit_overlay
                        sprite: light_rail
                        text:
                            visible: false
            tram-stop:
                filter: { kind: tram_stop, $zoom: { min: 16 } }
                draw:
                    mapzen_icon_library:
                        size: [[16, 12px], [17, 14px], [18, 18px]]
                        sprite: light_rail
                        #text:
                            #offset: [[13, [0, 6px]], [16, [0, 9px]]]
            bus-like-labels:
                filter:
                    kind: [platform, stop_position]
                draw:
                    mapzen_icon_library:
                        size: [[13, 8px], [16, 10px], [17, 12px], [18, 18px]]
                        sprite: bus_station
                        text:
                            interactive: global.sdk_interactive
                            font:
                                fill: global.black_color
                                size: 12px
                                stroke: { color: global.text_stroke, width: 4px }
            bus-station-labels:
                filter:
                    kind: [bus_station, bus_stop]
                    $zoom: { min: 16 }
                draw:
                    mapzen_icon_library:
                        size: [[13, 12px], [16, 18px]]
                        sprite: bus_station
                        priority: 17
                        text:
                            interactive: global.sdk_interactive
                            priority: 18
                            font:
                                fill: global.black_color
                                size: 12px
                                stroke: { color: global.text_stroke, width: 4px }
                bus_stop:
                    filter:
                        kind: [bus_stop]
                        $zoom: { max: 19 }
                    draw:
                        mapzen_icon_library:
                            size: [[13, 8px], [19, 18px]]
                            text:
                                visible: false
            subway-entrance:
                filter:
                    kind: [subway_entrance]
                draw:
                    mapzen_icon_library:
                        sprite: subway_entrance
                        size: [[17, 12px], [19, 14px]]
                        priority: 19
                        text:
                            #offset: [[17, [0, 6px]], [19, [0, 7px]]] # offset tracks alongside icon size (half icon height)
                            priority: 20
                            interactive: global.sdk_interactive
                            text_source: function() { if( feature.ref || feature.name ) { if( feature.ref && feature.name ) { return '[' + feature.ref + ']\n' + feature.name; } else { return feature.name; } } else { return "Entrance"; } }
                            font:
                                fill: global.black_color
                                size: 12px
                                stroke: { color: global.text_stroke, width: 4px }


    landuse:
        data: { source: mapzen }
        draw:
            dots:
                order: global.feature_order
                visible: false
            medium-dots:
                order: global.feature_order
                visible: false
            horizontal-bars:
                order: global.feature_order
                visible: false
            horizontal-bars-rev:
                order: global.feature_order
                visible: false
            dots-rev:
                order: global.feature_order
                visible: false
            dots-rev-grid:
                order: global.feature_order
                visible: false
            pixel-pattern-light:
                order: global.feature_order
                visible: false
            pixel-pattern-bright:
                order: global.feature_order
                visible: false
            tiny-dots:
                order: global.feature_order
                visible: false
            polygons:
                order: global.feature_order
                visible: false
            lines:
                order: global.feature_order

        landuse-labels:
            filter:
                all:
                    - label_placement: true
                    - name: true
            draw:
                text-blend-order:
                    text_source: global.ux_language_text_source
                    interactive: global.sdk_interactive
                    move_into_tile: true
                    priority: 100
                    visible: global.text_visible_landuse_generic
                    font:
                        fill: global.mid_color
                        family: global.text_font_family
                        style: italic
                        size: 11px
                        stroke: { color: global.text_stroke, width: 1px }

        # tier1:
        national_park:
            filter:
                all:
                    - kind: [national_park, battlefield, protected_area]
                any:
                    - not: { operator: [ "United States Forest Service" ] }
                    - protect_class: ['2','3','5']
            draw:
                polygons:
                    style: dots
                    color: global.lighter_color
                    order: 18
                    visible: true
            us_national_park:
                # yosemite national park, death valley national park, grand canyon national park
                filter:
                    any:
                        - operator: [ "United States National Park Service" ]
                        - protect_class: ['2','3','5']
                draw:
                    polygons:
                        style: pixel-pattern-light
                        visible: true

        # tier2:
        # effectively wilderness
        conservation:
            filter:
                $zoom: { min: 4 }
                kind: [protected_area, nature_reserve, national_park]
                not: { protect_class: ['2','3','5']}
            draw:
                polygons:
                    style: pixel-pattern-light
                    color: global.white_color
                    visible: true

        national_forest_level_6:
            filter:
                all:
                    - kind: forest
                any:
                    - protect_class: ['6']
                    - operator: ['United States Forest Service']
            draw:
                polygons:
                    style: pixel-pattern-bright
                    color: global.lighter_color
                    visible: true

        forest-landcover:
            filter: { kind: [forest, natural_forest, wood, natural_wood, natural_park], $zoom: { min: 10 }, not: { operator: "United States Forest Service" } }
            draw:
                polygons:
                    style: pixel-pattern-light
                    visible: true

        parks-and-national-forests-not-national-park:
            filter:
                all:
                    - $zoom: { min: 4 }
                    - kind: [park, national_park]
                any:
                    - not: { operator: [ "United States National Park Service", "United States Forest Service" ] }
                    - not: { protect_class: ['2','3','5','6'] }
            # default for national forests and more?
            draw:
                polygons:
                    style: dots
                    color: global.lighter_color
                    visible: true
            national_park:
                #filter: function() { return feature.name && (feature.name.indexOf('National Park') > -1); }
                filter:
                    all:
                        - kind: national_park
                        - not: [ protect_class: ['2','3','5','6'], operator: [ "United States National Park Service"] ]
                draw:
                    polygons:
                        style: pixel-pattern-light
                        visible: true

        # gotta be a protected area to draw green, not just a landcover type
        farm:
            filter:
                kind: [farm, farmland]
                $zoom: { min: 10}
            draw:
                polygons:
                    style: tiny-dots
                    color: global.offwhite_color
                    visible: true

        #tier3:
        university:
            filter:
                kind: [university, college]
            draw:
                polygons:
                    style: dots-rev
                    color: global.lightest_color
                    visible: true
        #tier4:
        cemetery:
            filter:
                kind: cemetery
            draw:
                polygons:
                    style: tiny-dots
                    color: global.lighter_color
                    visible: true

        golf_course:
            filter:
                kind: golf_course
            draw:
                polygons:
                    style: medium-dots
                    color: global.lightest_color
                    visible: true

        hospital:
            filter:
                kind: hospital
            draw:
                polygons:
                    style: medium-dots
                    color: global.lightest_color
                    visible: true

        sports_centre:
            filter:
                kind: sports_centre
            draw:
                polygons:
                    style: dots-rev-grid
                    color: global.offwhite_color

        recreation_ground:
            filter:
                kind: recreation_ground
            draw:
                polygons:
                    style: dots-rev-grid
                    color: global.offwhite_color
                    visible: true
        stadium:
            filter:
                kind: stadium
            draw:
                polygons:
                    style: dots-rev-grid
                    color: global.offwhite_color
                    visible: true
        zoo:
            filter:
                kind: [zoo, wildlife_park]
            draw:
                polygons:
                    style: tiny-dots
                    color: global.offwhite_color
                    visible: true

        winter_sports:
            filter:
                kind: winter_sports
            draw:
                polygons:
                    color: [[9, global.white_color], [20, global.offwhite_color]]
                    visible: true

        man-made:
            filter: { kind: [pier,wastewater_plant,works,bridge,tower,breakwater,water_works,groyne,dike,cutline] }
            draw:
                polygons:
                    style: horizontal-bars
                    color: global.lightest_color
                    visible: true
            pier:
                filter: { kind: [pier,bridge,breakwater,groyne,dike,cutline] }
                draw:
                    polygons:
                        color: global.offwhite_color
                        visible: true
        tier5:
            filter:
                all:
                    - kind:
                        - theme_park
                        - resort
                        - aquarium
                        - winery
                        - maze
                        - beach
            tourism-related:
                filter:
                    kind:
                        - theme_park
                        - resort
                        - aquarium
                        - winery
                        - maze
                draw:
                    polygons:
                        style: dots
                        color: global.light_color
                        visible: true
            beach:
                filter:
                    kind: beach
                draw:
                    polygons:
                        style: dots
                        color: global.lightest_color
                        visible: true
        #tier6:
        garden:
            filter:
                kind: garden
            draw:
                polygons:
                    style: tiny-dots
                    color: global.light_color
                    visible: true

        parking:
            filter:
                all:
                    - kind: parking
                    - $zoom: { min: 14 }
                any:
                    - { $zoom: { min: 14 }, area: { min: 10000 } }
                    - { $zoom: { min: 15 }, area: { min: 5000 } }
            draw:
                polygons:
                    style: horizontal-bars-rev
                    color: global.ultralight_color
                    visible: true

        pedestrian:
            filter:
                kind: [pedestrian,common,footway]
            draw:
                polygons:
                    style: dots
                    color: global.offwhite_color
                    visible: true
            green-stuff:
                filter:
                    surface: [grass]
                draw:
                    polygons:
                        style: dots
                        color: global.lighter_color
        pitch:
            filter: { kind: pitch }
            draw:
                polygons:
                    style: tiny-dots
                    color: global.lightest_color
                    visible: true
                outline:
                    style: lines
                    order: global.feature_order
                    color: global.ultralight_color
                    width: [[14, 0px], [15, 1px], [18, 2px]]

        playground:
            filter:
                kind: playground
            draw:
                polygons:
                    style: dots-rev
                    color: global.ultralight_color
                    visible: true

        school:
            filter:
                kind: school
            draw:
                polygons:
                    style: dots-rev
                    color: global.offwhite_color
                    visible: true

        minor-landuse:
            filter:
                kind:
                    - attraction
                    - artwork
                    - wilderness_hut
                    - hanami
            draw:
                polygons:
                    style: dots
                    color: global.light_color
                    visible: true

        landuse-not-filtered:
            # runways and taxiways are also in the roads layer as lines
            # these ones are probably duplicate features, but have AREA (a good thing)
            filter:
                kind:
                    - runway
                    - apron
                    - beach
                    - roller_coaster
                    - amusement_ride
                    - summer_toboggan
                    - trail_riding_station
                    - water_slide
                    - carousel
                    - animal
                    - enclosure
                    - petting_zoo
                    - aviary
            draw:
                polygons:
                    order: global.feature_order
                    visible: false

            runway:
                filter:
                    kind: runway
                draw:
                    polygons:
                        visible: true
                        color: global.mid_color
            apron:
                filter:
                    kind: apron
                    $zoom: { min: 15 }
                draw:
                    polygons:
                        style: dots
                        color: global.offwhite_color
                        order: 60
                        visible: true

            minor-amusement-park-landuse:
                filter:
                    kind:
                        - roller_coaster
                        - amusement_ride
                        - summer_toboggan
                        - trail_riding_station
                        - water_slide
                        - carousel
                draw:
                    polygons:
                        style: dots
                        color: global.light_color
                        visible: true

            minor-zoo-landuse:
                filter:
                    kind:
                        - animal
                        - enclosure
                        - petting_zoo
                        - aviary
                draw:
                    polygons:
                        style: dots
                        color: global.lighter_color
                        visible: true

        # city_walls:
        #     filter: { kind: city_wall }
        #     draw:
        #         lines:
        #             order: 8
        #             color: global.city_wall
        #             width: [[12, 0.75px], [13, 1.0px], [14, 1.2px], [15, 2.0px], [16, 2.5px], [19, 6m]]
        retaining_wall:
            filter: { kind: retaining_wall }
            draw:
                lines:
                    color: global.lightest_color
                    width: [[14, 0.5px], [15, 1.0px], [16, 1.5px], [17, 2.0px], [19, 2m]]
        #     filter: { kind: snow_fence }
        #     draw:
        #         lines:
        #             order: 8
        #             color: [1.0,0.0,0.0] # global.snow_fence
        #             width: [[14, 0.5px], [15, 1.0px], [16, 1.5px], [17, 2.0px], [19, 4m]]

        fence:
            filter: { kind: fence }
            draw:
                lines:
                    color: global.lightest_color
                    width: [[14, 0.5px], [15, 1.0px], [16, 1.5px], [19, 0.5m]]



#    transit-bus-roads:
#        data: { source: mapzen, layer: roads }
#        filter: { is_bus_route: true }
#        draw:
#            lines:
#                visible: global.sdk_transit_overlay
#                interactive: false
#                color: [[13,[0,0,1,0.5]],[15,blue]]
#                width: [[11,0.5px],[12,0.8px],[16,1.25px],[18,1m]]
#                # let roads sort themselves past zoom 14
#                order: 488
#                # but give them all the same outline
#                outline:
#                    order: 487