bubble-wrap-style.yaml

Author: Geraldine Sarmiento, Nathaniel V. Kelso, Patricio Gonzalez Vivo, Brett Camper, Peter Richardson

import:
    - themes/bubble-wrap-icons.yaml
    - themes/label-5.yaml

# NOTE: As of v10, USA and international shields are no longer included by default. Instead import each theme.

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_point_of_view: false                 # 2-char ISO country code (generally)
    ux_point_of_view_fallback: false        # 2-char ISO country code (generally)

    ux_point_of_view_kind: |
        function(feature) { return (global.ux_point_of_view && feature['kind:'+global.ux_point_of_view]) || (global.ux_point_of_view_fallback && feature['kind:'+global.ux_point_of_view_fallback]) || feature.kind }

    ux_point_of_view_kind_filter_country: |
        function() {
            // if a ux_point_of_view has been defined use that, else fallback POV, else use the feature's default kind
            var kind = global.ux_point_of_view_kind(feature);
            switch( kind ) {
                case( 'country' ):
                case( 'indefinite' ):
                    return true;
                default:
                    return false;
            }
        }
    ux_point_of_view_kind_filter_disputed_etc: |
        function() {
            // if a ux_point_of_view has been defined use that, else fallback POV, else use the feature's default kind
            var kind = global.ux_point_of_view_kind(feature);
            switch( kind ) {
                case( 'disputed' ):
                case( 'indeterminate' ):
                case( 'lease_limit' ):
                case( 'line_of_control' ):
                case( 'overlay_limit' ):
                case( 'disputed_breakaway' ):
                case( 'disputed_claim' ):
                case( 'disputed_elusive' ):
                case( 'disputed_reference_line' ):
                    return true;
                default:
                    return false;
            }
        }
    ux_point_of_view_kind_filter_disputed_star: |
        function() {
            // if a ux_point_of_view has been defined use that, else fallback POV, else use the feature's default kind
            var kind = global.ux_point_of_view_kind(feature);
            switch( kind ) {
                case( 'disputed' ):
                case( 'line_of_control' ):
                case( 'disputed_breakaway' ):
                case( 'disputed_claim' ):
                case( 'disputed_elusive' ):
                case( 'disputed_reference_line' ):
                    return true;
                default:
                    return false;
            }
        }
    ux_point_of_view_kind_filter_unrecognized: |
        function() {
            // if a ux_point_of_view has been defined use that, else fallback POV, else use the feature's default kind
            var kind = global.ux_point_of_view_kind(feature);
            switch( kind ) {
                case( 'unrecognized' ):
                    return true;
                case( 'unrecognized_country' ):
                    return true;
                case( 'unrecognized_region' ):
                    return true;
                default:
                    return false;
            }
        }
    ux_point_of_view_kind_filter_country_capital: |
        function() {
            // if a ux_point_of_view has been defined use that, else fallback POV, else use the feature's default country capital boolean
            if (global.ux_point_of_view && feature['country_capital:'+global.ux_point_of_view] != null) {
                return feature['country_capital:'+global.ux_point_of_view];
            }
            else if (global.ux_point_of_view_fallback && feature['country_capital:'+global.ux_point_of_view_fallback] != null) {
                return feature['country_capital:'+global.ux_point_of_view_fallback];
            }
            else {
                return feature.country_capital;
            }
        }

    ux_language: false             # 2-char l10n language code (generally)
    ux_language_fallback: false    # 2-char l10n language code (generally)
    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_construction: |
        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 + ' (construction)') : '(construction)';
        }
    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
    #
    # TOLL ROAD OVERLAY
    # should default to "false", with SDK overriding it to true or false,
    # or app logic sets other booleans that triggers auto behavior later
    sdk_toll_road_overlay: false
    #
    # HEAVY GOODS VEHICLE OVERLAY
    # should default to "false", with SDK overriding it to true or false,
    # or app logic sets other booleans that triggers auto behavior later
    sdk_hgv_overlay: false
    #
    # SHIELDS
    sdk_shield_color: [0.506,0.192,0.169]
    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; }
    #
    #
    #label styling
    text_fill: [0.300, 0.300, 0.300]         # BLACK
    text_fill2: '#555'                       # WHITE
    text_fill_road_e: '#555'                 # WHITE
    text_fill_exits: [0.920,0.398,0.340]     # motorway junctions, highway_casing1
    text_fill_building: '#ccc'               # WHITE
    text_fill_address: '#aaa'                # HUH
    text_fill_water: '#4c89b5'               # blue
    text_fill_park: [0.35,0.35,0.35]         # black
    text_fill_beach: [0.35,0.35,0.35]        # black
    text_fill_piste: '#444'                  # dark gray
    text_fill_piste_e: '#666'                # dark gray early
    text_fill_shield: white                  # road shield fill color
    text_stroke: [0.870,0.870,0.870]         # land color
    text_stroke_water: [0.9, 0.9, 0.9]       # water stroke color
    text_stroke_park: '#bddec5'              # park stroke color
    text_stroke_building: [0.83, 0.83, 0.83] # building stroke color
    text_stroke_address:  [0.85, 0.85, 0.85] # address stroke color
    text_stroke_road1: [0.9, 0.9, 0.9]       # road stroke color highway
    text_stroke_road2: [0.9, 0.9, 0.9]       # road stroke color major road
    text_stroke_road3: [0.9, 0.9, 0.9]       # road stroke color major road route
    text_stroke_road4: [0.9, 0.9, 0.9]       # road stroke color minor road
    text_stroke_shield: '#D16768'            # road shield stroke color &highway_casing1
    townspot_sprite: townspot-m-rev          # depends on land color and text settings
    text_font_family: 'Open Sans'            # branding in asperational Unicode, yo (or Helvetica)
    #
    #roads
    highway1: [0.988,0.495,0.439]
    highway1_e: [0.988,0.495,0.439]
    highway_link1: [1.000,0.631,0.590]
    highway_casing1: [0.859,0.859,0.859]
    highway_tunnel1: [0.800,0.800,0.800]
    highway_tunnel_casing1: [0.870,0.870,0.870]
    highway_link_tunnel_casing1: [0.8, 0.8, 0.7]
    ferry1: '#8bb5e4'
    rail1: '#999'
    rail1_e: '#bbb'
    rail2: '#777'                           # less important rail (service, sidings)
    major_road1: [1, 1, 1]
    major_road1b: [1.0,1.0,1.0]
    major_road1c: white                     #15%
    major_road2: [1.0,1.0,1.0]
    major_road2a: [1.0,1.0,1.0]
    major_road2b: [1.0,1.0,1.0]
    major_road3: [1.0,1.0,1.0]
    major_road4: white
    major_road5: white
    major_casing1: [0.859,0.859,0.859]      # same as highway_casing1
    major_casing2: [0.859,0.859,0.859]      # zoomed out
    major_tunnel1: [.870,0.870,0.870]       # light orange (major_route1)
    major_tunnel_casing1: [0.780,0.780,0.780]
    major_route1: [1.000,0.631,0.590]
    major_route2: [1.000,0.752,0.730]       # zoomed out
    minor_route: [1.000,0.631,0.590]        # same as major_route
    minor_road1: [0.9,0.9,0.9]              # natural earth
    minor_road2: [0.9,0.9,0.9]              # natural earth, same as major_road2
    minor_road3: [0.9,0.9,0.9]
    minor_road4: [0.9,0.9,0.9]              # zoomed out
    minor_road5: [0.9,0.9,0.9]              # zoomed out, again
    minor_casing1: white                    # same as highway_casing1
    minor_casing2: white                    # zoomed out
    minor_tunnel1: [0.8, 0.8, 0.7]
    minor_tunnel_casing1: white
    service_road1: white
    service_road2: white
    service_road_casing1: [0.770,0.770,0.770]
    service_road_casing2: white
    path1: [0.91,0.91,0.91]
    path2: [0.91,0.91,0.91]                 # zoomed out
    path_casing1: [0.875,0.875,0.875]
    path_bridge_casing1: [0.870,0.870,0.870]
    path_bridge_casing2: [0.870,0.870,0.870] # zoomed out
    path_steps1: [0.91,0.91,0.91]
    path_steps1_b: '#f0ebeb'
    piste_easy: [0.367,0.750,0.622]
    piste_intermediate: [0.420,0.678,0.863]
    piste_advanced: [0.450,0.450,0.450]
    piste_expert: [0.450,0.450,0.450]
    #
    #boundaries
    country_boundary: [1.0,1.0,1.0]
    region_boundary: [0.96,0.96,0.96]
    subregion_boundary: '#bbb'
    city_wall: [0.682,0.682,0.682]
    retaining_wall: [0.827,0.808,0.780]
    snow_fence: [0.827,0.808,0.780]
    fence: [0.827,0.808,0.780]
    #
    #landuse
    water1: [0.83, 0.83, 0.83]              # water
    water2: [0.83, 0.83, 0.83]              # playa
    water3: [0.83, 0.83, 0.83]              # intermittent water (not full playa)
    water1_o: '#9dc3de'                     # water stroke
    water2_o: '#9dc3de'                     # water stroke 2
    earth1: [0.870,0.870,0.870]             # land color, used to set scene background color
    earth1_r: '#666'                        # land color road
    earth2: '#e9e4e0'                       # urban
    earth2_v: false                         # urban
    earth2_e: '#b3b3b3'                     # urban early
    earth2_e2: '#b3b3b3'                    # urban early fade in
    earth2_e3: '#bbbbbb'                    # urban early fade in 3
    earth2_ev: true                         # urban early visibility
    green1: [0.140,0.843,0.824]             # park
    green1_r: [0.140,0.843,0.824]           # roads in parks
    green1_b: '#94d8d6'                     # buildings in parks
    green1_bo: '#7fc3c1'                    # buildings in parks, outlines
    green1_w: '#b7d7bf'                     # wilderness area
    green1_ws: '#aed0b6'                    # wilderness area stroke
    green1b: [0.80,0.80,0.80]               # park
    green2: [0.547,0.760,0.590]             # cemetery
    green2_r: [0.7,0.7,0.7]                 # cemetery road
    green3: [0.000,0.779,0.328]             # golf course
    green4: '#526054'                       # farm faint
    green4_v: true                          # farm faint
    green5: '#5a695c'                       # farm
    green6: '#648560'                       # nature reserve
    green7: [0.169,0.651,0.631]             # forest
    green8: [0.123,0.770,0.587]             # conservation
    green9: '#cfe3d4'                       # forest (landcover)
    green9_e: '#cfe3d4'                     # forest (landcover) early
    green9_v: true                          # forest (landcover) visibility
    green10: '#c7d4c0'                      # sports_centre
    green11: '#d8ddd0'                      # minor zoo related AOIs
    green11_o: '#aec7b5'                    # minor zoo related AOIs outline
    orange1: '#bfb08e'                      # stadium
    orange2: '#d8ccb0'                      # pitch (play field)
    orange3: '#b9a597'                      # racetrack (play field)
    brown1: [0.814,0.692,0.570]             # university
    brown1_r: [0.814,0.692,0.570]           # roads in university
    brown1_b: [.65, .65, .65]               # university buildings
    brown1_bo: [.8, .8, .8]                 # university building outlines
    brown2: '#ada497'                       # school
    brown3: '#c7b7a2'                       # playground
    red1: [0.840,0.503,0.541]               # hospital
    red1_r: [0.840,0.503,0.541]             # roads in hospital
    red1_b: [.65, .65, .65]                 # hospital buildings
    red1_bo: [.8, .8, .8]                   # hospital building outlines
    grey1: '#717171'                        # pedestrian, retail, airport apron, parking, church
    grey1_e: '#cac6c4'                      # pedestrian, retail, airport apron, parking, church early zoom 14
    grey1_v: true                           # pedestrian, retail, airport apron, parking, church
    grey2: [0.5, 0.5, 0.5]                  # airport runway
    grey3: grey                             # railway
    grey4: '#ffc52a'                        # airport taxiway
    grey5: '#ffc52a'                        # airport taxiway
    grey6: '#c6c6c6'                        # industrial
    grey6_b: [.65, .65, .65]                # industrial buildings
    grey6_bo: [.8, .8, .8]                  # industrial building outlines
    grey7: '#ecebe9'                        # pedestrian, match minor road / path color
    grey7_v: true                           # pedestrian visibility
    grey8: '#ecebe9'                        # winter sports
    grey8_v: true                           # winter sports visibility
    grey9: [.7, .0, .0, 0.5]                # [.7, .7, .7]        # transit platform
    grey9_o: [.5, .5, .5]                   # transit platform outline
    grey9_v: true                           # transit platform visibility
    grey10: '#d4cce6'                       # generic major landuse (theme park, resort, aquarium, winery)
    grey10_o: '#bcb9c5'                     # generic major landuse outline
    grey11: '#d7d7d7'                       # generic minor landuse (attraction, artwork)
    grey11_o: '#cccccc'                     # generic minor landuse outline
    grey12: '#cfcfcf'                       # generic minor amusements (roller coasters, rides, slide, carousel)
    grey12_o: '#c5c5c5'                     # generic minor amusements
    purple: '#f0e1e1'                       # airport
    purple_v: false                         # airport
    purple_b: '#c2c3c4'                     # airport buildings
    purple_bo: '#969798'                    # airport buildings outline
    mystry1: '#bfb08e'                      # recreation ground
    yellow1: '#e7eda8'                      # beach
    building1: [0.784, 0.784, 0.784]        # building
    building2: [.860, .860, .860]           # building stroke
    building_o:  5                          # building stroke order
    building_e: true                        # building stroke order early
    sdk_building_extrude: true              # building extrusion toggle
    building_extrude_height: |              # building extrude height logic
        function() { return feature.height || 20; }

    # TODO: Some of this should optimized server side by dropping names and shield_text
    #       in a similar way (and even changing min_zoom). We'd still need the
    #       collision_priority function here, though.

    collision_priority: |                   # label collision priority logic
        function() {
            if (feature['collision_rank'] != null) {
                if (feature['name'] != null) {
                    return feature['min_zoom'] + (1 - 1 / feature['collision_rank']) * 0.1;
                }
                // TODO: This should be moved server side. See the peak and
                //       park icons in Alta Plaza Park in San Francisco CA
                return feature['min_zoom'] + 2 + (1 - 1 / feature['collision_rank']) * 0.1;
            }
            return feature['min_zoom'] + 0.9999;
        }
    collision_priority_road_shields: |             # show labels later in the lines
        function() {
            if (feature['collision_rank'] != null) {
                // We want to effectively adjust the min_zoom for the shields separate
                // from their line/polygon visibility by giving them a WORSE collision
                // than POIs, but still better than general road text labels
                return feature['min_zoom'] + 5 + (1 - 1 / feature['collision_rank']) * 0.1;
            }
            return feature['min_zoom'] + 4.9999;
        }
    collision_priority_roads: |             # show labels later in the lines
        function() {
            if (feature['collision_rank'] != null) {
                // We want to effectively adjust the min_zoom for the labels separate
                // from their line/polygon visibility by giving them a WORSE collision
                return feature['min_zoom'] + 8 + (1 - 1 / feature['collision_rank']) * 0.1;
            }
            return feature['min_zoom'] + 7.9999;
        }
    collision_priority_water: |             # show labels later in the lines and polys
        function() {
            if (feature['collision_rank'] != null) {
                return feature['min_zoom'] + 3 + (1 - 1 / feature['collision_rank']) * 0.1;
            }
            return feature['min_zoom'] + 2.9999;
        }
    collision_priority_transit_pois: |      # show labels earlier than normal
        function(feature, default_priority) {
            if (feature['collision_rank'] != null) {
                // We want to give transit POIs (for the overlay) a BETTER collision
                return feature['min_zoom'] - 3 +
                       (1 - 1 / (default_priority +
                           (feature['tile_kind_rank'] || 100) * 0.1 + feature['collision_rank'] * 0.01) * 0.1);
            }
            return feature['min_zoom'] + 0.9999;
        }

textures:
    building-grid:
        url: images/building-grid.gif
        #url: https://raw.githubusercontent.com/tangrams/bubble-wrap/gh-pages/images/building-grid.gif
        filtering: mipmap

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
    Varela:
        - weight: normal
          #url: https://fonts.gstatic.com/s/varela/v7/maB5vWJo0EAVzvHPjBkLM-vvDin1pK8aKteLpeZ5c0A.woff
          url: fonts/Varela-Regular.woff
    Quicksand:
        - weight: normal
          #url: https://fonts.gstatic.com/s/quicksand/v6/sKd0EMYPAh5PYCRKSryvW7O3LdcAZYWl9Si6vvxL-qU.woff
          url: fonts/Quicksand-Regular.woff

sources:
    mapzen:
        type: MVT #TopoJSON
        url:  https://tile.nextzen.org/tilezen/vector/v1/512/all/{z}/{x}/{y}.mvt
        #url:  https://dev-tile.nextzen.org/tilezen/vector/v1/512/all/{z}/{x}/{y}.mvt
        #url: http://localhost:8050/tilezen/vector/v1/512/all/{z}/{x}/{y}.mvt?api_key=&
        #url: https://xyz.api.here.com/tiles/herebase.02/{z}/{x}/{y}/omv
        url_params:
            api_key: global.sdk_api_key
        tile_size: 512
        max_zoom: 16

#    # 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
#    # Dashed route line
#    mz_dash_line:
#        type: GeoJSON
#        url: https://gist.githubusercontent.com/anonymous/d73b851c64c3e5fbfc2754aa32f44c10/raw/938ae435776e176919c4797bed1465a92e403ef3/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/nvkelso/3c08dba1eced4d01df98c1a9a7801162/raw/d83a5a396fc7b22309b8ca89336ad2dcfff6c452/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:
    dashed:
        base: lines
        dash: [1.25, 1.25]
        dash_background_color: [0.808,0.860,0.851]
    dashed_big:
        base: lines
        dash: [2.0, 1.0]
        dash_background_color: [0.808,0.860,0.851]
    dashed_steps:
        base: lines
        dash: [0.5, 0.5]
        dash_background_color: [0.867, 0.867, 0.867]
    tools-tilecoords:
        shaders:
            blocks:
                global: |
                    // Varying to be added to both vertex and fragment shaders
                    varying vec2 v_pos;
                    #ifdef TANGRAM_FRAGMENT_SHADER
                    vec2 TileCoords() {
                        return fract(v_pos);
                    }
                    #endif
                position: |
                    v_pos = modelPosition().xy;
    tools-aastep:
        shaders:
            extensions: OES_standard_derivatives
            blocks:
                global: |
                    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
                    }
    tools-grid:
        mix: tools-tilecoords
        shaders:
            blocks:
                global: |
                    #ifdef TANGRAM_FRAGMENT_SHADER
                    bool grid(vec2 st, float res, float press) {
                        vec2 grid = fract(st * res);
                        return (grid.x < res * press) || (grid.y < res * press);
                    }
                    float TileGrid(float res) {
                        vec2 st = TileCoords() * 100. * res;
                        float pct = 0.0;
                        float press = 0.4 + (1.0 - fract(u_map_position.z)) * 0.1;
                        if (grid(st, 0.01, press)) { pct += 0.5; }
                        if (grid(st, 0.1, press)) { pct += 0.15; }
                        return pct;
                    }
                    float TileGrid() {
                        return mix(TileGrid(1.), TileGrid(2.), fract(u_map_position.z));
                    }
                    #endif
    grid:
        base: polygons
        mix: [tools-grid]
        shaders:
            blocks:
                filter: |
                    color.rgb = vec3(0.899, 0.95, 1.0);
                    color.rgb = mix(color.rgb, vec3(0.654,0.856,0.896), TileGrid());
    water_border:
        base: lines
        texcoords: true
        mix: tools-aastep
        shaders:
            blocks:
                global: |
                    float pulse(float x, float p, float w) {
                        x = abs(x - p);
                        if (x > w) { return 0.0; }
                        x /= w;
                        return (1.0 - x * x * (3.0 - 2.0 * x));
                    }
                width: |
                    // Comment/Uncomment to fix the line to the border
                    width *= 1.0 - v_texcoord.x;
                color: |
                    vec2 st = v_texcoord.xy;
                    float pattern = aastep(.5, pulse(st.x, .75, .15) + pulse(st.x, .4, .10) + pulse(st.x, .1, .1));
                    color.rgb = mix(color.rgb, vec3(0.675,0.855,0.886), pattern);
    shapes-circle:
        shaders:
            blocks:
                global: |
                    // get distance field of a Circle
                    // ================================
                    float circleDF (vec2 st) {
                        return dot(st,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);
                    }
    pattern-dots:
        mix: [tools-tilecoords, tiling-brick, shapes-circle, tools-aastep]
        shaders:
            blocks:
                global: |
                    #ifdef TANGRAM_FRAGMENT_SHADER
                        float TileDots(float scale, float size) {

                            // controls
                            float DOT_SIZE = 1.8; // bigger value = smaller dots
                            float SPEED = 10.; // bigger value = faster transition

                            vec2 tc = TileCoords() * scale * exp2(floor(u_map_position.z) - abs(u_tile_origin.z));
                            vec2 IN = brick(tc, 2.);
                            float A = circleDF(vec2(0.5) - IN) * DOT_SIZE;
                            vec2 OUT = brick(tc, 4.);
                            float B = circleDF(vec2(0.5) - OUT) * DOT_SIZE;
                            float transition = pow(fract(u_map_position.z), SPEED);
                            // keep B dots big as they fade in, to maintain density
                            B *= transition;
                            float d = mix(A, B, transition);
                            return aastep(size, d);
                        }
                    #endif
    dots:
        base: polygons
        mix: pattern-dots
        shaders:
            blocks:
                color: |
                    color.rgb = mix(color.rgb, vec3(0.850), TileDots(45., 0.1));
                    // size was set to 35 previously, now 45

    dots-rev:
        base: polygons
        mix: pattern-dots
        shaders:
            blocks:
                color: |
                    color.rgb = mix(vec3(0.850), color.rgb, TileDots(45., .21));

    # HSV/RGB functions
    hsv:
        shaders:
            blocks:
                global: |
                    vec3 rgb2hsv(vec3 c)
                    {
                        vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
                        vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
                        vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
                        float d = q.x - min(q.w, q.y);
                        float e = 1.0e-10;
                        return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
                    }
                    vec3 hsv2rgb(vec3 c)
                    {
                        vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
                        vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
                        return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
                    }

    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: [hsv, scale-buildings]
        texcoords: true
        shaders:
            uniforms:
                u_tex_grid: building-grid
            defines:
                WALL_TINT: vec3(1., 3., .800)
            blocks:
                color: |
                    if (dot(vec3(0., 0., 1.), worldNormal()) < .5) {
                        // If it's a wall
                        color.rgb = hsv2rgb(rgb2hsv(color.rgb) * WALL_TINT);
                        color.rgb = mix(color.rgb, vec3(0.),
                                        texture2D(u_tex_grid, v_texcoord).a);
                    }

    building-lines:
        base: lines
        mix: scale-buildings
    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-route-line-overlay:
        base: lines
        blend: overlay
        blend_order: 0
    ux-route-line-dash-overlay:
        base: lines
        blend: overlay
        blend_order: 0
        dash: [2, 1]
    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.earth1

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-route-line-overlay:
                interactive: global.sdk_interactive
                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_route_line_dash:
        data: { source: mz_dash_line }
        draw:
            ux-route-line-dash-overlay:
                interactive: global.sdk_interactive
                color: '#06a6d4'
                order: 500
                width: [[2,2px],[5,2.5px],[11,3px],[16,7px],[17,9px]]
    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.shield_text ) {
                            return ('sdk_shield-' + feature.shield_text.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.shield_text ) {
                                return feature.shield_text;
                            } 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.shield_text ) {
                        return (feature.shield_text.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.shield_text ) {
                        return (feature.shield_text.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.shield_text ) {
                        return (feature.shield_text.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.shield_text ) {
                        return (feature.shield_text.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.shield_text ) {
                        return (feature.shield_text.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.shield_text ) {
                        return (feature.shield_text.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
    water:
        data: { source: mapzen, layer: water }
        draw:
            grid:
                order: global.feature_order
                #color: global.water1
            
        ocean:
            filter:
                kind: ocean
            draw:
                grid:
                    color: global.water1
                    
        inland-water:
            filter:
                all:
                    - kind: [lake, water, riverbank, reservoir, swimming_pool]
            draw:
                grid:
                    color: global.water1
        other-water-areas:
            filter: { not: { kind: [ocean, lake, water, reservoir, swimming_pool, playa] }, $zoom: { min: 11 }, area: { min: 100 } }
            draw:
                grid:
                    color: global.water1
        playas:
            filter: { kind: playa }
            draw:
                polygons:
                    order: function() { return feature.sort_rank + 1; }
                    color: global.water2 #[0.870,0.870,0.870]
        water-boundary-ocean-early:
            filter: { boundary: true, kind: ocean, $zoom: {min: 1, max: 17} }
            draw:
                line2:
                    style: lines
                    order: global.feature_order
                    color: [[9,[0.396,0.833,0.920]],[10,[0.886,0.937,0.988]]]
                    width: [[9,0.25px],[10,2px],[11,3px],[13,4px],[15,6px]]
                lines:
                    order: 240
                    color: [[1,[0.698,0.800,0.820]],[11,[0.631,0.773,0.800]],[14,[0.543,0.740,0.780]]]
                    width: [[1,0.25px],[6,0.5px],[7,0.75px],[9,0.75px],[10,1px]]
        water-boundary-ocean-late:
            filter: { boundary: true, kind: ocean, $zoom: {min: 17} }
            draw:
                water_border:
                    order: 240
                    color: [[0,[0.886,0.937,0.988]]]
                    width: 20px
        water_boundaries-not-ocean:
            filter: { boundary: true, not: { kind: ocean }, $zoom: { min: 8 } }
            draw:
                lines:
                    order: global.feature_order
                    # color: [[8,[0.635,0.737,0.753]],[13,[0.635,0.737,0.753]],[14,[0.569,0.722,0.749]],[15,[0.397,0.743,0.809]]]
                    color: [[8,[0.749,0.831,0.867]],[12,[0.698,0.788,0.816]],[13,[0.698,0.784,0.812]],[14,[0.627,0.788,0.831]],[17,[0.643,0.824,0.851]]]
                    width: [[8,0.5px],[10,0.5px],[11,0.5px],[12,0.75px],[13,1px],[14,1px],[15,1px],[16,1px],[17,1px]]
                    join: round
                    outline:
                        color: [0.886,0.937,0.988]
                        #width: [[9,0px],[10,1.5px],[11,1px],[12,1.5px],[13,1.6px],[14,2px],[15,2px],[16,3px],[18,4px]]
                        width: [[11,0px],[12,1.2px],[13,1.6px],[14,2px],[15,2px],[16,3px],[18,4px]]
            early:
                filter: { $zoom: { min: 14 } }
                draw:
                    lines:
                        order: 241
            riverbank:
                # river boundaries like the thames in london, la seine in paris
                filter: { kind: riverbank }
                draw:
                    lines:
                        color: [[8,[0.667,0.792,0.824]],[11,[0.698,0.808,0.835]],[13,[0.710,0.796,0.824]],[14,[0.522,0.792,0.855]]]
                        width: [[9,0.5px],[10,0.75px],[11,0.75px],[12,0.8px],[13,1px],[14,1px],[15,1px],[16,1px],[17,1.5px]]
            intermittent:
                filter: { intermittent: true }
                draw:
                    lines:
                        color: water1_o
        river:
            #river center lines, not boundaries for polygons
            filter: { kind: [river,canal,stream,dam,ditch,drain], $zoom: { min: 12 }, not: { is_tunnel: true } }
            draw:
                lines:
                    order: global.feature_order
                    color: [[12,[0.753,0.820,0.835]],[13,[0.710,0.800,0.824]],[14,[0.886,0.937,0.988]]]
                    width: [[8,0px],[10,0px],[11,0.75px],[12,1px],[13,1px],[14,2px],[15,3px],[16,4px],[17,5px]]
                    join: round
                    outline:
                        color: [[12,[0.671,0.788,0.812]],[14,[0.710,0.800,0.824]],[15,[0.635,0.812,0.843]]]
                        width: [[13,0px],[14,0.5px],[15,0.75px],[16,0.75px],[17,1px]]

        water-labels:
            filter:
                all:
                    - name: true
                    - function() { return global.text_visible_water_labels; }
            water-line-labels:
                filter:
                    $geometry: line
                    kind: [river,canal,stream,dam,ditch,drain]
                    $zoom: { min: 14 }
                draw:
                    text-blend-order:
                        priority: global.collision_priority_water
                        text_source: global.ux_language_text_source
                        font:
                            fill: [0.314,0.591,0.640]
                            family: global.text_font_family
                            style: italic
                            weight: normal
                            size: 12px
                water-line-labels-z14:
                    filter: { $zoom: [14] }
                    draw:
                        text-blend-order: { font: { size: 10px } }
                water-line-labels-z17:
                    filter: { $zoom: [17] }
                    draw:
                        text-blend-order: { font: { size: 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

            water-area-labels:
                filter:
                    all:
                        - $geometry: point
                        - not: { kind: [riverbank, dock, playa] }
                        - area: true
                        - not: { kind: [sea, ocean] }
                default-label-text:
                    draw:
                        text-blend-order:
                            priority: global.collision_priority_water
                            text_source: global.ux_language_text_source
                            text_wrap: 8
                            font:
                                fill: [0.314,0.591,0.640] #global.text_fill_water
                                family: global.text_font_family
                                style: italic
                                weight: normal
                                size: [[6,10px],[11,12px]]

            ocean-sea-labels:
                filter:
                    kind: [sea, ocean]
                draw:
                    text-blend-order:
                        text_source: global.ux_language_text_source
                        priority: global.collision_priority_water
                        font:
                            fill: [0.314,0.591,0.640] #global.text_fill_water
                            family: global.text_font_family
                            weight: normal
                            size: 8px
                            transform: uppercase
                ocean-spacer:
                    filter: { kind: ocean }
                    ocean-spacer-z1-z4:
                        filter: { $zoom: { min: 1, max: 4 } }
                        draw:
                            text-blend-order:
                                text_source: global.ux_language_text_source_sea
                                text_wrap: false
                    ocean-spacer-z4-up:
                        filter: { $zoom: { min: 4 } }
                        draw:
                            text-blend-order:
                                text_source: global.ux_language_text_source_ocean
                                text_wrap: false
                ocean-labels:
                    draw:
                        text-blend-order:
                            font:
                                size: [[1,8px],[4,16px]]
                sea-early:
                    filter: { $zoom: [3], kind: sea }
                    draw: { text-blend-order: { visible: false } }

                sea-spacer:
                    filter: { not: { kind: [ocean] }, $zoom: { min: 4 } }
                    draw:
                        text-blend-order:
                            text_source: global.ux_language_text_source_sea
                            text_wrap: false
                sea-labels:
                    filter: { not: { kind: [ocean] } }
                    draw:
                        text-blend-order:
                            font:
                                size: [[4,9px],[8,16px]]

            playa-labels:
                filter:
                    all:
                        - $geometry: point
                        - kind: playa
                        - area: true
                draw:
                    text-blend-order:
                        priority: global.collision_priority_water
                        text_source: global.ux_language_text_source
                        font:
                            fill: grey
                            family: global.text_font_family
                            style: italic
                            weight: normal
                            size: 12px
                            stroke: { color: global.text_stroke_water, width: 3 }
                # debug only
        #        mapzen_icon_library:
        #            size: [[13, 12px], [15, 18px]]
        #            sprite: global.townspot_sprite


    transit-basemap:
        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: [0.588,0.671,0.698]
                        width: [[14,0.4px],[15,0.75px],[16,1.1px],[18,2px],[19,1m]]
            subway:
                filter: { kind: subway }
                draw:
                    lines:
                        color: [0.588,0.671,0.698]
                        width: [[14,0.4px],[15,0.75px],[16,1.3px],[17,1.5px],[18,2m]]
            light_rail:
                filter: { kind: [light_rail,tram], $zoom: { min: 15 } }
                draw:
                    lines:
                        order: 415
                        color: [0.588,0.671,0.698]
                        width: [[14,0px],[15,0.6px],[16,0.75px],[17,1.5px],[19,1m]]
        platforms:
            filter: { kind: platform }
            draw:
                lines_transparent:
                    color: [0.569,0.690,0.722,0.5]
                    width: 5m
                    visible: global.grey9_v
            polygon_geom:
                filter: { $geometry: polygon }
                draw:
                    polygons_transparent:
                        color: [0.592,0.671,0.694,0.5]
                        visible: global.grey9_v
                    lines_transparent:
                        visible: false
                    outline_transparent:
                        color: global.grey9_o
                        width: [[16,0px],[17,0.5px],[19,2px]]
            z-order:
                draw:
                    lines_transparent:
                        order: function() { if($zoom<17) { return feature.sort_rank; } else { return 435; } }
                        color: [0.569,0.690,0.722,0.5]
                        width: 5m
                        visible: global.grey9_v
                    polygons_transparent:
                        order: function() { if($zoom<17) { return feature.sort_rank; } else { return 435; } }
                    outline_transparent:
                        order: function() { if($zoom<17) { return feature.sort_rank; } else { return 436; } }
                polygon_geom:
                    filter: { $geometry: polygon }
                    draw:
                        polygons_transparent:
                            color: [0.592,0.671,0.694,0.5]
                            visible: global.grey9_v
                        lines_transparent:
                            visible: false
                        outline_transparent:
                            color: global.grey9_o
                            width: [[16,0px],[17,0.5px],[19,2px]]

#    # useful to example road geometry merging & Tangram labeling w/r/t tile boundaries
#    z-randomColor:
#        data: { source: mapzen, layer: roads }
#        draw:
#            lines:
#                order: 1000
#                # color: '#777'
#                color: function() { return [Math.random(), Math.random(), Math.random()] }
#                width: [[13,0.5px],[14,1px],[16,2px]]

    roads:
        data: { source: mapzen, layer: roads }
        draw:
            lines:
                # let roads sort themselves past zoom 14 (using server value)
                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
                priority: global.collision_priority_roads
                font:
                    family: global.text_font_family
                    weight: normal
                    fill: global.text_fill

#        z_debug:
#           filter: { $geometry: line, kind: true, $zoom: { min: 1 }, source: [naturalearthdata.com, openstreetmap.org] }
#           draw:
#               lines:
#                   color: |
#                      function() {
#                          var letters = '0123456789ABCDEF';
#                          var color = '#';
#                          for (var i = 0; i < 6; i++ ) {
#                              color += letters[Math.floor(Math.random() * 16)];
#                          }
#                          return color;
#                      }
#                   order: 1000
#                   width: 1px
#                   visible: true

        hgv-interlay:
            filter:
                all:
                    - hgv: true
                    - function() { return global.sdk_hgv_overlay; }
            draw:
                lines:
                    color: blue
                    width: 1.7px
            z-restricted:
                filter:
                    - hgv_restriction: true
                draw:
                    lines:
                        color: purple
                        width: 2.5px
                tunnel:
                    filter: {is_tunnel: true, $zoom: {min: 13} }
                    draw:
                        lines:
                            # color: [[16, [0.843,0.843,0.843]]]
                            color: purple
#                            outline:
#                                color: [[13, [0.890,0.890,0.890]], [14, [0.870,0.870,0.870]], [16, [0.824,0.753,0.741]]]
                z-shields:
                    filter: { hgv_restriction_shield_text: true }
                    draw:
                        mapzen_icon_library:
                            # you need to match any custom shield to the vector tile `network` values
                            sprite: |
                                function() {
                                    if( feature.hgv_restriction_shield_text ) {
                                        return ('generic_shield-' + feature.hgv_restriction_shield_text.length + 'char');
                                    }
                                }
                            size: [[7,[75%,75%]],[12,[100%,100%]],[15,[110%,110%]]]
                            priority: 1
                            # 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
                            color: purple
                            placement_min_length_ratio:
                                - [8, 0.1]
                                - [9, 0.25]
                                - [10, 0.25]
                                - [11, 0.15]
                                - [12, 1]
                                - [13, 1.50]
                                - [14, 2.0]
                            visible: true
                            text:
                                repeat_distance: 200px
                                anchor: center
                                text_source: hgv_restriction_shield_text
                                font:
                                    family: Montserrat
                                    weight: 500
                                    fill: white
                                    size: [[7, 7px], [13, 9px], [15, 10px]]
                                    stroke: { color: global.text_stroke, width: 0px }
        toll-interlay:
            filter:
                all:
                    - toll: true
                    - function() { return global.sdk_toll_road_overlay; }
            draw:
                lines:
                    outline:
                        color: black
                        width: [[6,0.25px],[10,1px],[12,1.5px],[15,2px],[20,4px]]

        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: [0.800,0.800,0.800]
                    size: [[17, 6px], [20, 14px]]
                    placement: spaced
                    placement_spacing: [[17, 70px], [20, 175px]]
                    angle: auto
                    text:
                        visible: false

        natural_earth_highways:
            filter: { source: 'naturalearthdata.com', $zoom: { max: 8 } }
            draw:
                lines:
                    # Perf impact (too many vertices)
                    #cap: round
                    #join: round
                    color: global.highway1
                    width: [[5, 1px], [7, 1.4px], [9, 1.5px], [14, 3px], [16, 4px], [17, 10m]]
            major_road:
                filter: { kind: major_road }
                draw:
                    lines:
                        color: [0.980,0.601,0.559]
                        width: [[5, 0.45px], [6, 0.75px], [7, 1.0px], [8, 1px]]
            minor_road:
                filter: { kind: minor_road }
                draw:
                    lines:
                        color: [[12, global.minor_road1], [17, global.minor_road2]]
                        width: [[12, 1.0px], [14, 1.5px], [15, 3px], [16, 5m]]
            ferry:
                filter: { kind: ferry }
                draw:
                    lines:
                        color: [0.702,0.843,0.933]
                        width: 1px
        highway:
            filter: { kind: highway, $zoom: { min: 8 } }
            draw:
                lines:
                    color: [[8, global.highway1], [14, global.highway1], [15, [1.0,1.0,1.0]], [17, [1.0,1.0,1.0]]]
                    width: [[8, 1.4px], [9, 1.4px], [11, 1.2px], [12, 1.3px], [13, 1.5px], [14, 2.25px], [15, 0.15px], [16, 5.5px], [17, 12m]]
                    outline:
                        color: [[11, global.highway_casing1], [15,[0.988,0.495,0.439]], [17, [0.988,0.495,0.439]]]
                        width: [[11, 0], [12, 1.2px], [13, 1.8px], [15, 2px], [16, 2.25px], [17, 3px], [18, 3px]]
            early:
                filter: { $zoom: { max: 15 } }
                draw:
                    lines:
                        outline:
                            order: 353
            link:
                filter: { is_link: true } # on- and off-ramps, etc
                draw:
                    lines:
                        color: [[9, global.highway_link1], [14, global.highway_link1], [15, [1.0,1.0,1.0]], [17, [1.0,1.0,1.0]]]
                        width: [[9, 0px], [11, 0.5px], [13, 1px], [14, 1px], [15, 0.15px], [16, 3px], [17, 4m], [18, 5m]]
                        cap: butt
                        outline:
                            color: [[10, global.highway_casing1], [16, [0.988,0.495,0.439]], [17, [0.988,0.495,0.439]]]
                            width: [[14, 0px], [15, 0.85px], [17, 1.125px], [18, 1.5px]]
                early:
                    filter: { $zoom: { max: 15 } }
                    draw:
                        lines:
                            order: 352
                tunnel-link:
                    filter: {is_tunnel: true, $zoom: {min: 13} }
                    draw:
                        lines:
                            color: global.highway_tunnel1
                            outline:
                                color: global.highway_tunnel_casing1
            tunnel:
                filter: {is_tunnel: true, $zoom: {min: 13} }
                draw:
                    lines:
                        # color: [[16, [0.843,0.843,0.843]]]
                        color: [[16, [0.85,0.85,0.85]]]
                        outline:
                            color: [[13, [0.890,0.890,0.890]], [14, [0.870,0.870,0.870]], [16, [0.824,0.753,0.741]]]
            highway_bridge:
                filter: {is_bridge: true}
                draw:
                    lines:
                        cap: round
                        outline:
                            cap: butt
            labels-highway-default:
                draw:
                    text-blend-order:
                        text_source: global.ux_language_text_source_road_ref_and_name
            labels-highway-z13-z14:
                filter:
                    $zoom: [13,14]
                draw:
                    text-blend-order:
                        visible: global.text_visible_highway
                        font:
                            fill: [0.0,0.0,0.0]
                            weight: 600
                            size: 12px
            labels-highway-z15:
                filter: { $zoom: { min: 15 } }
                draw:
                    text-blend-order:
                        visible: global.text_visible_highway
                        font:
                            fill: [0.0,0.0,0.0]
                            weight: 600
                            size: [[15, 14px], [18, 17px]]
                            stroke: { color: [1.000,1.000,1.000], width: [[15, 2px], [18, 4px]] }

        major_road:
            filter:
                all:
                    - $zoom: { min: 8 }
                    - any:
                        - { kind: major_road }
                        - { kind: minor_road, kind_detail: unclassified }
            # default style
            draw:
                lines:
                    color: [[8, global.major_road4], [13, global.major_road2], [17, global.major_road1]]
                    width: [[13, 0px], [14, 2px], [16, 2.5px], [19, 8m]]
            trunk_primary:
                filter: { kind_detail: [trunk, primary] }
                draw:
                    lines:
                        color: [1.0,1.0,1.0]
                        width: [[9, 0.5px], [11, 1.0px], [12, 1.0px], [13, 1.5px], [14, 2.5px], [15, 5px], [16, 10m]]
                        outline:
                            color: [[13, [0.827,0.827,0.827]], [15, [1.000,0.739,0.710]]]
                            # todo: investigate width optimizations
                            width: [[14, 0px], [15, 1.75px], [16, 2px], [17, 3px]]
                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: [[9, global.major_route1], [14, global.major_route1], [15,[1.0,1.0,1.0]]]
                            #order: function() { return feature.sort_rank + 1; }
                            # todo confirm widths
                            width: [[9, 1.0px], [12, 1.25px], [14, 1.6px], [15, 0.15px], [16, 5.25px], [17, 12m]]
                            outline:
                                color: [[13, [0.870,0.870,0.870]], [15, [0.976,0.612,0.573]]]
                                width: [[13, 0], [15, 2px], [16, 2px], [17, 3px]]
                    early:
                        filter: { $zoom: { max: 16 } }
                        draw:
                            lines:
                                order: function() { return feature.sort_rank + 2; }
                                outline:
                                    order: 353
                    # no national-routes layer because it's not different than the basic style
                    tunnel:
                        filter: {is_tunnel: true, $zoom: {min: 13} }
                        draw:
                            lines:
                                color: global.major_tunnel1
                                outline:
                                    color: global.major_tunnel_casing1
                                    width: [[13, 0.5px], [15, 2px], [16, 2px], [17, 3px]]
                    labels-trunk_primary-route-default:
                        draw:
                            text-blend-order:
                                text_source: global.ux_language_text_source_road_ref_and_name
                                visible: global.text_visible_trunk_primary_route
                    labels-trunk_primary-route-z14-z15:
                        filter: { $zoom: [14, 15] }
                        draw:
                            text-blend-order:
                                font:
                                    fill: [0.0,0.0,0.0]
                                    weight: 600
                                    size: [[14, 12px], [15, 14px]]
                                    stroke: { width: 0px }
                    labels-trunk_primary-route-z16:
                        filter: { $zoom: { min: 16 } }
                        draw:
                            text-blend-order:
                                font:
                                    fill: [0.0,0.0,0.0]
                                    weight: 600
                                    size: 15px
                                    stroke: { color: [1.000,1.000,1.000], width: 4px }
                labels-trunk_primary-default:
                    draw:
                        text-blend-order:
                            text_source: global.ux_language_text_source_road_ref_and_name_short
                            visible: global.text_visible_trunk_primary
                labels-trunk_primary-z11-z12:
                    filter:
                        $zoom: [11, 12]
                    draw:
                        text-blend-order:
                            visible: global.text_visible_trunk_primary_e
                            font:
                                fill: [0.40,0.40,0.40]
                                size: [[11, 10px], [12, 11px]]
                labels-trunk_primary-z13:
                    filter:
                        $zoom: [13]
                    draw:
                        text-blend-order:
                            #text_source: global.ux_language_text_source_road_ref_and_name_short
                            font:
                                fill: [0.25,0.25,0.25]
                                size: 12px
                                stroke: { color: global.text_stroke, width: 2px }
                labels-trunk_primary-z14:
                    filter:
                        $zoom: [14]
                    draw:
                        text-blend-order:
                            #text_source: global.ux_language_text_source_road_ref_and_name_short
                            font:
                                fill: [0.10,0.10,0.10]
                                size: 13px
                                stroke: { color: [1.00,1.00,1.00], width: 2px }
                labels-trunk_primary-z15-up:
                    filter: { $zoom: { min: 15 } }
                    draw:
                        text-blend-order:
                            font:
                                fill: [0.0,0.0,0.0]
                                size: [[15, 13px], [18, 17px]]
                                stroke: { color: [1.00,1.00,1.00], width: 3px }
            link:
                filter: { is_link: true } # on- and off-ramps, etc
                draw:
                    lines:
                        width: [[9, 0px], [10, 0.5px], [14, 2px], [16, 4m], [17, 5m], [18, 6m]]
                        outline:
                            color: [[10, [0.827,0.827,0.827]], [13, [0.827,0.827,0.827]], [15, [1.000,0.739,0.710]]]
                            width: [[10, 0], [11, 1px], [14, 1px], [16, 1.5px], [17, 2px]]
            tunnel:
                filter: {is_tunnel: true, $zoom: {min: 13} }
                draw:
                    lines:
                        color: global.major_tunnel1
                        outline:
                            color: global.major_tunnel_casing1
            secondary:
                filter: { kind_detail: secondary }
                draw:
                    lines:
                        color: [1.0,1.0,1.0]
                        width: [[11, 0.65px], [12, 0.75px], [13, 1.25px], [14, 2px], [15, 5px], [16, 10m], [17, 10m]]
                        outline:
                            color: [[15, [1.000,0.739,0.710]]]
                            width: [[14, 0], [15, 1.75px], [16, 2px], [17, 3px]]
                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:
                            #order: function() { return feature.sort_rank + 2; }
                            color: [1.0,1.0,1.0]
                            width: [[11, 0.65px], [12, 0.75px], [13, 1.25px], [14, 2px], [15, 5px], [16, 12m], [17, 12m]]
                            outline:
                                color: [0.827,0.827,0.827]
                                width: [[14, 0px], [15,  1.75px], [16, 2px], [17, 3px]]
                    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: global.major_tunnel1
                                outline:
                                    color: global.major_tunnel_casing1
                    labels-secondary-routes-default:
                        draw:
                            text-blend-order:
                                text_source: global.ux_language_text_source_road_ref_and_name_short
                                visible: global.text_visible_secondary_e
                    labels-secondary-routes:
                        filter: { $zoom: [13, 14] }
                        draw:
                            text-blend-order:
                                font:
                                    # need fill here?
                                    size: 12px
                                    stroke: { color: global.text_stroke, width: 4px }
                    labels-secondary-routes-z15:
                        filter: { $zoom: { min: 15 } }
                        draw:
                            text-blend-order:
                                font:
                                    # need fill here?
                                    weight: 600
                                    size: 14px
                                    stroke: { color: global.text_stroke, width: 4px }
                in_park:
                    filter: { landuse_kind: [park,nature_reserve,conservation,golf_course,garden] }
                    draw:
                        lines:
                            color: [1.0,1.0,1.0]
                            outline:
                                color: [[14, [0.800,0.851,0.847]], [15, [0.678,0.796,0.792]]]
                                width: [[12, 0px], [13, 0.5px], [14, 1.0px], [15, 1.0px], [16, 1.5px], [18, 3.0px]]
                    golf_course:
                        filter: { landuse_kind: golf_course }
                        draw:
                            lines:
                                outline:
                                    color: [0.757,0.839,0.788]
                    nature_reserve:
                        filter: { landuse_kind: nature_reserve }
                        draw:
                            lines:
                                outline:
                                    color: [0.635,0.819,0.742]
                    conservation:
                        filter: { landuse_kind: conservation }
                        draw:
                            lines:
                                outline:
                                    color: orange
                    zoo:
                        filter: { landuse_kind: zoo }
                        draw:
                            lines:
                                outline:
                                    color: pink
                labels-secondary-default:
                    draw:
                        text-blend-order:
                            text_source: global.ux_language_text_source_road_ref_and_name_short
                            visible: global.text_visible_secondary
                            font:
                                size: 10px
                labels-secondary-z11:
                    filter:
                        $zoom: [11]
                    draw:
                        text-blend-order:
                            visible: false
                labels-secondary-z13:
                    filter:
                        $zoom: [13]
                    draw:
                        text-blend-order:
                            visible: global.text_visible_secondary_e
                            #text_source: global.ux_language_text_source_road_ref_and_name_short
                            font:
                                fill: [0.5,0.5,0.5]
                                size: 11px
                                stroke: { color: global.text_stroke, width: 2px }
                labels-secondary-z14-z17:
                    filter: { $zoom: { min: 14, max: 18 } }
                    draw:
                        text-blend-order:
                            visible: global.text_visible_secondary
                            #text_source: global.ux_language_text_source_road_ref_and_name_short
                            font:
                                fill: [[14, [0.30,0.30,0.30]], [17, [0.00,0.00,0.00]]]
                                size: [[14, 12px], [17, 14.5px]]
                                stroke: { color: [1.00,1.00,1.00], width: [[14, 2px], [17, 3px]] }
                labels-secondary-z18:
                    filter: { $zoom: { min: 18 } }
                    draw:
                        text-blend-order:
                            visible: global.text_visible_secondary
                            text_source: global.ux_language_text_source_road_ref_and_name
                            font:
                                fill: [0.15,0.15,0.15]
                                size: 16px
                                stroke: { color: [1.00,1.00,1.00], width: 3px }
            tertiary:
                filter:
                    any:
                        - kind_detail: [tertiary, tertiary_link, unclassified ]
                draw:
                    lines:
                        color: [1.0,1.0,1.0]
                        width: [[11, 0.5px], [12, 0.5px], [13, 0.65px], [14, 1.0px], [15, 2px], [16, 8m], [19, 10m]]
                        outline:
                            color: [0.827,0.827,0.827]
                            # todo: look at zoom 13 width
                            width: [[15, 0], [16, 1.0px], [18, 3.5px]]
                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: [1.0,1.0,1.0]
                            width: [[11, 0.5px], [12, 0.5px], [13, 0.65px], [14, 1.0px], [15, 2px], [16, 8m], [19, 10m]]
                            outline:
                                color: [0.827,0.827,0.827]
                                width: [[15, 0], [16, 1.0px], [18, 3.5px]]
                    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: global.major_tunnel1
                                outline:
                                    color: global.major_tunnel_casing1
                link:
                    filter: { is_link: true } # on- and off-ramps, etc
                    draw:
                        lines:
                            color: global.major_road1
                            width: [[10, 0.5px], [14, 2px], [16, 4m], [17, 5m], [18, 6m]]
                            outline:
                                color: [[12, global.major_casing2]]
                                width: [[12, 0], [14, 1px], [16, 1.5px], [17, 2px]]
                in_park:
                    filter: { landuse_kind: [park,nature_reserve,conservation,golf_course,garden] }
                    draw:
                        lines:
                            #width: [[11, 0.0px], [12, .5px], [14, 1.5px], [16, 2.0px], [19, 7m]]
                            color: [[12, [0.9,0.9,0.9]], [13, [0.9,0.9,0.9]], [14, [0.98,0.98,0.98]]]
                            outline:
                                color: [[14, [0.800,0.851,0.847]], [15, [0.678,0.796,0.792]]]
                                width: [[12, 0px], [13, 0.5px], [14, 1.0px], [15, 1.0px], [16, 1.5px], [18, 3.0px]]
                    golf_course:
                        filter: { landuse_kind: golf_course }
                        draw:
                            lines:
                                outline:
                                    color: [0.698,0.835,0.765]
                    nature_reserve:
                        filter: { landuse_kind: nature_reserve }
                        draw:
                            lines:
                                outline:
                                    color: [0.635,0.819,0.742]
                    conservation:
                        filter: { landuse_kind: conservation }
                        draw:
                            lines:
                                outline:
                                    color: orange
                    zoo:
                        filter: { landuse_kind: zoo }
                        draw:
                            lines:
                                outline:
                                    color: pink
                labels-tertiary-default:
                    draw:
                        text-blend-order:
                            text_source: global.ux_language_text_source_road_ref_and_name_short
                            # visible: global.text_visible_tertiary
                labels-tertiary-z13:
                    filter: { $zoom: [13] }
                    draw:
                        text-blend-order:
                            visible: global.text_visible_tertiary_e
                            font:
                                fill: [0.5,0.5,0.5]
                                size: 10px
                                stroke: { color: [1.00,1.00,1.00], width: 1px }
                labels-tertiary-z14:
                    filter: { $zoom: [14] }
                    draw:
                        text-blend-order:
                            visible: global.text_visible_tertiary_e
                            font:
                                fill: [0.5,0.5,0.5]
                                size: 12px
                                stroke: { color: [1.00,1.00,1.00], width: 1px }
                labels-tertiary-z15:
                    filter: { $zoom: [15] }
                    draw:
                        text-blend-order:
                            visible: global.text_visible_tertiary
                            font:
                                fill: [0.3,0.3,0.3]
                                size: 12px
                                stroke: { color: [1.00,1.00,1.00], width: 1px }
                labels-tertiary-z16:
                    filter: { $zoom: [16] }
                    draw:
                        text-blend-order:
                            visible: global.text_visible_tertiary
                            font:
                                fill: [0.3,0.3,0.3]
                                size: 14px
                                stroke: { color: [1.00,1.00,1.00], width: 2px }
                labels-tertiary-z17:
                    filter: { $zoom: { min: 17, max: 18 } }
                    draw:
                        text-blend-order:
                            visible: global.text_visible_tertiary
                            font:
                                fill: [0.15,0.15,0.15]
                                size: 15px
                                stroke: { color: [1.00,1.00,1.00], width: 2px }
                labels-tertiary-z18:
                    filter: { $zoom: { min: 18 } }
                    draw:
                        text-blend-order:
                            visible: global.text_visible_tertiary
                            font:
                                fill: [0.15,0.15,0.15]
                                size: 15px
                                stroke: { color: [1.00,1.00,1.00], width: 2px }
        minor_road:
            filter: { kind: minor_road, not: { kind_detail: [service, unclassified] }, $zoom: { min: 8 } }
            draw:
                lines:
                    color: [[12, [0.9,0.9,0.9]], [13, [0.9,0.9,0.9]], [14, [1.0,1.0,1.0]]]
                    width: [[12, 0.65px], [13, 0.75px], [14, 0.85px], [15, 2px], [16, 8m], [17, 9m]]
                    # todo look at when color starts (z11 not z12) and width changes
                    #width: [[11, 0.5px], [12, 0.75px], [13, 1.0px], [14, 1.2px], [15, 2.5px], [16, 8m]]
                    outline:
                        color: [0.843,0.843,0.843]
                        width: [[15, 0], [16, 2px], [17, 3px]]
            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

            in_park:
                filter: { landuse_kind: [park,protected_area,nature_reserve,conservation,golf_course,garden,wood,farmland,farm] }
                draw:
                    lines:
                        #todo: is the width here right?
                        #width: [[11, 0.5px], [12, 1.0px], [13, 1.2px], [14, 1.75px], [15, 2.5px], [16, 8m]]
                        color: [[12, [0.9,0.9,0.9]], [13, [0.96,0.96,0.96]], [14, [1.0,1.0,1.0]]]
                        outline:
                            color: [[14, [0.800,0.851,0.847]], [15, [0.678,0.796,0.792]]]
                            #todo: is the width here right?
                            width: [[13, 0px], [14, 0.25px], [17, 2.0px], [18, 4.0px]]
                golf_course:
                    filter: { landuse_kind: golf_course }
                    draw:
                        lines:
                            outline:
                                color: [0.757,0.839,0.788]
                nature_reserve:
                    filter: { landuse_kind: nature_reserve }
                    draw:
                        lines:
                            outline:
                                color: [0.635,0.819,0.742]
                conservation:
                    filter: { landuse_kind: conservation }
                    draw:
                        lines:
                            outline:
                                color: orange
                zoo:
                    filter: { landuse_kind: zoo }
                    draw:
                        lines:
                            outline:
                                color: pink

            # in_residential:
            #     filter: { landuse_kind: residential }
            #     draw:
            #         lines:
            #             outline:
            #                 color: red
            in_university:
                filter: { landuse_kind: university }
                draw:
                    lines:
                        color: [[12, [0.9,0.9,0.9]], [13, [0.96,0.96,0.96]], [14, [1.0,1.0,1.0]]]
                        outline:
                            color: [0.806,0.763,0.717]
                            width: [[13, 0px], [14, 0.5px], [17, 2.0px], [18, 4.0px]]
            in_hospital:
                filter: { landuse_kind: hospital }
                draw:
                    lines:
                        color: [[12, [0.9,0.9,0.9]], [13, [0.96,0.96,0.96]], [14, [1.0,1.0,1.0]]]
                        outline:
                            color: [0.818,0.702,0.713]
                            width: [[13, 0px], [14, 0.5px], [17, 2.0px], [18, 4.0px]]

            tunnel:
                filter: {is_tunnel: true, $zoom: {min: 13} }
                draw:
                    lines:
                        color: [0.870,0.870,0.870]
                        outline:
                            color: [0.790,0.790,0.790]
            minor_road_bridge:
                filter: { is_bridge: true }
                draw:
                    lines:
                        cap: round
                        outline:
                            cap: butt
            labels-minor_road-z15:
                filter: { $zoom: 15 }
                draw:
                    text-blend-order:
                        visible: global.text_visible_minor_road_e
                        text_source: global.ux_language_text_source
                        font:
                            fill: [0.30,0.30,0.30]
                            size: 12px
                            stroke: { color: [1.00,1.00,1.00], width: 1px }
            labels-minor_road-z16:
                filter: { $zoom: 16 }
                draw:
                    text-blend-order:
                        visible: global.text_visible_minor_road
                        text_source: global.ux_language_text_source
                        font:
                            fill: [0.35,0.35,0.35]
                            size: 14px
                            stroke: { color: [1.00,1.00,1.00], width: 2px }
            labels-minor_road-z17:
                filter: { $zoom: { min: 17, max: 18 } }
                draw:
                    text-blend-order:
                        visible: global.text_visible_minor_road
                        text_source: global.ux_language_text_source
                        font:
                            fill: [0.25,0.25,0.25]
                            size: 14px
                            stroke: { color: [1.00,1.00,1.00], width: 2px }
            labels-minor_road-z18:
                filter: { $zoom: { min: 18 } }
                draw:
                    text-blend-order:
                        visible: global.text_visible_minor_road
                        text_source: global.ux_language_text_source
                        font:
                            # needs a fill color?
                            fill: [0.15,0.15,0.15]
                            size: 15px
                            stroke: { color: [1.00,1.00,1.00], width: 2px }
        service_road:
            filter: { kind: minor_road, kind_detail: service }
            draw:
                lines:
                    color: [[12, [0.9,0.9,0.9]], [14, [0.9,0.9,0.9]], [15, [1.0,1.0,1.0]]]
                    # todo: consider starting at z13 with 0.5px
                    width: [[12, 0.65px], [13, 0.75px], [14, 0.85px], [15, 1.25px], [16, 2.0px], [18, 6m]]
                    outline:
                        color: [0.827,0.827,0.827]
                        width: [[15, 0px], [16, 0.5px], [17, 1.0px], [18, 1.75px]]

            # Is this junk code?
            round:
                filter: { $zoom: { min: 17 } }
                draw:
                    lines:
                        cap: round
                        join: round

            in_park:
                filter: { landuse_kind: [park,forest,nature_reserve,conservation,golf_course,garden] }
                draw:
                    lines:
                        #todo: is the color necc here?
                        color: [0.976,0.976,0.976]
                        outline:
                            color: [[14, [0.800,0.851,0.847]], [15, [0.678,0.796,0.792]]]
                            width: [[13, 0px], [14, 0.5px], [17, 2.0px], [18, 4.0px]]
                golf_course:
                    filter: { landuse_kind: golf_course }
                    draw:
                        lines:
                            outline:
                                color: [0.698,0.835,0.765]
                nature_reserve:
                    filter: { landuse_kind: nature_reserve }
                    draw:
                        lines:
                            outline:
                                color: [0.635,0.819,0.742]
                conservation:
                    filter: { landuse_kind: conservation }
                    draw:
                        lines:
                            outline:
                                color: orange
                zoo:
                    filter: { landuse_kind: zoo }
                    draw:
                        lines:
                            outline:
                                color: pink
            in_cemetery_garden:
                filter: { landuse_kind: [cemetery,garden] }
                draw:
                    lines:
                        outline:
                            color: [0.737,0.816,0.753]
                            # todo: consider starting z13 with 0.25px
                            width: [[13, 0px], [14, 0.5px], [17, 2.0px], [18, 4.0px]]
            in_university:
                filter: { landuse_kind: university }
                draw:
                    lines:
                        #todo: is this necc here?
                        color: [1.0,1.0,1.0]
                        outline:
                            color: [0.806,0.763,0.717]
                            width: [[13, 0px], [14, 0.5px], [17, 2.0px], [18, 4.0px]]
            in_hospital:
                filter: { landuse_kind: hospital }
                draw:
                    lines:
                        #todo: is this necc here?
                        color: [1.0,1.0,1.0]
                        outline:
                            color: [0.818,0.702,0.713]
                            width: [[13, 0px], [14, 0.5px], [17, 2.0px], [18, 4.0px]]
            labels-service_road:
                filter: { $zoom: 17 }
                draw:
                    text-blend-order:
                        visible: global.text_visible_service_road
                        text_source: global.ux_language_text_source
                        font:
                            # need fill color?
                            fill: [0.25,0.25,0.25]
                            size: 13px
                            stroke: { color: [1.00,1.00,1.00], width: 2 }
            labels-service_road-z18:
                filter: { $zoom: { min: 18 } }
                draw:
                    text-blend-order:
                        visible: global.text_visible_service_road
                        text_source: global.ux_language_text_source
                        font:
                            # need fill color?
                            fill: [0.15,0.15,0.15]
                            size: 14px
                            stroke: { color: [1.00,1.00,1.00], width: 2 }

        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: global.collision_priority_road_shields
                    # 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]
                    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
                            weight: 500
                            fill: [0.308,0.308,0.308]
                            size: [[7, 7px], [13, 9px], [15, 10px]]
                            stroke: { color: global.text_stroke, width: 0px }

            default_priority_highway:
                filter:
                    all:
                        - kind: highway
                        - kind_detail: motorway
                draw:
                    mapzen_icon_library:
                        visible: global.sdk_road_shields
                early:
                    filter:
                        - $zoom: { max: 7 }
                    draw:
                        mapzen_icon_library:
                            visible: false
            default_priority_trunk:
                filter:
                    all:
                        - kind: major_road
                        - kind_detail: trunk
                draw:
                    mapzen_icon_library:
                        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:
                        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:
                        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:
                        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:
                        visible: global.sdk_road_shields
                early:
                    filter:
                        - $zoom: { max: 14 }
                    draw:
                        mapzen_icon_library:
                            visible: false

#            width_1char:
#                filter: |
#                    function() {
#                        if( feature.shield_text ) {
#                            return (feature.shield_text.length === 1)
#                        } else {
#                            return (feature.ref.length === 1)
#                        }
#                    }
#            width_2char:
#                filter: |
#                    function() {
#                        if( feature.shield_text ) {
#                            return (feature.shield_text.length === 2)
#                        } else {
#                            return (feature.ref.length === 2)
#                        }
#                    }
#            width_3char:
#                filter: |
#                    function() {
#                        if( feature.shield_text ) {
#                            return (feature.shield_text.length === 3)
#                        } else {
#                            return (feature.ref.length === 3)
#                        }
#                    }
            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
                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
                early:
                   filter: { $zoom: { max: 13 } }
                   draw:
                       mapzen_icon_library:
                           visible: false

            # this is kinda a hack – generally we don't have artwork sized 6+
            # 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:
                            # 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:
                            # 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]]


        path:
            filter:
                all:
                    - kind: [path, portage_way, construction]
                not:
                    - kind_detail: [steps, track, pier]
            draw:
                lines:
                    color: [[14, [0.97,0.97,0.97]],[16,[0.96,0.96,0.96]]]
                    width: [[14, 0.6px], [16, 1px], [17, 2.5m]]
                    outline:
                        color: [0.799,0.799,0.799]
                        width: [[14, 0], [16, 0.5px], [18, 3px]]
            construction:
                filter: { kind: construction }
                draw:
                    dashed:
                        color: [0.7,0.7,0.7]
                        order: function() { return feature.sort_rank + 1; }
                        width: 1px
            pedestrian:
                filter: { kind_detail: pedestrian }
                draw:
                    lines:
                        color: [[13, [0.97,0.97,0.97]], [16,[0.96,0.96,0.96]]]
                        width: [[13, 1.5], [15, 1.5], [17, 3m]]
                        outline:
                            color: [0.799,0.799,0.799]
                            width: [[17, 0.5], [18, 1]]
            corridor:
                filter: { kind_detail: corridor }
                draw:
                    lines:
                        order: 1000
                early:
                    filter: { $zoom: { max: 17 } }
                    draw:
                        lines:
                            visible: false
            bridge:
                filter: { is_bridge: true }
                draw:
                    lines:
                        color: [[15, [1.0,1.0,1.0]], [18, [1.0,1.0,1.0]]]
                        width: [[15, 1.5px], [16, 4m], [17, 2m], [18, 2m]]
                        cap: round
                        outline:
                            color: [[15, global.path_bridge_casing2],[16, global.path_bridge_casing1]]
                            width: [[15, 0px], [16, 1.0px], [18, 3px]]
                            cap: butt
            in_park:
                # should `forest` and `wood` be included?
                filter: { landuse_kind: [park,nature_reserve,conservation,golf_course,garden] }
                draw:
                    lines:
                        color: [[14,white], [16,white], [17, [0.95,0.95,0.95]]]
                        outline:
                            color: [[16, [0.725,0.847,0.847]], [17, [0.663,0.847,0.843]]]
                            width: [[15, 0px], [16, 0.5px], [18, 3px]]
                golf_course:
                    filter: { landuse_kind: golf_course }
                    draw:
                        lines:
                            outline:
                                color: [0.698,0.835,0.765]
                nature_reserve:
                    filter: { landuse_kind: nature_reserve }
                    draw:
                        lines:
                            outline:
                                color: [0.635,0.819,0.742]
                conservation:
                    filter: { landuse_kind: conservation }
                    draw:
                        lines:
                            outline:
                                color: orange
            in_cemetery_garden:
                filter: { landuse_kind: [cemetery,garden] }
                draw:
                    lines:
                        outline:
                            color: [0.737,0.816,0.753]
                            width: [[15, 0px], [16, 0.5px], [18, 3px]]
            in_zoo:
                filter: { landuse_kind: zoo }
                draw:
                    lines:
                        outline:
                            color: [0.708,0.881,0.831]
                            width: [[15, 0px], [16, 0.5px], [18, 3px]]
            in_university:
                filter: { landuse_kind: university }
                draw:
                    lines:
                        color: [[14, [0.97,0.97,0.97]], [16,[0.96,0.96,0.96]]]
                        outline:
                            color: [0.806,0.763,0.717]
                            # todo: consider starting 14 at 0px so z15 has a little width
                            width: [[15, 0px], [16, 0.5px], [18, 3px]]
            in_hospital:
                filter: { landuse_kind: hospital }
                draw:
                    lines:
                        color: [[14,[0.90,0.90,0.90]],[16,[0.96,0.96,0.96]]]
                        outline:
                            color: [0.847,0.788,0.796]
                            # todo: consider starting 14 at 0px so z15 has a little width
                            width: [[15, 0px], [16, 0.5px], [18, 3px]]
            labels-path:
                filter: { $zoom: { min: 17 } }
                draw:
                    text-blend-order:
                        visible: global.text_visible_path
                        text_source: global.ux_language_text_source
                        font:
                            # need a fill color?
                            fill: [0.25,0.25,0.25]
                            size: 12px
                            stroke: { color: [1.00,1.00,1.00], width: 1 }
                construction:
                    filter: { kind: construction }
                    draw:
                        text-blend-order:
                            text_source: global.ux_language_text_source_construction


        track:
            filter: { kind: path, kind_detail: track }
            draw:
                lines:
                    color: [[13, global.minor_road4], [15, global.minor_road3]]
                    width: [[13, 0.5px], [14, 1.0px], [15, 1.0px], [16, 6m]]
                    #color: [[13, global.minor_road4],[16, global.minor_road3]]
                    #width: [[13, 1.0], [15, 1.5], [17, 3m]]
                    cap: butt
                    join: round
                    outline:
                        order: 354
                        color: global.minor_casing1
                        width: [[14, 0px], [15, 0.2px], [16, 0.5px], [17, 1.0px], [18, 2.0px]]
            major_track:
                filter:
                    any:
                        - { kind_detail: track, surface: [paved, asphalt, concrete, gravel] }
                        - { kind_detail: track, tracktype: [grade1, grade2] }
                draw:
                    lines:
                        color: [1.0,1.0,1.0]
                        width: [[11, 0.5px], [12, 0.5px], [13, 0.5px], [14, 0.65px], [15, 1.5px], [16, 8m], [19, 10m]]
                        outline:
                            color: [[13, [0.827,0.827,0.827], [15, [1.0,1.0,1.0]]]]
                            width: [[15, 0], [16, 1.0px], [18, 3.5px]]
            bridge:
                filter: { is_bridge: true }
                draw:
                    lines:
                        width: [[15, 3.5], [17, 3m]]
                        cap: round
                        outline:
                            color: [[15, global.minor_casing2],[16, global.minor_casing1]]
                            width: [[15, 0.5px], [16, 1.0px], [18, 2px]]
                            cap: butt
            in_park:
                filter: { landuse_kind: [park,national_park,nature_reserve,conservation,golf_course,garden] }
                draw:
                    lines:
                        width: [[13, 0.5px], [14, 0.5px], [15, 1.0px], [16, 6m]]
                        outline:
                            color: [[16, global.green1_r],[17, global.major_casing1]]
                            width: [[15, 0px], [16, 0.25px], [17, 0.5px], [18, 1.0px], [19, 2.0px]]
        steps:
            filter:
                all:
                    - kind: path
                    - kind_detail: steps
            draw:
                dashed_steps:
                    order: global.feature_order
                    color: [0.97,0.97,0.97]
                    width: [[14,0.6px],[16,2px],[17,4px],[18,5px],[19,8px],[20,10px]]
                    outline:
                        color: [0.867,0.867,0.867]
                        width: 2px
            in_park:
                filter: { landuse_kind: [park,nature_reserve,conservation,golf_course,garden] }
                draw:
                    dashed_steps:
                        color: [1.0,1.0,1.0]
                        outline:
                            color: [0.867,0.867,0.867]
            in_university:
                filter: { landuse_kind: university }
                draw:
                    dashed_steps:
                        color: [1.0,1.0,1.0]
                        outline:
                            color: [0.867,0.867,0.867]
            in_hospital:
                filter: { landuse_kind: hospital }
                draw:
                    dashed_steps:
                        color: [1.0,1.0,1.0]
                        outline:
                            color: [0.867,0.867,0.867]
            labels-steps:
                filter: { $zoom: { min: 17 } }
                draw:
                    text-blend-order:
                        visible: global.text_visible_steps
                        text_source: global.ux_language_text_source
                        font:
                            # need fill color?
                            size: 12px
                            stroke: { color: [1.00,1.00,1.00], width: 1 }
        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: '#909090'
                    width: [[13,0px],[14,0.5px],[15, 1px], [16, 1.5px], [18, 3m]]
                text-blend-order:
                    visible: global.text_visible_piste
                    font:
                        fill: global.text_fill_piste
                        size: 12px
                        stroke: { color: global.grey8, width: 4 }
            early:
                filter: { $zoom: { max: 15 } }
                draw:
                    text-blend-order:
                        visible: false
            early-z15:
                filter: { $zoom: [15] }
                draw:
                    text-blend-order:
                        font:
                            fill: global.text_fill_piste_e
                            size: 11px
            easy:
                filter: { piste_difficulty: easy }
                draw:
                    lines:
                        color: global.piste_easy
            intermediate:
                filter: { piste_difficulty: intermediate }
                draw:
                    lines:
                        color: global.piste_intermediate
            advanced:
                filter: { piste_difficulty: advanced }
                draw:
                    lines:
                        color: global.piste_advanced
                    text-blend-order:
                        text_source: global.ux_language_text_source_piste_advanced
            expert:
                filter: { piste_difficulty: expert }
                draw:
                    lines:
                        color: global.piste_expert
                    text-blend-order:
                        text_source: global.ux_language_text_source_piste_expert
        pier:
            filter: { kind: path, kind_detail: pier }
            draw:
                lines:
                    color: [0.993,0.993,0.993]
                    width: [[13, 0px], [14, 0.5px],[15, 1.5px], [16, 2.5px],[17, 3px],[18, 3m]]
                    outline:
                        color: [0.675,0.855,0.886]
                        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: [0.600,0.667,0.627]
                    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: [[10,[0.4,0.4,0.4]],[11,[0.50,0.50,0.50]],[12,[0.7,0.7,0.7]],[13,[0.75,0.75,0.75]],[14,[0.95,0.95,0.95]]]
                    cap: butt
                    width: [[10,0.75px],[11,1.25px],[12,2px],[13,4px],[14,8px],[15,16px],[16,32px],[17,60m]]
                    # outline:
                    #     color: [17,[0.95,0.95,0.95]]
                    #     width: [17,[60m]]
            # 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: [[13,[0.913,0.913,0.913]],[15,[0.923,0.923,0.923]],[16,[0.95,0.95,0.95]]]
                        width: [[13,1px],[14,2px],[15,3px],[16,7px],[17,20m]]
                        outline:
                            color: [0.778,0.778,0.797]
                early:
                    filter: { $zoom: { max: 13 } }
                    draw:
                        lines:
                            visible: false
        ferry:
            filter: { kind: ferry }
            draw:
                lines:
                    color: [0.702,0.843,0.933]
                    width: [[12, 0.5px], [14, 1.0px], [15, 1.0px], [16, 1.25px]]
                    outline:
                        width: 0
        aerialway:
            filter: { kind: aerialway }
            draw:
                lines:
                    color: '#444'
                    width: [[14, 0.5px], [15, 1.0px], [16, 2m]]
            gondola_cable_car:
                filter: { kind_detail: [gondola, cable_car] }
                draw:
                    lines:
                        color: [0.498,0.302,0.243]
                        width: [[12, 0.5px], [13, 0.5px], [14, 0.6px], [15, 1px], [16, 2px]]
                    lines_transparent:
                        color: [0.498,0.302,0.243,0.15]
                        width: [[12, 0px], [13, 5px], [14, 8px], [15, 10px], [16, 12px]]
            chair_lift:
                filter: { kind_detail: chair_lift }
                draw:
                    lines:
                        color: [0.493,0.541,0.666]
                        width: [[12, 0.5px], [13, 0.5px], [14, 0.6px], [15, 1px], [16, 1px], [16, 2px], [18, 3m]]
                    lines_transparent:
                        color: [0.635,0.698,0.859,0.20]
                        width: [[12, 0px], [13, 5px], [14, 8px], [15, 10px], [16, 12px], [18, 20px]]
            aerialway-labels:
                filter: { $zoom: { min: 14 } }
                draw:
                    text-blend-order:
                        visible: global.text_visible_aerialway
                        text_source: global.ux_language_text_source
                        font:
                            fill: global.text_fill
                            size: 12px
                            stroke: { color: global.grey8, width: 4 }
                minor:
                    filter: { not: { kind_detail: [gondola,cable_car,chair_lift] }, $zoom: { max: 17 } }
                    draw:
                        text-blend-order:
                            visible: false
                early_gondola:
                    filter: { $zoom: [14], kind_detail: [gondola,cable_car] }
                    draw:
                        text-blend-order:
                            font:
                                weight: 600
                later:
                    filter: { $zoom: { min: 15 } }
                    draw:
                        text-blend-order:
                            font:
                                weight: 600
        bridges-tunnels:
            filter: { any: [is_bridge: true, is_tunnel: true] }
            draw:
                lines:
                    outline:
                        # except bridges and tunnels, their outlines should also self-sort
                        order: global.feature_order

        railway-late:
            filter: { kind: rail, not: { railway: [subway,light_rail,tram] } }
            draw:
                lines:
                    order: global.feature_order
                    color: [0.588,0.671,0.698]
                    width: [[12,0px],[13,0.25px],[14,0.4px],[15,0.75px],[16,0.75px],[18,1m]]
            service:
                filter: { service: true }
                draw:
                    lines:
                        color: [0.588,0.671,0.698]
                        width: [[14,0px],[15,0.3px],[16,0.5px],[18,0.75px],[19,0.5m]]
            z-order:
                #filter: { $zoom: {min: 12} }
                draw:
                    lines:
                        # Use server sort order which varies by kind, kind_detail, and zoom
                        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; }

    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.building2
                #color: |
#                   function() {
#                       if( feature.id ) {
#                           return [
#                               0.7 * (parseInt(feature.id, 16) / 100 % 1),     // jshint ignore:line
#                               0.7 * (parseInt(feature.id, 16) / 10000 % 1),   // jshint ignore:line
#                               0.7 * (parseInt(feature.id, 16) / 1000000 % 1), // jshint ignore:line
#                               1
#                           ];
#                       } else {
#                           if( feature.scale_rank == 6 ) {
#                               return [1.,0.,0.,1];
#                           } else if( feature.scale_rank == 5 ) {
#                               return [0.,1.,0.,1];
#                           } else if( feature.scale_rank == 4 ) {
#                               return [0.,0.,1.,1];
#                           } else if( feature.scale_rank == 3 ) {
#                               return [0.,0.,0.5,1];
#                           } else if( feature.scale_rank == 2 ) {
#                               return [0.,0.5,0.,1];
#                           } else if( feature.scale_rank == 1 ) {
#                               return [0.,0.5,0.,1];
#                           } else if( feature.scale_rank == 0 ) {
#                               return [0.5,0.,0.,1];
#                           } else {
#                               return [0.5,0.5,0.5,1];
#                           }
#                       }
#                   }
            lines:
                style: lines
                order: 330
                visible: false
                color: [[13,[0.70,0.70,0.70]],[17,[0.65, 0.65, 0.65]]]
                width: [[13, 0.55px], [15, 0.65px], [16,0.75px], [18, 1.25px]]

        # building footprints, pre-extrusion
        footprints:
            filter:
                # show footprints for buildings at least one zoom level before they will be extruded
                - { $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:
                        order: 438
                        style: building-grid
                        extrude: global.building_extrude_height
                    lines:
                        order: 439
                        style: building-lines
                        extrude: global.building_extrude_height
                # NOTE: This is a hack to re-enable the building colors per landuse_kind
                # Earlier versions before October 2016 didn't need this hack
                not_landuse:
                    filter: { not: { landuse_kind: [station, retail, aerodrome, runway, taxiway, park,forest,nature_reserve,conservation,golf_course,garden, university,school, hospital] } }
                    draw:
                        polygons:
                            color: [0.892,0.880,0.878]

        # landuse-specific rules
        in_park:
            filter:
                landuse_kind: [park,forest,nature_reserve,conservation,golf_course,garden]
            draw:
                polygons:
                    color: [0.864,0.910,0.905]

            # golf_course:
            #     filter: { landuse_kind: golf_course }
            #     draw:
            #         polygons:
            #             color: global.building2
            # nature_reserve:
            #     filter: { landuse_kind: nature_reserve }
            #     draw:
            #         polygons:
            #             color: global.building2
            # conservation:
            #     filter: { landuse_kind: conservation }
            #     draw:
            #         polygons:
            #             color: global.building2
            # zoo:
            #     filter: { landuse_kind: zoo }
            #     draw:
            #         polygons:
            #             color: global.building2
        in_university:
            filter: { landuse_kind: [university,school] }
            draw:
                polygons:
                    color: [0.950,0.917,0.883]
                lines:
                    color: global.brown1_bo
        in_hospital:
            filter: { landuse_kind: hospital }
            draw:
                polygons:
                    color: [0.976,0.908,0.913]
        in_airport:
            filter: { landuse_kind: [aerodrome, runway, taxiway] }
            draw:
                polygons:
                    color: global.purple_b
                lines:
                    color: global.purple_bo
                    width: [[14,0.5px],[15,0.5px],[17,0.5px],[18,0.75px],[19,0.25m]]
        in_retail:
           filter: { landuse_kind: retail }
           draw:
                polygons:
                    color: [0.945, 0.898, 0.878]

        transit-overlay-station-buildings:
            filter:
                all:
                    - landuse_kind: [station]
                    - function() { return global.sdk_transit_overlay; }
            draw:
                polygons:
                    color: '#bdadbf'
                    order: 500
                    #extrude: function() { return feature.height || 20; }
                outline:
                    style: lines
                    order: 501
                    color: '#d534df'
                    width: [[14,0.1px],[15,0.5px],[17,0.5px],[18,0.75px],[19,0.25m]]
                    #extrude: function() { return feature.height || 20; }

        buildings-labels:
            filter:
                all:
                    - { $zoom: { min: 17 } }
                    - $geometry: point
                    - not: { location: underground, kind: address }
                    - name: true
                    - function() { return global.text_visible_building; }
                    - landuse_kind: [university, college, school, kindergarten]
    #                - kind: [false, building, university, college, school, kindergarten]
                any:
                    - { $zoom: [16], area: { min: 5000 } }
                    - { $zoom: [16], area: { min: 5000 } }
                    - { $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 } }
                    - { $zoom: [17], area: { min: 2000 }, kind_detail: [university, college, school, kindergarten] }
                    - { $zoom: [18], area: { min: 1000 } }
                    - { $zoom: [18], kind_detail: [university, college, school, kindergarten] }
                    - { $zoom: [19], area: { min: 200 } }
                    - { $zoom: { min: 19 }, kind_detail: [university, college, school, kindergarten] }
                    - { $zoom: { min: 20 }, area: true }
            draw:
                text-blend-order:
                    text_source: global.ux_language_text_source
                    order: 7
                    font:
                        fill: '#666'
                        family: global.text_font_family
                        style: italic
                        size: 11px
                        stroke: { color: global.text_stroke_address, width: 1 }
            building_labels-z15-z16-z17:
                filter: { $zoom: [15,16,17] }
                draw: { text-blend-order: { font: { size: 12px, stroke: { width: 2 } } } }
            building_labels-z18:
                filter: { $zoom: [18,19] }
                draw: { text-blend-order: { font: { size: 12px, weight: 600, stroke: { width: 3 } } } }
            building_labels-z20-up:
                filter: { $zoom: { min: 20 } }
                draw: { text-blend-order: { font: { size: 14px, weight: 600, stroke: { width: 3 }  } } }
            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: global.ux_language_text_source_building_and_address
        address-labels:
            filter:
                $zoom: { min: 20 }
                any:
                    - kind: address
                    - { label_position: true, addr_housenumber: true, name: false }
                all:
                    - function() { return global.text_visible_address; }
            draw:
                text-blend-order:
                    order: 7
                    text_source: addr_housenumber
                    font:
                        fill: global.text_fill_address
                        family: global.text_font_family
                        style: italic
                        size: 10px
                        stroke: { color: global.text_stroke_address, width: 4 }
        entrance-labels:
            filter:
                $zoom: { min: 20 }
                any:
                    - kind: entrance
                all:
                    - function() { return global.text_visible_address; }
            draw:
                mapzen_icon_library:
                    size: [[13, 95%], [16, 100%], [18, 105%]]
                    sprite: generic # TODO: add custom entrance/edit icons
                    interactive: global.sdk_interactive
                    repeat_group: abc
                    buffer: 3px
                    text:
                        font:
                            fill: global.text_fill_address
                            family: global.text_font_family
                            style: italic
                            size: 10px
                            stroke: { color: global.text_stroke_address, width: 4 }

    boundaries:
        data: { source: mapzen, layer: boundaries }
        # country subdivisions (states, provinces)
        draw:
            lines:
                order: global.feature_order
                #debug:
                #order: 1000
                #color: red
                #width: [[9, 2px], [14, 2px], [16, 3px], [17, 8m]]
        country:
            filter:
                any:
                    - global.ux_point_of_view_kind_filter_country
            draw:
                lines:
                    color: global.country_boundary
                    width: [[1, 0.5px], [4, 2.5px], [14, 4px], [16, 4.5px]]
            water:
                 filter: { maritime_boundary: true }
                 draw:
                     lines:
                         visible: false
                     text-blend-order:
                         visible: false
            country-labels:
                filter: { name: true, $zoom: { min: 8 } }
                draw:
                    text-blend-order:
                        priority: global.collision_priority
                        visible: global.text_visible_admin
                        text_source: global.ux_language_text_source_boundary_lines_left_right
                        offset: [0px, 5px]
                        text_wrap: 100px
                        font:
                            family: Varela
                            size: 9px
                            weight: 300
                            fill: [0.25,0.25,0.25]
                            # stroke: { color: global.text_stroke, width: 4 }
                            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, 0px]

        other_country_boundary_disputed_etc:
            filter:
                global.ux_point_of_view_kind_filter_disputed_etc
            draw:
                dashed:
                    visible: true
                    order: global.feature_order
                    color: global.country_boundary
                    width: [[1, 0.2px], [2, 0.5px], [5, 1.5px], [6, 2.0px], [8, 2.5px], [16, 3.5px], [17, 10m]]
            disputed:
                filter:
                    global.ux_point_of_view_kind_filter_disputed_star
                draw:
                    dashed:
                        visible: false
                    dashed_big:
                        visible: true
                        order: global.feature_order
                        color: global.country_boundary
                        width: [[1, 0.5px], [2, 1.0px], [4, 1.5px], [9, 2.5px], [14, 3.5px], [16, 4.5px], [17, 14m]]

        unrecognized:
            filter:
                - global.ux_point_of_view_kind_filter_unrecognized
            draw:
                 lines:
                     visible: false
                 text-blend-order:
                     visible: false
                 dashed:
                     visible: false
                 dashed_big:
                     visible: false

        map_unit:
            filter:
                kind: map_unit
            draw:
                lines:
                    color: global.region_boundary
                    width: [[0, 0.5px], [2, 1.0px], [6, 1.5px], [8, 2.0px], [9, 3.5px], [14, 5.5px], [16, 6.5px]]

        region:
            filter:
                any:
                    - kind: [region,macroregion,aboriginal_lands]
                    - kind_detail: [3,4]
            draw:
                lines:
                    color: global.region_boundary
                    width: [[0, 0.5px], [2, 1.0px], [6, 1.5px], [8, 2.0px], [9, 3.5px], [14, 5.5px], [16, 6.5px]]
            water:
                filter: { maritime_boundary: true }
                draw:
                    lines:
                        visible: false
                    text-blend-order:
                        visible: false
            early:
                filter: { not: { min_zoom: [1,2] }, $zoom: { max: 8 } }
                draw:
                    lines:
                        visible: false

            aboriginal_lands:
                filter:
                    kind: aboriginal_lands
                draw:
                    lines:
                        width: [[8, 1.0px], [9, 1.5px], [14, 2.0px], [16, 3.5px]]

            region-labels:
                filter: { name: true, $zoom: { min: 8 } }
                draw:
                    text-blend-order:
                        priority: global.collision_priority
                        visible: global.text_visible_admin
                        text_source: global.ux_language_text_source_boundary_lines_left_right
                        offset: [0px, 5px]
                        text_wrap: 100px
                        font:
                            family: Varela
                            size: 9px
                            weight: 200
                            fill: [0.4,0.4,0.4]
                            # stroke: { color: global.text_stroke, width: 4 }
                            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, 0px]
                aboriginal_lands-early:
                    filter:
                        kind: aboriginal_lands
                        $zoom: { max: 10 }
                    draw:
                        text-blend-order:
                            visible: false
            unrecognized-region:
                filter:
                    - global.ux_point_of_view_kind_filter_unrecognized
                draw:
                     lines:
                         visible: false
                     text-blend-order:
                         visible: false
                     dashed:
                         visible: false
                     dashed_big:
                         visible: false

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

        country:
            filter:
                kind: country
                $zoom: { min: 2, max: 9 }
            draw:
                text-blend-order:
                    visible: global.text_visible_admin
                    font:
                        fill: [[2,[0.357,0.243,0.184]],[6,[0.604,0.437,0.427]]]
                        transform: uppercase
            country-z2-z3:
                filter:
                    $zoom: [2,3]
                draw:
                    text-blend-order:
                        buffer: 10px
                        font:
                            size: 10px
                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
                        font:
                            size: 11px
                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:
                        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:
                        font:
                            size: 16px
                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:
                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:
                            font:
                                size: 12px

        region:
            filter:
                kind: region
                $zoom: { min: 4, max: 9 }
            draw:
                text-blend-order:
                    visible: false
                    text_source: global.ux_language_text_source_short
                    font:
                        size: 10px
                        weight: 300
                        fill: [0.3,0.3,0.3]
            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
            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: 13px
            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: 15px
                            fill: [0.4,0.4,0.4]
            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: [[7,15px],[8,16px]]
                            fill: [0.5,0.5,0.5]
                            transform: uppercase
                pesky-z7:
                    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: 13px

        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
                    # debug testing
                    #collide: false
                    text:
                        visible: global.text_visible_populated_places
                        font:
                            size: [[5,9px],[8,10px],[12,11px]]
                text-blend-order:
                    visible: global.text_visible_populated_places
                    buffer: 8px
                    font:
                        size: [[5,9px],[8,10px],[12,11px]]

            #
            # 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
            z9-10k-below:
                filter: { $zoom: [8,9], population: { max: 10000 } }
                draw:
                    mapzen_icon_library:
                        buffer: 18px
            z9-no-population:
                filter: { $zoom: [8,9], population: false }
                draw:
                    mapzen_icon_library:
                        buffer: 10px

            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
                        text:
                            font:
                                size: [[2,11px],[6,15px],[8,16px],[10,18px],[12,18px],[13,0px]]
                    text-blend-order:
                        font:
                            size: [[2,11px],[6,15px],[8,16px],[10,18px],[12,18px],[13,0px]]
                capital:
                    # we only want townspots to show as capital dots starting at zoom 5
                    filter:
                        all:
                            - global.ux_point_of_view_kind_filter_country_capital
                            - $zoom: { min: 5 }
                    draw:
                        mapzen_icon_library:
                            size: [[10,8px],[11,0px]]
                            sprite: capital-l
            population-5m-10m:
                filter:
                    population: { min: 5000000, max: 10000000 }
                draw:
                    mapzen_icon_library:
                        size: [[4,5px],[8,6px],[9,0px]]
                        sprite: townspot-m-rev
                        text:
                            font:
                                size: [[4,10px],[6,13px],[8,16px],[10,18px],[12,18px],[13,0px]]
                    text-blend-order:
                        font:
                            size: [[4,10px],[6,13px],[8,16px],[10,18px],[12,18px],[13,0px]]
                capital:
                    # we only want townspots to show as capital dots starting at zoom 5
                    filter:
                        all:
                            - global.ux_point_of_view_kind_filter_country_capital
                            - $zoom: { min: 5 }
                    draw:
                        mapzen_icon_library:
                            size: [[10,8px],[11,0px]]
                            sprite: capital-l
            population-1m-5m:
                filter:
                    population: { min: 1000000, max: 5000000 }
                draw:
                    mapzen_icon_library:
                        size: [[4,5px],[8,6px],[9,0px]]
                        sprite: townspot-m-rev
                        text:
                            font:
                                size: [[4,10px],[6,13px],[8,16px],[10,18px],[12,18px],[13,0px]]
                    text-blend-order:
                        font:
                            size: [[4,10px],[6,13px],[8,16px],[10,18px],[12,18px],[13,0px]]
                capital:
                    # we only want townspots to show as capital dots starting at zoom 5
                    filter:
                        all:
                            - global.ux_point_of_view_kind_filter_country_capital
                            - $zoom: { min: 5 }
                    draw:
                        mapzen_icon_library:
                            size: [[10,8px],[11,0px]]
                            sprite: capital-l
            population-500k-1m:
                filter:
                    population: { min: 500000, max: 1000000 }
                draw:
                    mapzen_icon_library:
                        size: [[8,6px],[9,0px]]
                        sprite: townspot-m-rev
                        text:
                            font:
                                size: [[5,10px],[8,14px],[10,14px],[12,16px],[13,0px]]
                    text-blend-order:
                        font:
                            size: [[5,10px],[8,14px],[10,14px],[12,16px],[13,0px]]
                capital:
                    filter:
                        all:
                            - global.ux_point_of_view_kind_filter_country_capital
                            - $zoom: { min: 5 }
                    draw:
                        mapzen_icon_library:
                            size: [[10,6px],[11,0px]]
                            sprite: capital-m
            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
                        text:
                            font:
                                size: [[6,10px],[8,12px],[10,14px],[12,16px],[13,0px]]
                    text-blend-order:
                        font:
                            size: [[6,10px],[8,12px],[10,14px],[12,16px],[13,0px]]
                capital:
                    filter:
                        all:
                            - global.ux_point_of_view_kind_filter_country_capital
                            - $zoom: { min: 5 }
                    draw:
                        mapzen_icon_library:
                            size: [[10,6px],[11,0px]]
                            sprite: capital-m
            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
                        text:
                            font:
                                size: [[6,10px],[8,12px],[10,12px],[12,14px],[14,14px],[15,0px]]
                    text-blend-order:
                        font:
                            size: [[6,10px],[8,12px],[10,12px],[12,14px],[14,14px],[15,0px]]
                capital:
                    filter:
                        all:
                            - global.ux_point_of_view_kind_filter_country_capital
                            - $zoom: { min: 5 }
                    draw:
                        mapzen_icon_library:
                            size: [[10,6px],[11,0px]]
                            sprite: capital-m
            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
                        text:
                            font:
                                fill: [0.30,0.30,0.30]
                                size: [[6,10px],[8,11px],[10,12px],[12,14px],[14,14px],[15,0px]]
                    text-blend-order:
                        font:
                            fill: [0.30,0.30,0.30]
                            size: [[6,10px],[8,11px],[10,12px],[12,14px],[14,14px],[15,0px]]
                capital:
                    filter:
                        all:
                            - global.ux_point_of_view_kind_filter_country_capital
                            - $zoom: { min: 5 }
                    draw:
                        mapzen_icon_library:
                            size: [[10,5px],[11,0px]]
                            sprite: capital-m
            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
                        text:
                            font:
                                fill: [0.30,0.30,0.30]
                                size: [[9,11px],[12,12px],[14,12px],[15,0px]]
                    text-blend-order:
                        font:
                            fill: [0.30,0.30,0.30]
                            size: [[9,11px],[12,12px],[14,12px],[15,0px]]
                capital:
                    filter:
                        all:
                            - global.ux_point_of_view_kind_filter_country_capital
                            - $zoom: { min: 5 }
                    draw:
                        mapzen_icon_library:
                            size: [[10,5px],[11,0px]]
                            sprite: capital-s
            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
                        text:
                            font:
                                fill: [0.35,0.35,0.35]
                                size: [[9,11px],[12,12px],[14,12px],[15,0px]]
                    text-blend-order:
                        font:
                            fill: [0.35,0.35,0.35]
                            size: [[9,11px],[12,12px],[14,12px],[15,0px]]
                capital:
                    filter:
                        all:
                            - global.ux_point_of_view_kind_filter_country_capital
                            - $zoom: { min: 5 }
                    draw:
                        mapzen_icon_library:
                            size: [[10,5px],[11,0px]]
                            sprite: capital-s
            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
                        text:
                            font:
                                fill: [0.35,0.35,0.35]
                                size: [[9,10px],[12,12px],[13,12px],[14,12px],[15,0px]]
                    text-blend-order:
                        font:
                            fill: [0.35,0.35,0.35]
                            size: [[9,10px],[12,12px],[13,12px],[14,12px],[15,0px]]
                capital:
                    filter:
                        all:
                            - global.ux_point_of_view_kind_filter_country_capital
                            - $zoom: { min: 5 }
                    draw:
                        mapzen_icon_library:
                            size: [[10,5px],[11,0px]]
                            sprite: capital-s
            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
                        text:
                            font:
                                fill: [0.35,0.35,0.35]
                                size: [[9,10px],[12,10px],[13,12px],[14,12px],[15,0px]]
                    text-blend-order:
                        font:
                            fill: [0.35,0.35,0.35]
                            size: [[9,10px],[12,10px],[13,12px],[14,12px],[15,0px]]
                capital:
                    filter:
                        all:
                            - global.ux_point_of_view_kind_filter_country_capital
                            - $zoom: { min: 5 }
                    draw:
                        mapzen_icon_library:
                            size: [[10,5px],[11,0px]]
                            sprite: capital-s
            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
                        text:
                            font:
                                fill: [0.35,0.35,0.35]
                                size: [[9,10px],[12,10px],[14,11px],[15,0px]]
                    text-blend-order:
                        font:
                            fill: [0.35,0.35,0.35]
                            size: [[9,10px],[12,10px],[14,11px],[15,0px]]
                capital:
                    filter:
                        all:
                            - global.ux_point_of_view_kind_filter_country_capital
                            - $zoom: { min: 5 }
                    draw:
                        mapzen_icon_library:
                            size: [[10,5px],[11,0px]]
                            sprite: capital-s
            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
                        text:
                            font:
                                fill: [0.35,0.35,0.35]
                                size: [[9,10px],[12,10px],[14,11px],[15,0px]]
                    text-blend-order:
                        font:
                            fill: [0.35,0.35,0.35]
                            size: [[9,10px],[12,10px],[14,11px],[15,0px]]
                capital:
                    filter:
                        all:
                            - global.ux_point_of_view_kind_filter_country_capital
                            - $zoom: { min: 5 }
                    draw:
                        mapzen_icon_library:
                            size: [[10,5px],[11,0px]]
                            sprite: capital-s

        #
        #neighborhoods (excluding microhoods, eg the Tendernob)
        #
        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:
                    # there are more labels than we want to show, so we hide them,
                    # then selectively reveal in classes below (ultimately a data problem)
                    visible: global.text_visible_neighbourhoods_e
                    buffer: 8px
                    text_wrap: 10
                    max_lines: 2
                    font:
                        family: Varela
                        fill: [0.225,0.561,0.415]
                        size: [[11, 9px], [14, 12px], [16, 18px]]
                        transform: uppercase

            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:
                                font:
                                    size: 13px


    pois:
        data: { source: mapzen, layer: pois }
        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: [[13, 95%], [16, 100%], [18, 105%]]
                sprite: function() { return feature.kind; }
                sprite_default: generic
                interactive: global.sdk_interactive
                priority: global.collision_priority
                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: Quicksand #global.text_font_family
                        weight: normal
                        fill: [0.20,0.20,0.20]
                        size: [[13,10px], [17,12px], [19,12px], [20,14px]]
                        stroke: { color: global.text_stroke, width: [[12,2px],[16,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

        # 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
                    
        generator:
            filter: { kind: generator }
            draw:
                mapzen_icon_library:
                    sprite: function() { return 'generator_' + feature.kind_detail; }
                    sprite_default: generator

        # 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

        national-park-protected-areas:
            filter:
                kind: [national_park, battlefield]
            draw:
                mapzen_icon_library:
                    visible: global.icon_visible_landuse_green
                    size: global.icon_size_green
                    sprite: park
                    text:
                        visible: global.text_visible_landuse_green
                        font:
                            fill: [0.200,0.409,0.398] #*text_fill_park
                            style: italic
            z14-parks:
                filter: { $zoom: { min: 14 } }
                draw:
                    mapzen_icon_library:
                        sprite: park-l
                        size: global.icon_size_green_l
        parks:
            filter:
                - kind: [park, conservation, grass]
                - { kind: protected_area, not: { protect_class: [6, '6'] } }
            draw:
                mapzen_icon_library:
                    visible: global.icon_visible_landuse_green
                    size: global.icon_size_green
                    sprite: park
                    text:
                        visible: global.text_visible_landuse_green
                        font:
                            fill: [0.181,0.370,0.361]
                            style: italic
            only-text-later:
                filter: { kind: [grass], $zoom: { min: 16 } }
                draw:
                    mapzen_icon_library:
                        visible: false
                        text:
                            font:
                                style: italic
        forest:
            filter:
                - kind: forest
                - { kind: protected_area, protect_class: [6, '6'] }
            draw:
                mapzen_icon_library:
                    visible: global.icon_visible_landuse_green
                    size: global.icon_size_green
                    sprite: forest
                    text:
                        visible: global.text_visible_landuse_green
                        font:
                            fill: [0.181,0.370,0.361]
                            style: italic
        beach:
            filter:
                kind: [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.text_fill_beach
        airport:
            filter:
                kind: [airport, aerodrome]
            draw:
                mapzen_icon_library:
                    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:
                    visible: false
                text-blend-order:
                    text_wrap: 10
                    visible: true
                    font:
                        fill: gray
                        style: italic
                        weight: normal

        gate-early:
            filter: { kind: gate, $zoom: { max: 20 } }
            draw:
                mapzen_icon_library:
                    icon: generic
        gate-late:
            filter: { kind: gate, $zoom: { min: 20 } }
            draw:
                mapzen_icon_library:
                    visible: true

        tree:
            filter: { kind: tree, $zoom: { min: 18 } }
            draw:
                background-icons:
                    # TODO: put tree icons behind the buildings
                    # See SF State University #20/37.72314/-122.47772
                    color: [0.145,0.745,0.643]
                    visible: true #global.icon_visible_poi_landuse_e
                    collide: false
            z18:
                filter: { $zoom: [18] }
                draw:
                    mapzen_icon_library:
                        color: [0.459,0.765,0.722]
                        sprite: tree-s

        glacier:
            filter:
                kind: glacier
            draw:
                mapzen_icon_library:
                    visible: false
                    text:
                        visible: true
                        text_wrap: 10
                        font:
                            weight: normal
                            style: italic
                            fill: '#4ba3c5'

        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, 60%], [15, 80%], [17, 100%], [18, 110%]]
                    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-z14-icons:
                filter: { kind_tile_rank: { min: 50 }, $zoom: [13,14] }
                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:
                    text:  { font: { size: 10px, style: italic } }
        garden-no-area-later:
            filter: { kind: [garden, allotments], $zoom: { min: 17 }, area: false }
            draw:
                mapzen_icon_library:
                    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:
                    visible: false
                    text:
                        font:
                            style: italic

        bus_stop:
            filter:
                kind: [bus_stop]
            draw:
                mapzen_icon_library:
                    size: [[18, 80%], [20, 100%]]
                    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
                    font:
                        fill: global.text_fill_exits
                        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 }
            draw:
                mapzen_icon_library:
                    visible: false
            z14+:
                filter: { $zoom: { min: 14, max: 16 } }
                draw:
                    text-blend-order:
                        visible: global.text_visible_exits
                        text_source: ref
                        font:
                            family: Montserrat
                            fill: global.text_fill_exits
                            size: [[12,9px],[15,12px],[17,14px]]
                            stroke: { color: global.text_stroke, width: [[12,2px],[14,3px],[15,3px]] }
            later:
                filter: { $zoom: { min: 16 } }
                draw:
                    text-blend-order:
                        visible: false
                    mapzen_icon_library:
                        visible: global.text_visible_exits
                        text:
                            visible: global.text_visible_exits
                            text_source: ref
                            font:
                                family: Montserrat
                                fill: global.text_fill_exits
                                size: [[12,9px],[15,12px],[17,14px]]
                                stroke: { color: global.text_stroke, width: [[12,2px],[14,3px],[15,3px]] }

    earth-labels:
        data: { source: mapzen, layer: earth }
        filter: { name: true }
        draw:
            text-blend-order:
                text_source: global.ux_language_text_source
        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: Varela
                        size: [[1,11px],[3,14px]]
                        fill: [0.762,0.525,0.428]
                        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:
                        size: 12px
                        style: italic
                        fill: global.text_fill
                        weight: normal
                        stroke: { color: global.text_stroke, width: 4 }
                        #transform: uppercase

    landuse:
        data: { source: mapzen }
        draw:
            dots:
                order: global.feature_order
                visible: false
            dots-rev:
                order: global.feature_order
                visible: false
            polygons:
                order: global.feature_order
#                #debug for polygon merging
#                order: |
#                  function() {
#                      if( feature.id ) {
#                          return 1001;
#                      } else {
#                          return 1000;
#                      }
#                  }
#                #debug for polygon merging
#                color: |
#                  function() {
#                      if( feature.id ) {
#                          return [
#                              0.7 * (parseInt(feature.id, 16) / 100 % 1),     // jshint ignore:line
#                              0.7 * (parseInt(feature.id, 16) / 10000 % 1),   // jshint ignore:line
#                              0.7 * (parseInt(feature.id, 16) / 1000000 % 1), // jshint ignore:line
#                              1
#                          ];
#                      } else {
#                          if( feature.scale_rank == 6 ) {
#                              return [1.,0.,0.,1];
#                          } else if( feature.scale_rank == 5 ) {
#                              return [0.,1.,0.,1];
#                          } else if( feature.scale_rank == 4 ) {
#                              return [0.,0.,1.,1];
#                          } else if( feature.scale_rank == 3 ) {
#                              return [0.,0.,0.5,1];
#                          } else if( feature.scale_rank == 2 ) {
#                              return [0.,0.5,0.,1];
#                          } else if( feature.scale_rank == 1 ) {
#                              return [0.,0.5,0.,1];
#                          } else if( feature.scale_rank == 0 ) {
#                              return [0.5,0.,0.,1];
#                          } else {
#                              return [0.5,0.5,0.5,1];
#                          }
#                      }
#                  }
            lines:
                order: global.feature_order

        landuse-labels:
            filter:
                all:
                    - label_placement: true
                    - name: true
                    - function() { return global.text_visible_landuse_generic; }
            draw:
                text-blend-order:
                    text_source: global.ux_language_text_source
                    interactive: global.sdk_interactive
                    font:
                        fill: '#666'
                        family: global.text_font_family
                        style: italic
                        size: 11px
                        stroke: { color: global.text_stroke_address, width: 1 }

        #TIER 1
        national_park:
            filter:
                all:
                    - kind: [national_park, battlefield, protected_area]
                any:
                    - not: { operator: [ "United States Forest Service" ] }
                    - protect_class: ['2','3','5']
            draw:
                dots:
                    color: [[4,[0.655,0.800,0.796]],[8,[0.588,0.780,0.773]]]
                    # todo: what is this?
                    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:
                    dots:
                        color: [[4,[0.525,0.765,0.686]],[9,[0.416,0.737,0.631]]]
                        order: 19
                        visible: true
                        # color: [[4,[0.242,0.737,0.712]],[12,[0.224,0.682,0.659]]]
        #TIER 2
        conservation:
            filter:
                all:
                    - $zoom: { min: 4 }
                    - kind: [protected_area, nature_reserve, national_park]
                    - not: { protect_class: ['2','3','5'] }
            draw:
                dots:
                    # effectively the wilderness color
                    color: [[0,[0.442,0.960,0.865]],[11,[0.2,0.850,0.765]]] #red #[0.420,0.808,0.698]
                    visible: true
                    order: 33
        national_forest_level_6:
            filter:
                all:
                    - kind: forest
                any:
                    - protect_class: ['6']
                    - operator: ['United States Forest Service']
            draw:
                dots:
                    color: [0.442,0.960,0.865] #*green7
                    visible: true

        # gotta be a protected area to draw green, not just a landcover type
        farm:
            filter:
                kind: [farm, farmland]
            draw:
                dots:
                    color: [0.600,0.790,0.714]
                    visible: global.green4_v
        forest-landcover:
            filter: { kind: [forest, natural_forest, wood, natural_wood, natural_park], not: { operator: "United States Forest Service" } }
            draw:
                dots:
                    color: [0.70,0.990,0.92] #[0.486,0.839,0.722]
                    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:
                dots:
                    # color: [[4,[0.655,0.800,0.796]],[11,[0.588,0.780,0.773]],[12,[0.242,0.737,0.712]],[14,[0.412,0.733,0.718]],[15,[0.635,0.792,0.788]]]
                    color: [[4,[0.655,0.800,0.796]],[11,[0.588,0.780,0.773]],[12,[0.635,0.792,0.788]]]
                    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:
                    dots:
                        color: [[4,[0.525,0.765,0.686]],[9,[0.416,0.737,0.631]]]
        # TODO: This seems broken
        urban:
            filter: { kind: [urban, rural, residential] }
            visible: global.earth2_v
            draw:
                dots:
                    color: [[0, global.earth2],[9, global.earth2]]
                    visible: global.earth2_v
        #TIER 3
        airport:
            filter:
                kind: aerodrome
            draw:
                dots:
                    color: [0.805,0.805,0.825] #pink
                    visible: true
                    #order: 74
        military:
            filter:
                kind: [military,naval_base]
            draw:
                dots:
                    color: [0.722,0.769,0.827]
                    visible: true
        danger_area:
            filter:
                kind: danger_area
            draw:
                polygons_transparent:
                    color: [0.7,0.2,0.2,0.05]
                    visible: true
                lines_transparent:
                    color: [0.7,0.2,0.2,0.5]
                    visible: true
                    width: 1px
                    dash: [3, 1]
        range:
            filter:
                kind: range
            draw:
                polygons_transparent:
                    color: [0.7,0.2,0.2,0.05]
                    visible: true
                    #order: 256
                lines_transparent:
                    color: [0.7,0.2,0.2,0.5]
                    visible: true
                    width: 1px
                    dash: [3, 1]

        university:
            filter:
                kind: [university, college]
            draw:
                dots:
                    color: [0.827,0.753,0.682]
                    visible: true
        #TIER 4
        cemetery:
            filter:
                kind: [cemetery,grave_yard]
            draw:
                dots:
                    color: global.green2
                    visible: true
        commercial:
            filter:
                kind: commercial
            draw:
                dots:
                    color: [0.855,0.748,0.667]
                    visible: global.grey1_v
        golf_course:
            filter:
                kind: golf_course
            draw:
                dots:
                    color: [0.353,0.812,0.545]
                    visible: true
        hospital:
            filter:
                kind: hospital
            draw:
                dots:
                    color: [0.843,0.624,0.647]
                    visible: true
        industrial:
            filter:
                kind: industrial
            draw:
                dots-rev:
                    color: [[8,[0.845,0.845,0.845]],[14,[0.835,0.835,0.835]],[15,[0.780,0.780,0.780]]]
                    visible: true
        power:
            filter: { kind: [plant, generator, substation] }
            draw:
                dots:
                    color: [0.679,0.679,0.679]
                    visible: true
        railway:
            filter:
                kind: railway
            draw:
                dots-rev:
                    color: [0.898,0.910,0.918]
                    visible: true
        sports_centre:
            filter:
                kind: sports_centre
            draw:
                dots:
                    color: global.green10
        recreation_ground:
            filter:
                kind: recreation_ground
            draw:
                dots:
                    color: global.green1
                    visible: true
        retail:
            filter:
                kind: retail
            draw:
                dots:
                    color: [0.955,0.752,0.650]
                    visible: global.grey1_v
        stadium:
            filter:
                kind: stadium
            draw:
                dots:
                    color: [0.624,0.690,0.761]
                    visible: true
        zoo:
            filter:
                kind: [zoo, wildlife_park]
            draw:
                dots:
                    color: [0.498,1.000,0.851]
                    visible: true
        winter_sports:
            filter:
                kind: winter_sports
            draw:
                dots:
                    color: global.grey8
                    visible: global.grey8_v
        man-made:
            filter: { kind: [pier,wastewater_plant,works,bridge,tower,breakwater,water_works,groyne,dike,cutline,quay,wharf,shipyard,container_terminal,ferry_terminal,port_terminal] }
            draw:
                dots:
                    color: [0.690,0.690,0.690]
                    visible: true
            pier:
                filter: { kind: [pier,bridge,breakwater,groyne,dike,cutline] }
                draw:
                    dots:
                        color: [0.679,0.679,0.679]
                        visible: true
            quay_wharf:
                filter: { kind: [quay,wharf] }
                draw:
                    dots:
                        visible: false
                    polygons_transparent:
                        color: [0.8,0.8,0.8,0.5]
                        visible: true
                        # hack the order as the server isn't provided a good value
                        #order: 236

        #TIER 5
        tourism-related:
            filter:
                kind:
                    - theme_park
                    - resort
                    - aquarium
                    - winery
                    - maze
            draw:
                dots:
                    color: global.grey10
                    visible: true
        beach:
           filter:
               kind: beach
           draw:
               dots:
                    color: [0.780,0.740,0.538]
                    visible: true

        plant_nursery:
            filter:
                kind: plant_nursery
            draw:
                dots:
                    color: [0.955,0.752,0.650]
                    visible: true
                    order: 235

        orchard:
            filter:
                kind: orchard
            draw:
                dots:
                    color: [0.600,0.790,0.714]
                    visible: true
                    order: 236

        mud:
            filter:
                kind: mud
            draw:
                polygons_transparent:
                    color: [0.8,0.8,0.7,0.1]
                    visible: true

        wetland:
            filter:
                kind: wetland
            draw:
                polygons_transparent:
                    color: [0.8,0.8,0.7,0.1]
                    visible: true

        reef:
            filter:
                kind: reef
            draw:
                polygons_transparent:
                    color: [0.6,0.7,0.7,0.1]
                    visible: true
                    order: 237

        #TIER 6
        garden:
            filter:
                kind: [garden, allotments]
            draw:
                dots:
                    color: [0.604,0.973,0.722]
                    visible: true
        parking:
            filter:
                all:
                    - kind: parking
                    - $zoom: { min: 14 }
                any:
                    - { $zoom: { min: 14 }, area: { min: 10000 } }
                    - { $zoom: { min: 15 }, area: { min: 5000 } }
            draw:
                dots:
                    color: [0.765,0.765,0.765]
                    visible: global.grey1_v
            early:
                filter: { $zoom: { max: 15 } }
                draw:
                    dots:
                        color: global.grey1_e
                        visible: true
        pedestrian:
            filter:
                kind: [pedestrian,common,footway]
            draw:
                dots:
                    color: [0.740,0.740,0.740]
                    visible: global.grey1_v
            green-stuff:
                filter:
                    surface: [grass]
                draw:
                    dots:
                        color: [0.584,0.843,0.792]
        grass:
            filter:
                kind: [grassland, grass]
            draw:
                dots:
                    color: [0.700,0.890,0.814]
                    visible: true
        heath:
            filter:
                kind: heath
            draw:
                dots:
                    color: [0.700,0.890,0.814]
                    visible: true
        vineyard:
            filter:
                kind: vineyard
            draw:
                dots:
                    color: [0.700,0.890,0.814]
                    visible: true
        sand:
            filter:
                kind: sand
            draw:
                dots:
                    color: [0.870,0.870,0.737]
                    visible: true
        shingle:
            filter:
                kind: shingle
            draw:
                dots:
                    color: [0.870,0.870,0.737]
                    visible: true
        bare_rock:
            filter:
                kind: bare_rock
            draw:
                dots:
                    color: [0.870,0.870,0.737]
                    visible: true
        desert:
            filter:
                kind: desert
            draw:
                dots:
                    color: [0.870,0.870,0.737]
                    visible: true

        # glacier:
        #     filter:
        #         kind: glacier
        #     draw:
        #         terrain:
        #             color: [0.890,0.970,1.000]
        #             # color: [0.975,0.975,0.828]
        #             visible: true

        pitch:
            filter: { kind: pitch }
            draw:
                dots:
                    color: [0.490,0.812,0.631]
                    visible: true
        place_of_worship:
            filter:
                kind: place_of_worship
            draw:
                dots:
                    color: [0.910,0.972,1.000]
                    visible: global.grey1_v
        playground:
            filter:
                kind: playground
            draw:
                dots-rev:
                    color: [0.584,0.843,0.792]
                    visible: true
        school:
            filter:
                kind: school
            draw:
                dots:
                    color: [0.749,0.722,0.694]
                    visible: true

        minor-landuse:
            filter:
                kind:
                    - attraction
                    - artwork
                    - wilderness_hut
                    - hanami
            draw:
                dots:
                    color: [0.765,0.765,0.765]
                    visible: true

#        # (20190729: nvk) TODO: This should only show when no other kind condition
#        # has been met, which is not how the style is written / it's broken.
#
#        all-other-landuse-late:
#            filter:
#                $zoom: { min: 13 }
#                $geometry: polygon
#                not: { kind: [fence, tree_row] }
#            draw:
#                dots:
#                    color: [0.765,0.765,0.765]
#                    visible: true

        # GO MELLOW
        # 18/41.19776/-8.68722
        tree_row:
            filter:
                kind: tree_row
            draw:
                lines:
                    order: 501 # function() { return feature.sort_rank; }
                    color: [0.602,0.860,0.722]
                    width: [[16,1px],[17,2px],[19,1.5m]]

        # GO MELLOW
        # 20/37.76779/-122.40096
        hedge:
            filter:
                kind: hedge
            draw:
                lines:
                    order: 500 # function() { return feature.sort_rank; }
                    color: [0.602,0.860,0.722]
                    width: [[16,0.5px],[17,1px],[19,1m]]

        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
                    - roller_coaster
                    - amusement_ride
                    - summer_toboggan
                    - trail_riding_station
                    - water_slide
                    - carousel
                    - animal
                    - enclosure
                    - petting_zoo
                    - aviary
            draw:
                dots:
                    order: global.feature_order
                    visible: false
                dots-rev:
                    order: global.feature_order
                    visible: false
                polygons:
                    visible: false
                    order: global.feature_order
            runway:
                filter:
                    kind: runway
                draw:
                    polygons:
                        visible: true
                        color: [[10,[0.4,0.4,0.4]],[11,[0.50,0.50,0.50]],[12,[0.7,0.7,0.7]],[13,[0.75,0.75,0.75]],[14,[0.95,0.95,0.95]]]
                early:
                    filter: { $zoom: [9] }
                    draw:
                        polygons:
                            visible: false
            apron:
                filter:
                    kind: apron
                    $zoom: { min: 15}
                draw:
                    dots-rev:
                        visible: true
                        color: [0.820,0.820,0.820]
            minor-amusement-park-landuse:
                filter:
                    kind:
                        - roller_coaster
                        - amusement_ride
                        - summer_toboggan
                        - trail_riding_station
                        - water_slide
                        - carousel
                draw:
                    dots:
                        color: global.grey12
                        visible: true
            minor-zoo-landuse:
                filter:
                    kind:
                        - animal
                        - enclosure
                        - petting_zoo
                        - aviary
                draw:
                    dots:
                        color: global.green11
                        visible: true

        landuse_urban_area-early:
            filter:
                # This is from Natural Earth and only shows up from zoom(0,9)
                kind: [urban_area, residential]
                # later zooms are from remapping OSM landuse values to urban_ara
            draw:
                dots:
                    visible: global.earth2_ev
                    order: global.feature_order
                    color: [[4,[0.965,0.600,0.882]],[6,[0.965,0.600,0.882]],[7,[0.882,0.639,0.827]],[8,[0.757,0.729,0.753]]]
            later:
                filter:
                    $zoom: { min: 12 }
                draw:
                    dots:
                        visible: false
                    polygons:
                        visible: true
                        color: [0.83,0.83,0.83]
                        
        city_wall:
            filter: { kind: city_wall }
            draw:
                lines:
                    color: global.city_wall
                    width: [[12, 0.75px], [13, 1.0px], [14, 1.2px], [15, 2.0px], [16, 2.5px], [19, 3m]]
        walls:
            filter: { kind: [wall, retaining_wall,embankment] }
            draw:
                lines:
                    color: global.retaining_wall
                    width: [[14, 0.5px], [15, 1.0px], [16, 1.5px], [17, 2.0px], [19, 2m]]
            #TODO: hack
            embankment:
                filter: { kind: embankment }
                draw:
                    lines:
                        order: 500
        snow_fence:
            filter: { kind: snow_fence }
            draw:
                lines:
                    color: global.snow_fence
                    width: [[14, 0.5px], [15, 1.0px], [16, 1.5px], [17, 2.0px], [19, 1m]]
        fence:
            filter: { kind: [fence,kerb,guard_rail,ditch] }
            draw:
                lines:
                    color: global.fence
                    width: [[14, 0.5px], [15, 1.0px], [16, 1.5px], [17, 2.0px], [19, 1m]]
        power_line:
            filter: { kind: [power_line, power_minor_line] }
            draw:
                lines:
                    color: [0.779,0.779,0.779]
                    width: [[14, 0.5px], [15, 1.0px], [16, 1.5px], [17, 2.0px], [19, 1m]]
            minor:
                filter: { kind: power_minor_line }
                draw:
                    lines:
                        color: [0.8,0.8,0.8]
                        width: [[14, 0.5px], [15, 0.8px], [16, 1.25px], [17, 1.5px], [19, 0.5m]]

    transit-overlay-rail-lines:
        data: { source: mapzen, layer: transit }
        filter:
            all:
                - not: { kind: [platform, railway] }
                - function() { return global.sdk_transit_overlay; }
        draw:
            lines:
                order: 499
                color: purple
                width: [[5,1.5px],[6,2px],[11,3px],[18,4px]]
                outline:
                    color: [1.,1.,1.,.8]
                    width: [[7,0px],[8,0.25px],[9,0.5px],[12,1.0px],[13,1.75px],[14,2px]]
                    #width: [[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: 10.5
                    # 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]
#                    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'; } }
                            weight: 700
                            size: [[7,7px],[12,8px],[16,11px]]
                            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: black
                            style: italic
                            stroke: { color: white, width: 3px }

    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,0.5,0.25]],[15,[0,0,0.5,0.8]]]
                width: [[11,0.5px],[12,0.8px],[16,1.5px],[18,1.5m]]
                # let roads sort themselves past zoom 14
                order: 488
                # but give them all the same outline
                outline:
                    order: 487
                    
        labels-bus-lines:
            filter:
                all:
                    - function() { return global.sdk_transit_overlay; }
                    - all:
                        - $zoom: { min: 18 }
                        - bus_shield_text: true
            draw:
                mapzen_icon_library:
                    priority: 10.8
                    # you need to match any custom shield to the vector tile `network` values
                    sprite: function() { return ('sdk_shield-' + feature.bus_shield_text.length + 'char'); }
                    sprite_default: sdk_shield_5char
                    color: [0,0,0.5,0.8]
                    # 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]
#                    visible: false
                    text:
                        offset: [0px, -0.5px]
                        repeat_distance: 200px
                        anchor: center
                        text_source: function() { if( feature.bus_shield_text.length < 6 ) { return feature.bus_shield_text; } else { return ''; } }
                        font:
                            family: Montserrat
                            fill: white
                            weight: 700
                            size: [[7,7px],[12,8px],[16,11px]]
                            stroke: { width: 0px }

            width_1char:
                filter: function() { return (feature.bus_shield_text.length === 1); }
                draw:
                    mapzen_icon_library:
                        size: [[6,[16px,16px]],[13,[18px,18px]],[16,[21px,21px]]]
            width_2char:
                filter: function() { return (feature.bus_shield_text.length === 2); }
                draw:
                    mapzen_icon_library:
                        size: [[6,[21px,16px]],[13,[24px,18px]],[16,[28px,21px]]]
            width_3char:
                filter: function() { return (feature.bus_shield_text.length === 3); }
                draw:
                    mapzen_icon_library:
                        size: [[6,[27px,16px]],[13,[31px,18px]],[16,[36px,21px]]]
            width_4char:
                filter: function() { return (feature.bus_shield_text.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.bus_shield_text.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.bus_shield_text.length > 5); }
                draw:
                    mapzen_icon_library:
                        visible: false
 
        z19-show-operator-name:
                filter:
                    all:
                        - function() { return global.sdk_transit_overlay; }
                        - $zoom: { min: 19 }
                draw:
                    text:
                        text_source: function() { return (feature.bus_network); }
                        priority: 10.99
                        font:
                            fill: [0,0,0.5,0.8]
                            style: italic
                            size: 14px
                            stroke: { color: white, width: 3px }

    transit-overlay-station-labels:
        data: { source: mapzen, layer: pois }
        enabled: global.sdk_transit_overlay
        filter:
            kind: [station, tram_stop, bus_station, subway_entrance, halt, stop, platform, bus_stop, stop_position ]
        draw:
            mapzen_icon_library:
                visible: global.sdk_transit_overlay
                size: [[13, 12px], [16, 16px], [19, 20px]]
                interactive: global.sdk_interactive
                priority: function() { return global.collision_priority_transit_pois(feature, 15); }
                text:
                    buffer: 4px
                    #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: 10.16
                    font:
                        fill: black
                        weight: normal
                        size: 11px
                        stroke: { color: white, width: 3 }
        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: 2 } } } } }
        poi_labels-z18:
            filter: { $zoom: [18,19] }
            draw: { mapzen_icon_library: { text: { font: { size: 12px, weight: 600, stroke: { width: 3 } } } } }
        poi_labels-z20-up:
            filter: { $zoom: { min: 20 } }
            draw: { mapzen_icon_library: { text: { font: { size: 14px, weight: 600, stroke: { width: 3 }  } } } }
        station-train-subway:
            filter: { kind: [station, train-station, train_station] } #, $zoom: { min: 13 }
            draw:
                mapzen_icon_library:
                    sprite: train_station
                    size: [[13, '65%'], [16, '100%']]
                    priority: function() { return global.collision_priority_transit_pois(feature, 11); }
                    #text:
                        #offset: [[13, [0, 6px]], [14, [0, 7px]],[15, [0, 8px]], [17, [0, 10px]]]
                        #priority: 10.12
            low-priority-early:
                filter: { kind_tile_rank: { min: 3 }, $zoom: { min: 0, max: 12 } }
                draw:
                    mapzen_icon_library:
                        size: [[12, '40%'], [15, '50%']]
                        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, '40%'], [15, '50%']]
                        text:
                            visible: false
            low-priority-early-z13:
                filter: { kind_tile_rank: { min: 8 }, $zoom: [13] }
                draw:
                    mapzen_icon_library:
                        #visible: false
                        size: [[12, '40%'], [15, '50%']]
                        text:
                            visible: false
            low-priority-early-z14:
                filter: { kind_tile_rank: { min: 7 }, $zoom: [14] }
                draw:
                    mapzen_icon_library:
                        size: [[12, '40%'], [15, '50%']]
                        #visible: false
                        text:
                            visible: false
            late:
                filter: { $zoom: { min: 16 } }
                draw:
                    mapzen_icon_library:
                        text:
                            font:
                                weight: 600
                                size: 12px

            # highlight the important stations otherwise they get lost
            # when all the minor station labels get bigger
            high-priority-late-z15:
                filter: { kind_tile_rank: { max: 8 }, $zoom: { min: 15 } }
                draw:
                    mapzen_icon_library:
                        size: [[15, '110%'],[17, '150%'],[18, '200%']]
                        text:
                            font:
                                weight: 600
                                size: [[15,14px],[17,16px],[18,16px]]


        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: black
                            size: 12px
                            stroke: { color: white, width: 4 }
        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: function() { return global.collision_priority_transit_pois(feature, 17); }
                    text:
                        interactive: global.sdk_interactive
                        #priority: 10.18
                        font:
                            fill: black
                            size: 12px
                            stroke: { color: white, width: 4 }
            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: function() { return global.collision_priority_transit_pois(feature, 19); }
                    text:
                        #offset: [[17, [0, 6px]], [19, [0, 7px]]] # offset tracks alongside icon size (half icon height)
                        #priority: 10.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: black
                            size: 12px
                            stroke: { color: white, width: 4 }

#    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