Skip to content

Instantly share code, notes, and snippets.

@glw
Last active March 12, 2018 20:06
Show Gist options
  • Save glw/2c4e310cdf26f4b1714d7ba319c71eb8 to your computer and use it in GitHub Desktop.
Save glw/2c4e310cdf26f4b1714d7ba319c71eb8 to your computer and use it in GitHub Desktop.
# Refill provides a high contrast, black & white basemap useful for data visualization.
# Give OpenStreetMap data a professional basemap skin using the Tangram graphics library
# and Mapzen's versatile Vector Tiles.
#
# Refill is a modern GL take on Geraldine's work on Toner for Stamen as part of their
# great CityTracking project. Please use and adapt the open source scene file in
# your own projects!
#
# Authors: Geraldine Sarmiento, Nathaniel V. Kelso
# Read more: https://github.com/tangrams/refill-style
#
import:
- https://www.nextzen.org/carto/refill-style/11/refill-style.zip
- https://www.nextzen.org/carto/refill-style/11/themes/color-gray.zip
- https://www.nextzen.org/carto/refill-style/11/themes/label-10.zip
global:
#ux/ui
ux_language: false # l10n language code, trusting OSM in v0.10 tiles, fixed in v1.0 tiles
ux_language_fallback: false # l10n language code, trusting OSM in v0.10 tiles, fixed in v1.0 tiles
ux_language_text_source: |
function() {
// if a ux_langauge has been defined use that, else if there is feature name in the fallback_ux_language then use that, else use the feature's default name in the local language
return (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature.name;
}
ux_language_text_source_left: |
function() {
// if a ux_langauge has been defined use that, else if there is feature name in the fallback_ux_language then use that, else use the feature's default name in the local language
return (global.ux_language && feature['name:left:'+global.ux_language]) || (global.ux_language_fallback && feature['name:left:'+global.ux_language_fallback]) || feature['name:left'];
}
ux_language_text_source_right: |
function() {
// if a ux_langauge has been defined use that, else if there is feature name in the fallback_ux_language then use that, else use the feature's default name in the local language
return (global.ux_language && feature['name:right:'+global.ux_language]) || (global.ux_language_fallback && feature['name:right:'+global.ux_language_fallback]) || feature['name:right'];
}
ux_language_text_source_boundary_lines_left_right:
left: global.ux_language_text_source_left
right: global.ux_language_text_source_right
ux_language_text_source_boundary_lines: |
function() {
var right = (global.ux_language && feature['name:right:'+global.ux_language]) || (global.ux_language_fallback && feature['name:right:'+global.ux_language_fallback]) || feature['name:right'];
var left = (global.ux_language && feature['name:left:'+global.ux_language]) || (global.ux_language_fallback && feature['name:left:'+global.ux_language_fallback]) || feature['name:left'];
if( right && left ) {
//if( right.includes(' ') || left.includes(' ') ) {
return left + " - " + right;
//} else {
// return right + '\n' + left;
//}
} else {
return (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature.name;
}
}
ux_language_text_source_short: |
function() {
return (global.ux_language && feature['name:short:'+global.ux_language]) || (global.ux_language_fallback && feature['name:short:'+global.ux_language_fallback]) || feature['name:short'];
}
ux_language_text_source_short_proxy_name: |
function() {
var name = (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature['name'] || '';
var short = (global.ux_language && feature['name:short:'+global.ux_language]) || (global.ux_language_fallback && feature['name:short:'+global.ux_language_fallback]) || feature['name:short'];
return short ? name : '';
}
ux_language_text_source_abbreviation: |
function() {
var name = (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature['name'] || '';
var abbrev = (global.ux_language && feature['name:abbreviation:'+global.ux_language]) || (global.ux_language_fallback && feature['name:abbreviation:'+global.ux_language_fallback]) || feature['name:abbreviation'];
return abbrev || name;
}
ux_language_text_source_iata: |
function() {
var name = (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature['name'];
if(feature.iata) {
if (name) {
return name + ' (' + feature.iata + ')';
}
else {
return feature.iata;
}
} else {
return name;
}
}
ux_language_text_source_ocean: |
function() {
var name = (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature['name'] || '';
name = name.split(' ').join('\n');
return name.split('').join(' ');
}
ux_language_text_source_sea: |
function() {
var name = (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature['name'] || '';
name = name.split(' ').join('\n');
return name.split('').join(' ');
}
ux_language_text_source_continent_stacked_only: |
function() {
var name = (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature['name'] || '';
return name.split(' ').join('\n');
}
ux_language_text_source_continent: |
function() {
var name = (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature['name'] || '';
name = name.split(' ').join('\n');
return name.split('').join(' ');
}
ux_language_text_source_road_ref_and_name: |
function() {
// if a ux_langauge has been defined use that, else if there is feature name in the fallback_ux_language then use that, else use the feature's default name in the local language
return (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature.name;
/*
var name = (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature['name'];
if(feature.ref && name) {
return (feature.ref + ' ' + name);
} else {
return name;
}
*/
}
ux_language_text_source_road_ref_and_name_short: |
function() {
// if a ux_langauge has been defined use that, else if there is feature name in the fallback_ux_language then use that, else use the feature's default name in the local language
return (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature.name;
/*
var name = (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature['name'];
if (feature.ref && (feature.ref.length < 6) && name) {
return feature.ref + ' ' + name;
} else {
return name;
}
*/
}
ux_language_text_source_piste_advanced: |
function() {
var name = (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature['name'];
return name ? ('◆ ' + name) : '◆';
}
ux_language_text_source_piste_expert: |
function() {
var name = (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature['name'];
return name ? ('◆◆ ' + name) : '◆◆';
}
ux_language_text_source_building_and_address: |
function() {
var name = (global.ux_language && feature['name:'+global.ux_language]) || (global.ux_language_fallback && feature['name:'+global.ux_language_fallback]) || feature['name'];
if (name && feature.addr_housenumber) {
return name + '\n' + feature.addr_housenumber;
} else {
return name;
}
}
# To facilitate data visualizations several recommended sort orders are provided
#
# Your classic raster map overlay.
# Over all line and polygon features.
# Under map labels (icons and text), under UI elements
# (like routeline and search result pins).
sdk_order_over_everything_but_text_0: 490
sdk_order_over_everything_but_text_1: 491
sdk_order_over_everything_but_text_2: 492
sdk_order_over_everything_but_text_3: 493
sdk_order_over_everything_but_text_4: 494
sdk_order_over_everything_but_text_5: 495
sdk_order_over_everything_but_text_6: 496
sdk_order_over_everything_but_text_7: 497
sdk_order_over_everything_but_text_8: 498
sdk_order_over_everything_but_text_9: 499
#
# Your classic "underlay"
# Under roads. Above borders, water, landuse, and earth.
sdk_order_under_roads_0: 290
sdk_order_under_roads_1: 291
sdk_order_under_roads_2: 292
sdk_order_under_roads_3: 293
sdk_order_under_roads_4: 294
sdk_order_under_roads_5: 295
sdk_order_under_roads_6: 296
sdk_order_under_roads_7: 297
sdk_order_under_roads_8: 298
sdk_order_under_roads_9: 299
#
# Under water.
# Above earth and most landuse.
sdk_order_under_water_0: 190
sdk_order_under_water_1: 191
sdk_order_under_water_2: 192
sdk_order_under_water_3: 193
sdk_order_under_water_4: 194
sdk_order_under_water_5: 195
sdk_order_under_water_6: 196
sdk_order_under_water_7: 197
sdk_order_under_water_8: 198
sdk_order_under_water_9: 199
#
# Under everything.
# Tip: disable earth layer.
sdk_order_under_everything_0: 0
sdk_order_under_everything_1: 1
sdk_order_under_everything_2: 2
sdk_order_under_everything_3: 3
sdk_order_under_everything_4: 4
sdk_order_under_everything_5: 5
sdk_order_under_everything_6: 6
sdk_order_under_everything_7: 7
sdk_order_under_everything_8: 8
sdk_order_under_everything_9: 9
#
# TRANSIT OVERLAY
# should default to "auto", with SDK overriding it to true or false,
# or app logic sets other booleans that triggers auto behavior later
sdk_transit_overlay: false
#
# SHIELDS
sdk_shield_color: black
sdk_shield_text_color: white
#
# enable interactivity for key features
sdk_interactive: true
#
# default order for basemap features
feature_order: function() { return feature.sort_rank; }
#
#label visibility
icon_size: [[13, '14px'], [16, '18px'], [18, '19px']]
text_visible_continent: false
text_visible_admin: true
text_visible_populated_places: true
icon_visible_populated_places: false
text_visible_neighbourhoods: false
text_visible_neighbourhoods_e: false
text_visible_building: false # false for default
text_visible_address: false # false for default
text_visible_water_labels: false
text_visible_island: false
label_visible_landuse_green: false #this needs work
icon_visible_landuse_green: false #this needs work
text_visible_landuse_green: false
icon_size_green: [[13, '14px'], [16, '18px'], [18, '19px']] # 0px for no, default, more [[13, '14px'], [16, '18px'], [18, '19px']]
icon_size_green_l: [[14, '24px'], [16, '32px']] # 0px for no, default, more [[14, '24px'], [16, '32px']]
label_visible_poi_landuse: false #false on default
icon_visible_poi_landuse: false #false on default
text_visible_poi_landuse: false
icon_visible_poi_landuse_e: false #false on default
text_visible_landuse_generic: true # false for default
label_visible_station: true
icon_visible_station: true #false on default, this needs work
text_visible_station: true
text_visible_highway: true
text_visible_trunk_primary: true
text_visible_secondary: true
text_visible_tertiary: true
text_visible_minor_road: true
text_visible_service_road: true
text_visible_path: true
text_visible_piste: true
text_visible_steps: true
text_visible_aerialway: true
sdk_road_shields: true
text_visible_exits: true
text_visible_airport_gate: false
#roads
highway1: [1.00,1.00,1.00]
highway_link1: [0.00, 0.00, 0.00]
highway_casing1: [0.40, 0.40, 0.40]
highway_tunnel1: [0.7, 0.7, 0.7]
highway_tunnel_casing1: [1.00, 1.00, 1.00]
highway_link_tunnel_casing1: [1.00, 1.00, 1.00]
ferry1: [0.75,0.75,0.75]
rail1: '#999'
rail1_e: '#bbb'
rail2: '#777' # less important rail (service, sidings)
major_road1: [0.0, 0.0, 0.0]
major_road1b: [0.935, 0.935, 0.935]
major_road1c: white #15%
major_road2: [0.935, 0.935, 0.935]
major_road2a: [0.935, 0.935, 0.935]
major_road2b: [0.935, 0.935, 0.935]
major_road3: [0.935, 0.935, 0.935]
major_road4: [0.00, 0.00, 0.00]
major_road5: white
major_casing1: [0.40, 0.40, 0.40] # same as highway_casing1
major_casing2: [0.40, 0.40, 0.40] # zoomed out
major_tunnel1: [0.7, 0.7, 0.7]
major_tunnel_casing1: [1.00, 1.00, 1.00]
major_route1: [0.0, 0.0, 0.0]
major_route2: [0.2, 0.2, 0.2] # zoomed out
minor_route: [0.97, 0.97, 0.97] # same as major_route
minor_road1: [0.935, 0.935, 0.935] # natural earth
minor_road2: [0.935, 0.935, 0.935] # natural earth, same as major_road2
minor_road3: [0.935, 0.935, 0.935]
minor_road4: [0.935, 0.935, 0.935] # zoomed out
minor_road5: [0.935, 0.935, 0.935] # zoomed out, again
minor_casing1: white # same as highway_casing1
minor_casing2: white # zoomed out
minor_tunnel1: [0.7, 0.7, 0.7]
minor_tunnel_casing1: [1.00, 1.00, 1.00]
service_road1: [0.935, 0.935, 0.935]
service_road2: white
service_road_casing1: [0.40, 0.40, 0.40]
service_road_casing2: white
path1: [0.97, 0.97, 0.97]
path2: [0.97, 0.97, 0.97] # zoomed out
path_casing1: [0.40, 0.40, 0.40]
path_bridge_casing1: [0.40, 0.40, 0.40]
path_bridge_casing2: [0.40, 0.40, 0.40] # zoomed out
path_steps1: red
path_steps1_b: '#ccc'
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: '#ccc'
region_boundary: [0.900,0.900,0.900]
subregion_boundary: '#ccc'
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]
# areas:
scene1: white # map background
water1: [0.584, 0.898, 0.976, 1.00] # water wave
water2: [0.584, 0.898, 0.976, 1.00] # water wave
water3: [0.584, 0.898, 0.976, 1.00] # playa texture
water1_o: [0.584, 0.898, 0.976, 1.00] # water stroke (ocean coastline)
water2_o: [0.584, 0.898, 0.976, 1.00] # water stroke 2 (streams, lake outlines)
earth1: white # land color
earth2: '#e9e4e0' # urban
earth2_v: false # urban
green1: [0.50,0.50,0.50] # park
green1_r: '#bbbbbb' # park roads
green1_b: [.65, .65, .65] # park buildings
green1_bo: [.8, .8, .8] # park building outlines
green2: [0.90,0.90,0.90] # cemetery
green3: '#9a9a9a' # golf course
green4: [0.90,0.90,0.90] # farm faint
green4_v: false # farm faint
green5: [0.75,0.75,0.75] # farm
green6: [0.40,0.40,0.40] # nature reserve
green7: [0.85,0.85,0.85] # forest
green8: [0.80,0.80,0.80] # conservation
green9: [0.85,0.85,0.85] # forest (landcover)
green9_e: [0.90,0.90,0.90] # forest (landcover) early
green9_v: true # forest (landcover) visibility
green10: [0.85,0.85,0.85] # sports_centre
green11: [0.85,0.85,0.85] # minor zoo related AOIs
green11_o: [0.85,0.85,0.85] # minor zoo related AOIs outline
orange1: '#aaaaaa' # stadium
orange2: [0.40,0.40,0.40] # pitch (play field)
brown1: '#7b7b7b' # university
brown1_r: '#bbbbbb' # university roads
brown1_b: [.65, .65, .65] # university buildings
brown1_bo: [.8, .8, .8] # university building outlines
brown2: '#aaaaaa' # school
brown3: [0.40,0.40,0.40] # playground
red1: '#a2a2a2' # hospital
red1_r: '#bbbbbb' # hospital roads
red1_b: [.65, .65, .65] # hospital buildings
red1_bo: [.8, .8, .8] # hospital building outlines
grey1: '#cccccc' # pedestrian, retail, airport apron, parking, church
grey1_e: '#dad6d4' # 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: '#bbbbbb' # railway
grey4: '#ffc52a' # airport taxiway
grey5: '#ffc52a' # airport taxiway
grey6: '#dddddd' # 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
mystry1: '#aaaaaa' # recreation ground (type of park, sometimes around reservoirs)
building1: white # building
building2: white # building stroke
building_o: 25 # building stroke order
building_e: true # building stroke order
sdk_building_extrude: true # building extrusion toggle
building_extrude_height: | # building extrude height logic
function() { return feature.height || 20; }
# labels:
text_fill: global.black_color # WHITE
text_fill2: '#000' # WHITE
text_fill_road_e: '#555' # WHITE
text_fill_exits: [0.40,0.40,0.40] # motorway junctions, highway_casing1
text_fill_building: '#000' # tan
text_fill_address: [0.60,0.60,0.60] # HUH
text_fill_water: '#000' # blue
text_fill_park: [0.175,0.175,0.175] # green
text_fill_beach: [0.35,0.35,0.35] # black
text_fill_piste: [0.675,0.675,0.675] # dark gray
text_fill_piste_e: [0.675,0.675,0.675] # dark gray early
text_stroke: global.white_color # land color
text_stroke_park: '#fff' # land color
text_stroke_water: '#fff'
text_stroke_address: [1.0,1.0,1.0] # address stroke color
townspot_sprite: townspot-m-rev # depends on land color and text settings
text_font_family: 'Open Sans' # branding in asperational Unicode, yo (or Helvetica)
textures:
pois:
url: images/[email protected]
filtering: mipmap
sprites:
# define sprites: [x origin, y origin, width, height]
'US:CA-1char': [488, 642, 82, 92]
'US:CA-2char': [388, 642, 94, 94]
'US:CA-3char': [268, 642, 112, 92]
'US:CA-4char': [136, 642, 124, 92]
'US:CA-5char': [0, 642, 128, 92]
'US:I-1char': [908, 745, 88, 100]
'US:I-2char': [798, 745, 102, 100]
'US:I-3char': [658, 745, 134, 100]
'US:I-4char': [512, 745, 140, 100]
'US:I-5char': [352, 745, 152, 100]
'US:NY-1char': [756, 386, 72, 88]
'US:NY-2char': [660, 386, 88, 88]
'US:NY-3char': [548, 386, 104, 86]
'US:NY-4char': [424, 388, 116, 84]
'US:NY-5char': [296, 386, 120, 86]
'US:PA-1char': [216, 386, 72, 88]
'US:PA-2char': [120, 386, 88, 88]
'US:PA-3char': [0, 386, 112, 88]
'US:PA-4char': [892, 254, 120, 88]
'US:PA-5char': [756, 254, 128, 88]
'US:US-1char': [256, 746, 88, 94]
'US:US-2char': [144, 746, 106, 94]
'US:US-3char': [0, 746, 138, 100]
'US:US-4char': [748, 642, 156, 100]
'US:US-5char': [576, 642, 164, 100]
airport: [870, 0, 38, 38]
aerodrome: [870, 0, 38, 38]
aquarium: [732, 168, 38, 38]
arrow: [368, 210, 38, 38]
atm: [918, 126, 38, 38]
bakery: [548, 168, 38, 38]
bank: [964, 126, 38, 38]
category-predicate-money: [964, 126, 38, 38]
bar: [230, 168, 38, 38]
pub: [230, 168, 38, 38]
category-predicate-drink: [230, 168, 38, 38]
baseball: [460, 84, 38, 38]
basketball: [414, 84, 38, 38]
beach: [598, 84, 38, 38]
bench: [548, 0, 38, 38]
bicycle: [872, 126, 38, 38]
bicycle_rental: [872, 126, 38, 38]
bicycle_rental_station: [872, 126, 38, 38]
bicycle_parking: [644, 126, 38, 38]
biergarten: [276, 210, 38, 38]
brewery: [276, 210, 38, 38]
books: [826, 126, 38, 38]
bridge: [874, 84, 38, 38]
buddhist: [736, 84, 38, 38]
building: [414, 168, 38, 38]
hangar: [414, 168, 38, 38]
nursing_home: [414, 168, 38, 38]
manor: [414, 168, 38, 38]
apartments: [414, 168, 38, 38]
care_home: [414, 168, 38, 38]
bus_station: [778, 0, 38, 38]
bus_stop: [778, 0, 38, 38]
butcher: [920, 42, 38, 38]
cafe: [502, 168, 38, 38]
camp_site: [782, 84, 38, 38]
summer_camp: [782, 84, 38, 38]
capital-l: [590, 210, 32, 32]
capital-m: [558, 210, 24, 24]
capital-s: [528, 210, 20, 20]
capital-xl: [678, 210, 42, 36]
capital-xs: [506, 210, 16, 16]
car: [780, 126, 38, 38]
category-namespace-mobility: [780, 126, 38, 38]
category-predicate-mobility: [780, 126, 38, 38]
car_repair: [0, 168, 38, 38]
car_sharing: [594, 0, 38, 38]
castle: [414, 42, 38, 38]
fort: [414, 42, 38, 38]
cemetery: [690, 84, 38, 38]
grave_yard: [690, 84, 38, 38]
christian: [184, 126, 38, 38]
cinema: [778, 168, 38, 38]
clothes: [824, 168, 38, 38]
fashion: [824, 168, 38, 38]
college: [870, 168, 38, 38]
university: [870, 168, 38, 38]
confectionery: [0, 210, 38, 38]
convenience: [46, 84, 38, 38]
county_shield-1char: [404, 478, 72, 72]
county_shield-2char: [300, 478, 96, 72]
county_shield-3char: [160, 478, 132, 72]
county_shield-4char: [0, 478, 152, 72]
county_shield-5char: [836, 386, 180, 72]
courthouse: [364, 0, 38, 38]
department_store: [734, 126, 38, 38]
drinking_water: [230, 210, 38, 38]
dry_cleaning: [0, 84, 38, 38]
electronics: [598, 126, 38, 38]
computer: [598, 126, 38, 38]
estate_agent: [138, 42, 38, 38]
factory: [368, 168, 38, 38]
industrial: [368, 168, 38, 38]
chimney: [368, 168, 38, 38]
substation: [368, 168, 38, 38]
wastewater_plant: [368, 168, 38, 38]
works: [368, 168, 38, 38]
water_works: [368, 168, 38, 38]
plant: [368, 168, 38, 38]
generator: [368, 168, 38, 38]
category-predicate-industry: [368, 168, 38, 38]
fast_food: [138, 210, 38, 38]
ferry: [824, 0, 38, 38]
ferry_terminal: [824, 0, 38, 38]
fire_station: [318, 0, 38, 38]
fitness: [874, 42, 38, 38]
fitness_station: [874, 42, 38, 38]
florist: [138, 126, 38, 38]
forest: [46, 210, 38, 38]
natural_forest: [46, 210, 38, 38]
nature_reserve: [46, 210, 38, 38]
fountain: [276, 126, 38, 38]
fuel: [960, 168, 38, 38]
gallery: [640, 168, 38, 38]
garden: [644, 84, 38, 38]
generic: [414, 210, 38, 38]
category-namespace-other: [414, 210, 38, 38]
category-predicate-addressing: [414, 210, 38, 38]
generic_shield-1char: [104, 554, 72, 72]
generic_shield-2char: [0, 554, 98, 72]
generic_shield-3char: [832, 478, 132, 72]
generic_shield-4char: [672, 478, 152, 72]
generic_shield-5char: [484, 478, 180, 72]
gift: [92, 126, 38, 38]
golf_course: [368, 84, 38, 38]
government: [138, 168, 38, 38]
townhall: [138, 168, 38, 38]
public: [138, 168, 38, 38]
embassy: [138, 168, 38, 38]
category-predicate-civic: [138, 168, 38, 38]
hairdresser: [46, 42, 38, 38]
hardware: [828, 42, 38, 38]
doityourself: [828, 42, 38, 38]
painter: [828, 42, 38, 38]
historical: [46, 126, 38, 38]
hospital: [184, 0, 38, 38]
category-namespace-health: [184, 0, 38, 38]
category-predicate-health: [184, 0, 38, 38]
hotel: [732, 0, 38, 38]
motel: [732, 0, 38, 38]
hostel: [732, 0, 38, 38]
category-predicate-sleep: [732, 0, 38, 38]
ice_cream: [322, 210, 38, 38]
information: [460, 210, 38, 38]
jewelry: [736, 42, 38, 38]
jewish: [46, 0, 38, 38]
landmark: [272, 0, 38, 38]
memorial: [272, 0, 38, 38]
monument: [272, 0, 38, 38]
tower: [272, 0, 38, 38]
beacon: [272, 0, 38, 38]
laundry: [690, 42, 38, 38]
library: [0, 0, 38, 38]
light_rail: [686, 0, 38, 38]
tram_stop: [686, 0, 38, 38]
lighthouse: [230, 84, 38, 38]
liquor: [506, 126, 38, 38]
alcohol: [506, 126, 38, 38]
mall: [644, 42, 38, 38]
marina: [92, 168, 38, 38]
dock: [92, 168, 38, 38]
mineshaft: [782, 42, 38, 38]
quarry: [782, 42, 38, 38]
adit: [782, 42, 38, 38]
mobile_phone: [506, 42, 38, 38]
museum: [0, 126, 38, 38]
observatory: [0, 126, 38, 38]
music: [368, 42, 38, 38]
muslim: [92, 0, 38, 38]
newspaper: [322, 42, 38, 38]
kiosk: [322, 42, 38, 38]
office: [552, 84, 38, 38]
insurance: [552, 84, 38, 38]
company: [552, 84, 38, 38]
category-predicate-service: [552, 84, 38, 38]
optician: [276, 42, 38, 38]
park: [230, 126, 38, 38]
category-predicate-nature: [230, 126, 38, 38]
parking: [690, 126, 38, 38]
peak: [184, 84, 38, 38]
pet: [230, 42, 38, 38]
pharmacy: [966, 42, 38, 38]
photographic_laboratory: [184, 42, 38, 38]
photographer: [184, 42, 38, 38]
pier: [640, 0, 38, 38]
place_of_worship: [276, 168, 38, 38]
chapel: [276, 168, 38, 38]
wayside_shrine: [276, 168, 38, 38]
category-predicate-religion: [276, 168, 38, 38]
playground: [460, 42, 38, 38]
police: [226, 0, 38, 38]
post_office: [322, 168, 38, 38]
recycling: [92, 42, 38, 38]
restaurant: [92, 210, 38, 38]
category-namespace-eat_and_drink: [92, 210, 38, 38]
category-predicate-eat: [92, 210, 38, 38]
retail: [598, 42, 38, 38]
store: [598, 42, 38, 38]
category-namespace-shop_and_service: [598, 42, 38, 38]
category-predicate-shop: [598, 42, 38, 38]
ruin: [502, 0, 38, 38]
ruins: [502, 0, 38, 38]
archaeological_site: [502, 0, 38, 38]
school: [506, 84, 38, 38]
kindergarten: [506, 84, 38, 38]
category-namespace-education_and_religion: [506, 84, 38, 38]
category-predicate-education: [506, 84, 38, 38]
sdk_shield-1char: [832, 554, 84, 84]
sdk_shield-2char: [712, 554, 112, 84]
sdk_shield-3char: [560, 554, 144, 84]
sdk_shield-4char: [384, 554, 168, 84]
sdk_shield-5char: [184, 554, 192, 84]
shoemaker: [552, 42, 38, 38]
ski: [322, 126, 38, 38]
ski_rental: [322, 126, 38, 38]
ski_school: [322, 126, 38, 38]
winter_sports: [322, 126, 38, 38]
slipway: [138, 84, 38, 38]
soccer: [322, 84, 38, 38]
sports: [0, 42, 38, 38]
sports_centre: [184, 168, 38, 38]
pitch: [184, 168, 38, 38]
recreation_ground: [184, 168, 38, 38]
spring: [276, 84, 38, 38]
hot_spring: [276, 84, 38, 38]
stadium: [414, 126, 38, 38]
subway_entrance: [456, 0, 38, 38]
supermarket: [552, 126, 38, 38]
greengrocer: [552, 126, 38, 38]
swimming_pool: [460, 126, 38, 38]
swimming_area: [460, 126, 38, 38]
tailor: [962, 0, 38, 38]
tennis: [368, 126, 38, 38]
theatre: [594, 168, 38, 38]
category-predicate-fun: [594, 168, 38, 38]
theme_park: [966, 84, 38, 38]
amusement_ride: [966, 84, 38, 38]
toilets: [828, 84, 38, 38]
townspot-l: [978, 210, 32, 32]
townspot-l-rev: [806, 210, 32, 32]
townspot-m: [946, 210, 24, 24]
townspot-m-rev: [774, 210, 24, 24]
townspot-s: [918, 210, 20, 20]
townspot-s-rev: [746, 210, 20, 20]
townspot-xl: [0, 254, 40, 40]
townspot-xl-rev: [846, 210, 38, 38]
townspot-xs: [894, 210, 16, 16]
townspot-xs-rev: [726, 210, 12, 12]
toys: [916, 0, 38, 38]
traffic_signals: [916, 168, 38, 38]
train_station: [410, 0, 38, 38]
station: [410, 0, 38, 38]
train: [410, 0, 38, 38]
category-predicate-transport: [410, 0, 38, 38]
ux-current-location: [342, 254, 88, 88]
ux-locate-off: [676, 254, 72, 72]
ux-locate-on: [596, 254, 72, 72]
ux-route-arrow: [48, 254, 128, 128]
ux-route-start: [262, 254, 72, 92]
ux-route-stop: [184, 254, 72, 92]
ux-search-active: [436, 254, 72, 108]
ux-search-inactive: [516, 254, 72, 108]
ux-transit-stop: [630, 212, 42, 36]
veterinary: [138, 0, 38, 38]
viewpoint: [686, 168, 38, 38]
category-namespace-do_and_see: [686, 168, 38, 38]
category-predicate-attraction: [686, 168, 38, 38]
vineyard: [46, 168, 38, 38]
volcano: [92, 84, 38, 38]
wine: [184, 210, 38, 38]
winery: [456, 168, 38, 38]
zoo: [920, 84, 38, 38]
building-grid:
url: images/building-grid.gif
filtering: mipmap
sources:
fpdcc_parking_lots:
type: GeoJSON
url: https://raw.githubusercontent.com/fpdcc/webmap_data_updates/master/basemap/FPCC-basemap-parking-icons.geojson
fpdcc:
type: GeoJSON
url: https://raw.githubusercontent.com/fpdcc/webmap_data_updates/master/map%20data/geojson/FPCC_boundary.geojson
mapzen:
type: MVT
url: https://tile.nextzen.org/tilezen/vector/v1/all/{z}/{x}/{y}.mvt
url_params:
api_key: mbsddWddR263J5Ev_c3ecg
#url: https://tile.dev.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.topojson
# url: //localhost:8080/vector/all/{z}/{x}/{y}.topojson
#max_zoom: 16
cameras:
isometric:
type: isometric
styles:
##### LIBRARY OF FUNCTIONS
# SPACE functions
space-tile:
shaders:
blocks:
global: |
// Variant to be add to both vertex and fragments shaders
varying vec3 v_pos;
//
// Get the coordinates in tile space
// ================================
vec2 getTileCoords() {
return fract(v_pos.xy);
}
position: |
// Normalize the attribute position of a vertex
v_pos = modelPosition().xyz;
space-constant:
shaders:
blocks:
global: |
// Get the constant coordinates (glitches on zooms)
// ================================
vec2 getConstantCoords () {
#ifdef TANGRAM_FRAGMENT_SHADER
const float pixel_scale = 695.;
float meter_pixels = u_meters_per_pixel / u_device_pixel_ratio;
vec2 st = gl_FragCoord.xy/pixel_scale;
const float dot_wrap = 1000.;
st += mod(u_map_position.xy / meter_pixels, dot_wrap)/pixel_scale;
return st;
#else
return vec2(0.0,0.0);
#endif
}
# TILING functions
tiling-tile:
shaders:
blocks:
global: |
// Repeats a coordinate space (st) in diferent tiles
// ================================
vec2 tile(vec2 st, float zoom){
st *= zoom;
return fract(st);
}
tiling-brick:
shaders:
blocks:
global: |
// Repeats a coordinate space (st) in diferent brick-like tiles
// ================================
vec2 brick(vec2 st, float zoom){
st *= zoom;
// Here is where the offset is happening
st.x += step(1., mod(st.y, 2.0)) * 0.5;
return fract(st);
}
tiling-mirror:
shaders:
blocks:
global: |
// Mirror the coordinate space
// ================================
vec2 mirror(vec2 _st, vec2 _zoom){
_st *= _zoom;
if (fract(_st.y * 0.5) > 0.5){
_st.x = _st.x + 0.5;
_st.y = 1.0 - _st.y;
}
return fract(_st);
}
# Usefull functions
functions-aastep:
shaders:
extensions: OES_standard_derivatives
blocks:
global: |
// AntiAliased Step function
//=============================
float aastep(float threshold, float value) {
#ifdef TANGRAM_FRAGMENT_SHADER
#ifdef TANGRAM_EXTENSION_OES_standard_derivatives
float afwidth = length(vec2(dFdx(value), dFdy(value))) * 0.70710678118654757;
return smoothstep(threshold-afwidth, threshold+afwidth, value);
#else
return step(threshold, value);
#endif
#else
return step(threshold, value);
#endif
}
# Generative functions
generative-random:
shaders:
blocks:
global: |
// 1D Random for 1 and 2 dimentions
// ================================
float random(float x) { return fract(sin(x)*43758.5453);}
float random(vec2 p) { return fract(1e4 * sin(17.0 * p.x + p.y * 0.1) * (0.1 + abs(sin(p.y * 13.0 + p.x)))); }
float random(vec3 p) { return fract(sin(dot(p.xyz, vec3(70.9898,78.233,32.4355)))* 43758.5453123); }
//
// 2D Random for 2 dimentions
// ================================
vec2 random2 (vec2 xy) { return fract(sin(vec2(dot(xy,vec2(127.1,311.7)),dot(xy,vec2(269.5,183.3))))*43758.5453); }
//
// 3D Random for 2 dimentions
// ================================
vec3 random3 (vec2 xy) { return fract(sin(vec3( dot(xy,vec2(127.1,311.7)), dot(xy,vec2(269.5,183.3)), dot(xy,vec2(419.2,371.9)) ))*43758.5453); }
vec3 random3 (vec3 c) {
float j = 4096.0*sin(dot(c,vec3(17.0, 59.4, 15.0)));
vec3 r;
r.z = fract(512.0*j);
j *= .125;
r.x = fract(512.0*j);
j *= .125;
r.y = fract(512.0*j);
return r-0.5;
}
# Drawing Shapes functions
shapes-circle:
mix: functions-aastep
shaders:
defines:
PI: 3.14159265358979323846
blocks:
global: |
// get distance field of a Circle
// ================================
float circleDF (vec2 st) {
return dot(st,st);
}
//
// Draw a circle in the middle of the ST space
// ================================
float circle (vec2 st, float radius) {
return 1.-aastep(radius, circleDF(st-vec2(0.5))*PI);
}
shapes-rect:
shaders:
blocks:
global: |
// get distance field of a rectangle in the center
// ================================
float rectDF(vec2 st, vec2 size) {
//float aspect = u_resolution.x/u_resolution.y;
st = st*2.-1.;
//st.x *= aspect;
return length(max(abs(st)-size,.0));
}
float rectDF(vec2 st, float size) {
//float aspect = u_resolution.x/u_resolution.y;
st = st*2.-1.;
//st.x *= aspect;
return length(max(abs(st)-size,.0));
}
// Draw a round corners rectangle in the center
// ================================
float rect(vec2 st, vec2 size, float radio) {
radio = max(.000001, radio);
return 1.0-step(radio, rectDF(st, size-radio));
}
float rect(vec2 st, float size, float radio) {
return rect(st,vec2(size),radio);
}
// Draw a rectangle in the center
// ================================
float rect(vec2 st, vec2 size){
size = .25-size*.125;
vec2 uv = step(size,st*(1.0-st));
return (uv.x*uv.y);
}
float rect(vec2 st, float size){
return rect(st,vec2(size));
}
# Patterns compositions functions
patterns-stripes:
mix: functions-aastep
shaders:
defines:
PI: 3.14159265358979323846
blocks:
global: |
// Return a distance function of stripes
float stripesDF (vec2 st) {
return abs(sin(st.y*PI));
}
// Adjustable width stripes
float stripes (vec2 st, float width) {
return aastep(width,stripesDF(st));
}
// Faster optimisation of diagonal stripes
float diagonalStripes (vec2 st) {
vec2 i_st = floor(st);
vec2 f_st = fract(st);
if (mod(i_st.y,2.) - mod(i_st.x,2.) == 0.) {
return 1.0 - aastep(f_st.x,f_st.y);
} else {
return aastep(f_st.x,f_st.y);
}
}
dots-honeycomb:
mix: [space-tile, tiling-brick, shapes-circle]
shaders:
blocks:
global: |
// Interpolated dot patern between zooms attached to tile coords
float TileDots(float scale, float size) {
// Beginning of the transition
vec2 IN = brick(getTileCoords()*scale,2.);
float A = circleDF(vec2(0.5)-IN)*1.8;
//
// If over 18. add an end B to transition with
float d = 0.0;
if (u_map_position.z < 18.) {
vec2 OUT = fract(getTileCoords()*scale*2.);
float B = circleDF(vec2(0.25)-OUT)*5.;
B = min(B, circleDF(vec2(0.75,0.25)-OUT)*5.);
B = min(B, circleDF(vec2(0.5,0.75)-OUT)*5.);
B = min(B, circleDF(vec2(0.,0.75)-OUT)*5.);
B = min(B, circleDF(vec2(1.,0.75)-OUT)*5.);
d = mix(A, B, pow(fract(u_map_position.z),10.));
} else {
d = A;
}
//
// Use the antialias step to make a shape from the DF
return aastep(size,d);;
}
##### ACTUAL STYLES
dashed:
base: lines
dash: [1.25, 1.25]
dashed_big:
base: lines
dash: [2.0, 1.0]
dashed_steps:
base: lines
dash: [0.75, 0.25]
dash_background_color: global.white_color
railway_dash:
base: lines
dash: [0.25, 1.0]
dash_background_color: global.offwhite_color
pixel-pattern-light:
mix: [space-tile, generative-random]
base: polygons
shaders:
uniforms:
u_tint: global.lightest_color
blocks:
filter: |
vec3 pos = vec3(getTileCoords()*130.0,1.0);
color.rgb = u_tint * vec3(random(abs(floor(pos)))+0.905);
pixel-pattern-bright:
mix: [space-tile, generative-random]
base: polygons
shaders:
uniforms:
u_tint: global.lightest_color
blocks:
filter: |
vec3 pos = vec3(getTileCoords()*180.0,1.0);
color.rgb = vec3(random(abs(floor(pos)))+0.950);
color.rgb *= u_tint;
dots:
mix: [space-tile, tiling-tile, shapes-circle]
base: polygons
shaders:
defines:
PATTERN_SCALE: 50.0
DOT_SIZE: .1
COLOR1: vec3(1.00,1.00,1.00)
COLOR2: color.rgb
blocks:
color: |
color.rgb = mix(COLOR1, COLOR2, circle(tile(getTileCoords(),PATTERN_SCALE), DOT_SIZE));
dots-rev-grid:
mix: [space-tile, tiling-tile, shapes-circle]
base: polygons
shaders:
defines:
PATTERN_SCALE: 60.0
DOT_SIZE: .4
COLOR1: vec3(1.00,1.00,1.00)
COLOR2: color.rgb
blocks:
color: |
color.rgb = mix(COLOR2, COLOR1, circle(tile(getTileCoords(),PATTERN_SCALE), DOT_SIZE));
medium-dots:
mix: dots
base: polygons
shaders:
defines:
PATTERN_SCALE: 60.0
DOT_SIZE: .25
COLOR1: vec3(1.00,1.00,1.00)
COLOR2: color.rgb
tiny-dots:
mix: dots
shaders:
defines:
PATTERN_SCALE: 70.0
DOT_SIZE: .125
COLOR1: vec3(1.00,1.00,1.00)
COLOR2: color.rgb
dots-rev:
base: polygons
mix: dots-honeycomb
shaders:
defines:
COLOR1: vec3(1.00,1.00,1.00)
PATTERN_SCALE: 35.0
blocks:
color: |
color.rgb = mix(COLOR1, color.rgb, TileDots(PATTERN_SCALE, 0.31));
horizontal-bars:
base: polygons
mix: [space-constant, shapes-rect]
texcoords: false
shaders:
defines:
COLOR1: vec3(1.0,1.0,1.0)
blocks:
global: |
float bar(in vec2 st, float size){
return rect(st, vec2(size*0.90,size*0.2));
}
filter: |
vec2 pos = getConstantCoords()*50.0;
float pct = clamp(bar(fract(pos),0.5),0.0,1.0);
color.rgb = mix(COLOR1,color.rgb,pct);
horizontal-bars-rev:
base: polygons
mix: [space-constant, shapes-rect]
texcoords: false
shaders:
defines:
COLOR1: vec3(1.0,1.0,1.0)
PATTERN_SCALE: 50.0
blocks:
global: |
float bar(in vec2 st, float size){
return rect(st, vec2(size*1.05,size*0.5));
}
filter: |
vec2 pos = getConstantCoords()*PATTERN_SCALE;
float pct = clamp(bar(fract(pos),0.5),0.0,1.0);
color.rgb = mix(color.rgb,COLOR1,pct);
scale-buildings:
shaders:
blocks:
position: |
// scale buildings based on zoom
float zoom = u_map_position.z;
float min = .1; // minimum building scale
float midpoint = 16.; // middle of zoom range
float inspeed = .1; // number of zooms to scale buildings up
float outspeed = 2.; // number of zooms to scale buildings back down
float e = 0.;
if (zoom >= midpoint) {
e = (zoom - midpoint) / (outspeed * .2);
} else {
e = abs(zoom - midpoint) / inspeed;
}
position.z *= ((1. - min) / (1. + (exp(e)))) + min;
building-grid:
base: polygons
lighting: false
mix: [scale-buildings]
texcoords: true
shaders:
uniforms:
u_tex_grid: building-grid
u_grid_color: global.black_color
defines:
WALL_TINT: vec3(1., 3., .993)
blocks:
color: |
// If it's a wall
color.rgb = mix(mix(color.rgb, u_grid_color.rgb, texture2D(u_tex_grid, v_texcoord).a),
color.rgb,
step(.5,dot(vec3(0., 0., 1.), worldNormal())));
building-lines:
base: lines
mix: scale-buildings
texcoords: true
lines_transparent:
base: lines
blend: overlay
outline_transparent:
base: lines
blend: overlay
polygons_transparent:
base: polygons
blend: overlay
icons:
base: points
texture: pois
blend_order: 1
colorized-icons:
mix: icons
shaders:
uniforms:
u_tint: global.black_color
u_fill: global.white_color
blocks:
filter: |
color.rgb = mix(u_tint.rgb, u_fill.rgb, color.rgb);
text-blend-order:
base: text
blend_order: 1
ux-lines-overlay:
base: lines
blend: overlay
blend_order: 0
ux-transit-line-overlay:
base: lines
blend: overlay
blend_order: 0
ux-location-gem-overlay:
base: points
texture: pois
blend: overlay
blend_order: 2
ux-icons-overlay:
base: points
texture: pois
blend: overlay
blend_order: 3
sdk-point-overlay:
base: points
texture: pois
blend: overlay
blend_order: 3
sdk-shield-overlay:
base: points
texture: pois
blend: overlay
blend_order: 3
sdk-line-overlay:
base: lines
blend: overlay
blend_order: 0
sdk-polygon-overlay:
base: polygons
blend: overlay
blend_order: 0
scene:
background:
color: global.white_color
fonts:
Open Sans:
- weight: 300 # Light
url: fonts/OpenSans-Light.woff
- weight: normal # Regular
url: fonts/OpenSans-Regular.woff
- weight: normal # Regular
style: italic
url: fonts/OpenSans-Italic.woff
- weight: 600 # Semi Bold
url: fonts/OpenSans-Semibold.woff
- weight: 600 # Semi Bold
style: italic
url: fonts/OpenSans-SemiboldItalic.woff
- weight: bold
url: fonts/OpenSans-Bold.woff
Montserrat:
- weight: normal
#url: https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff
url: fonts/Montserrat-Regular.woff
scene:
background:
color: global.white_color
layers:
# Map overlays for styling the server response (using special source layer names) for route line, current location, and search result pins
fpdcc_parking_points:
data: {source: fpdcc_parking_lots}
draw:
points:
order: 1
#url: https://gist.github.com/glw/2c4e310cdf26f4b1714d7ba319c71eb8/raw/f0db4affb364ed9f0ed2df5809ea6ff2c81e515f/fpdcc_parking.png
# define sprites: [x origin, y origin, width, height]
color: [0.039, 0.004, 0.435, 0.50]
fpdcc_boundaries:
data: {source: fpdcc}
draw:
polygons:
order: 180
color: [0.678, 0.820, 0.694, 1.00]
mz_route_line:
data: { source: mz_route_line }
draw:
ux-lines-overlay:
interactive: global.sdk_interactive
color: global.route_line
order: 500
width: [[0,3.5px],[5,5px],[9,7px],[10,6px],[11,6px],[13,8px],[14,9px],[15,10px],[16,11px],[17,12px],[18,10px]]
mz_route_line_transit:
data: { source: mz_route_line_transit }
draw:
ux-transit-line-overlay:
# each transit route segment could be a different "line" each with it's own color
# but some transit lines don't define a color, in those cases default to blue
# and since the color is coming from Transit.land they call it "color" instead of "colour"
interactive: global.sdk_interactive
color: function() { return feature.color || '#06a6d4'; }
order: 500
width: [[0,3.5px],[5,5px],[9,7px],[10,6px],[11,6px],[13,8px],[14,9px],[15,10px],[16,11px],[17,12px],[18,10px]]
mz_current_location_gem:
data: { source: mz_current_location }
draw:
ux-location-gem-overlay:
interactive: global.sdk_interactive
sprite: ux-current-location
size: 36px
collide: false
transition: { show: { time: 0s }, hide: { time: 0s } }
mz_route_location:
data: { source: mz_route_location }
draw:
ux-location-gem-overlay:
interactive: global.sdk_interactive
sprite: ux-route-arrow
size: [60px,60px]
collide: false
transition: { show: { time: 0s }, hide: { time: 0s } }
mz_route_start:
data: { source: mz_route_start }
draw:
ux-icons-overlay:
interactive: global.sdk_interactive
priority: 1
sprite: ux-route-start
size: [36px,46px]
collide: false
anchor: top
transition: { show: { time: 0s }, hide: { time: 0s } }
mz_route_destination:
data: { source: mz_route_destination }
draw:
ux-icons-overlay:
interactive: global.sdk_interactive
priority: 1
sprite: ux-route-stop
size: [36px,46px]
collide: false
anchor: top
transition: { show: { time: 0s }, hide: { time: 0s } }
mz_route_transit_stop:
data: { source: mz_route_transit_stop }
draw:
ux-icons-overlay:
interactive: global.sdk_interactive
sprite: ux-transit-stop
size: [15px,15px]
collide: false
transition: { show: { time: 0s }, hide: { time: 0s } }
mz_search_result:
data: { source: mz_search_result }
draw:
ux-icons-overlay:
interactive: global.sdk_interactive
sprite: ux-search-active
size: [36px,54px]
collide: false
anchor: top
transition: { show: { time: 0s }, hide: { time: 0s } }
inactive:
filter: { state: inactive }
draw:
ux-icons-overlay:
sprite: ux-search-inactive
mz_dropped_pin:
data: { source: mz_dropped_pin }
draw:
ux-icons-overlay:
interactive: global.sdk_interactive
sprite: ux-search-active
size: [36px,54px]
collide: false
anchor: top
transition: { show: { time: 0s }, hide: { time: 0s } }
# Used by the SDK to place point, line, and polygon overlays on the map
mz_default_point:
data: { source: mz_default_point }
draw:
sdk-point-overlay:
interactive: global.sdk_interactive
sprite: ux-search-active
size: [36px,54px]
collide: false
anchor: top
transition: { show: { time: 0s }, hide: { time: 0s } }
mz_default_shield:
data: { source: mz_default_shield }
draw:
sdk-shield-overlay:
interactive: global.sdk_interactive
sprite: |
function() {
if( feature.ref ) {
return ('sdk_shield-' + feature.ref.length + 'char');
} else {
return ('sdk_shield-' + feature.name.length + 'char');
}
}
sprite_default: sdk_shield-1char
color: global.sdk_shield_color
collide: false
transition: { show: { time: 0s }, hide: { time: 0s } }
text:
# offset: [0px, -1px]
text_source: |
function() {
if( feature.ref ) {
return feature.ref;
} else {
return feature.name;
}
}
anchor: center
font:
family: Montserrat
fill: global.sdk_shield_text_color
style: bold
size: [[7,7px],[12,8px],[16,11px]]
width_1char:
filter: |
function() {
if( feature.ref ) {
return (feature.ref.length === 1);
} else {
return (feature.name.length === 1);
}
}
draw:
sdk-shield-overlay:
size: [[6,[16px,16px]],[13,[18px,18px]],[16,[21px,21px]]]
width_2char:
filter: |
function() {
if( feature.ref ) {
return (feature.ref.length === 2);
} else {
return (feature.name.length === 2);
}
}
draw:
sdk-shield-overlay:
size: [[6,[21px,16px]],[13,[24px,18px]],[16,[28px,21px]]]
width_3char:
filter: |
function() {
if( feature.ref ) {
return (feature.ref.length === 3);
} else {
return (feature.name.length === 3);
}
}
draw:
sdk-shield-overlay:
size: [[6,[27px,16px]],[13,[31px,18px]],[16,[36px,21px]]]
width_4char:
filter: |
function() {
if( feature.ref ) {
return (feature.ref.length === 4);
} else {
return (feature.name.length === 4);
}
}
draw:
sdk-shield-overlay:
size: [[6,[32px,16px]],[13,[36px,18px]],[16,[41px,21px]]]
width_5char:
filter: |
function() {
if( feature.ref ) {
return (feature.ref.length === 5);
} else {
return (feature.name.length === 5);
}
}
draw:
sdk-shield-overlay:
size: [[6,[37px,16px]],[13,[41px,18px]],[16,[48px,21px]]]
# this is kinda a hack
width_longggggg:
filter: |
function() {
if( feature.ref ) {
return (feature.ref.length > 5);
} else {
return (feature.name.length > 5);
}
}
draw:
sdk-shield-overlay:
visible: false
mz_default_line:
data: { source: mz_default_line }
draw:
sdk-line-overlay:
interactive: global.sdk_interactive
color: '#06a6d4'
order: 503
width: 3px
mz_default_polygon:
data: { source: mz_default_polygon }
draw:
sdk-polygon-overlay:
interactive: global.sdk_interactive
color: [0.02,0.65,0.82,0.5] #'#06b1e2'
order: 501
sdk-line-overlay:
color: '#06a6d4'
order: 502
width: 0px
# Basemap styling
earth:
data: { source: mapzen, layer: earth }
continent:
filter: { name: true, kind: [continent], $zoom: {max: 5} }
draw:
text-blend-order:
visible: global.text_visible_continent
text_source: ux_language_text_source
font:
size: 14px
style: italic
fill: global.black_color
weight: 600
transform: uppercase
continent-spacer:
filter: { kind: continent }
continent-spacer-z1-z5:
filter: { $zoom: { min: 1, max: 5 } }
draw:
text-blend-order:
text_source: ux_language_text_source_continent
text_wrap: false
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.black_color
weight: normal
stroke: { color: global.white_color, width: 4 }
new_water:
data: { source: mapzen, layer: water }
draw:
polygons:
order: global.feature_order
color: [0.584, 0.898, 0.976, 1.00] # colors the wave lines
new_later:
filter: { $zoom: { min: 12 } }
draw:
polygons:
color: [0.059, 0.404, 0.710, 1.00] # colors the wave lines
order: global.feature_order
new_lakes:
filter:
all:
- kind: [ocean, lake, water, riverbank, reservoir, swimming_pool]
any:
# limit show smaller landuse areas to higher zooms
- { $zoom: { min: 1 }, area: { min: 40000000000 } }
- { $zoom: { min: 2 }, area: { min: 20000000000 } }
# some weird natural earth scale set transition
- { $zoom: { min: 3 }, area: { min: 80000000000 } }
- { $zoom: { min: 4 }, area: { min: 5000000000 } }
- { $zoom: { min: 5 }, area: { min: 700000000 } }
- { $zoom: { min: 6 }, area: { min: 500000000 } }
- { $zoom: { min: 7 }, area: { min: 160000000 } }
- { $zoom: { min: 8 }, area: { min: 40000000 } }
- { $zoom: { min: 9 }, area: { min: 10000000 } }
- { $zoom: { min: 10 }, area: { min: 8000000 } }
- { $zoom: { min: 11 }, area: { min: 2000000 } }
- { $zoom: { min: 12 }, area: { min: 200000 } }
- { $zoom: { min: 13 }, area: { min: 100000 } }
- { $zoom: { min: 14 }, area: { min: 2000 } }
- { $zoom: { min: 15 } }
draw:
polygons:
color: red
order: global.feature_order
#draw:
# polygons:
# color: [0.584, 0.898, 0.976]
other-water-areas:
filter: { not: { kind: [ocean, lake, water, reservoir, playa] }, $zoom: { min: 11 }, area: { min: 100 } }
draw:
polygons:
color: [0.078, 0.180, 0.392, 1.00]
playas:
filter: { kind: playa }
draw:
polygons:
order: global.feature_order
color: [0.584, 0.898, 0.976, 1.00]
swimming_pool:
filter: { kind: swimming_pool }
draw:
polygons:
color: [0.584, 0.898, 0.976, 1.00]
water-boundary-ocean:
filter: { boundary: true, kind: ocean, $zoom: { min: 1 } }
draw:
coast:
order: global.feature_order
color: [0.584, 0.898, 0.976, 1.00]
width: [[1, 1px], [20, 10px]]
join: round
water_boundaries-not-ocean:
filter: { boundary: true, not: { kind: ocean }, $zoom: { min: 8 } }
draw:
coast:
order: global.feature_order
color: [0.584, 0.898, 0.976, 1.00]
width: [[6, 0.75px], [10, 1px], [14, 2px], [16, 3px]]
join: round
# do we still need this?
# early:
# filter: { $zoom: { min: 14 } }
# draw:
# lines:
# order: 241
swimming-pools-early:
filter: { kind: swimming_pool, $zoom: { max: 19 } }
draw:
coast:
visible: false
new_riverbank:
# river boundaries like the thames in london, la seine in paris
filter: { kind: riverbank }
draw:
coast:
color: [0.137, 0.290, 0.569, 1.00]
width: [[9, 0.5px], [11, 1px], [14, 1px], [15, 2px]]
new_river:
#river center lines, not boundaries for polygons
filter: { kind: [river,canal,stream,dam,ditch,drain], $zoom: { min: 14 }, not: { is_tunnel: true } }
draw:
lines:
order: global.feature_order
color: [0.059, 0.173, 0.380, 1.00]
width: [[14, 0.5px], [15, 2px], [17, 6px],[ 18, 8px]]
cap: round
water-area-labels:
filter:
all:
- name: true
- function() { return global.text_visible_water_labels; }
ocean-sea-labels:
filter: { kind: [sea, ocean] }
draw:
text-blend-order:
text_source: global.ux_language_text_source
font:
fill: global.black_color
family: global.text_font_family
weight: normal
size: 12px
transform: uppercase
ocean-spacer:
filter: { kind: ocean }
ocean-spacer-z1-up:
filter: { $zoom: { min: 1 } }
draw:
text-blend-order:
text_source: global.ux_language_text_source_ocean
text_wrap: false
ocean-labels:
draw:
text-blend-order:
font:
size: [[1, 7px], [2, 9px], [4, 15px]]
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:
fill: global.dark_color
size: [[4, 9px], [6, 10px], [18, 16px]]
mostly-lakes:
filter:
all:
- $geometry: point
- not: { kind: [riverbank, dock, playa] }
- area: true
any:
# show labels for smaller landuse areas at higher zooms
- { $zoom: { min: 5 }, area: { min: 10000000000 } }
- { $zoom: { min: 6 }, area: { min: 5000000000 } }
- { $zoom: { min: 7 }, area: { min: 400000000 } }
- { $zoom: { min: 8 }, area: { min: 200000000 } }
- { $zoom: { min: 9 }, area: { min: 100000000 } }
- { $zoom: { min: 10 }, area: { min: 100000000 } }
- { $zoom: { min: 11 }, area: { min: 10000000 } }
- { $zoom: { min: 12 }, area: { min: 2000000 } }
- { $zoom: { min: 13 }, area: { min: 1000000 } }
- { $zoom: { min: 14 }, area: { min: 500000 } }
- { $zoom: { min: 15 }, area: { min: 100000 } }
- { $zoom: { min: 15 }, area: { min: 50000 } }
- { $zoom: { min: 16 }, area: { min: 20000 } }
- { $zoom: { min: 17 } }
default-label-text:
draw:
text-blend-order:
text_source: global.ux_language_text_source
font:
fill: global.black_color
family: global.text_font_family
style: italic
weight: normal
size: 12px
lakes-z5-up:
filter: { $zoom: { min: 5 } }
draw:
text-blend-order:
font:
size: [[5, 9px], [10, 13px]]
playa-labels:
filter:
all:
- $geometry: point
- kind: playa
- area: true
any:
# show labels for smaller landuse areas at higher zooms
- { $zoom: { min: 7 }, area: { min: 1500000000 } }
- { $zoom: { min: 8 }, area: { min: 200000000 } }
- { $zoom: { min: 9 }, area: { min: 100000000 } }
- { $zoom: { min: 10 }, area: { min: 100000000 } }
- { $zoom: { min: 11 }, area: { min: 10000000 } }
- { $zoom: { min: 12 }, area: { min: 2000000 } }
- { $zoom: { min: 13 }, area: { min: 1000000 } }
- { $zoom: { min: 14 }, area: { min: 500000 } }
- { $zoom: { min: 15 }, area: { min: 100000 } }
- { $zoom: { min: 15 }, area: { min: 50000 } }
- { $zoom: { min: 16 }, area: { min: 20000 } }
- { $zoom: { min: 17 } }
draw:
text-blend-order:
text_source: global.ux_language_text_source
font:
fill: global.mid_color
family: global.text_font_family
style: italic
weight: normal
size: 9px
stroke: { color: global.white_color, width: 3 }
water-line-labels:
filter:
all:
- $geometry: line
- kind: [river,canal,stream,dam,ditch,drain]
- $zoom: { min: 14 }
draw:
text-blend-order:
text_source: global.ux_language_text_source
font:
fill: global.black_color
family: global.text_font_family
style: italic
weight: normal
size: 12px
water-line-labels:
draw:
text-blend-order:
font:
size: [[14,10px],[17,14px]]
not-river-not-stream:
filter: { kind: [canal,dam,ditch,drain], $zoom: { max: 16 } }
draw:
text-blend-order:
visible: false
stream:
filter: { kind: [stream], $zoom: { max: 17 } }
draw:
text-blend-order:
visible: false
transit:
data: { source: mapzen, layer: transit }
subway-light-rail:
filter: { not: { kind: [platform] }, $zoom: { min: 14 } }
draw:
lines:
order: function() { return feature.sort_rank || 275; }
railway:
filter: { kind: [railway,train] }
draw:
lines:
color: global.lighter_color
width: [[14,0.5px],[16,1px],[18,1px]]
subway:
filter: { kind: subway }
draw:
lines:
color: global.lighter_color
width: [[14,0.5px],[16,1px],[18,1px]]
light_rail:
filter: { kind: [light_rail,tram], $zoom: { min: 15 } }
draw:
lines:
order: 415
color: global.lighter_color
width: [[14, 0px], [16, 1px]]
transit-overlay-rail-lines:
filter:
not: { kind: [platform, railway] }
draw:
lines:
order: 499
visible: global.sdk_transit_overlay
color: purple
width: [[5,1.5px],[6,2px],[11,3px],[18,4px]]
outline:
color: [1.,1.,1.,.8]
width: [[7,0px],[8,0.25px],[9,0.5px],[12,1.0px],[13,1.75px],[14,2px]]
train-sizing-color:
filter: { kind: train }
draw:
lines:
color: purple
width: [[5,1.0px],[6,1.0px],[7,1.25px],[11,2.0px],[13,2.5px],[18,3.5px]]
outline:
width: [[12,1.0px],[13,1.75px],[14,2px]]
stack-below-other-transit-later-zooms:
filter: { $zoom: { min: 9 } }
draw:
lines:
order: 511
subway-sizing:
filter: { kind: subway }
draw:
lines:
width: [[9,1px],[11,2px],[12,3px],[13,4px],[15,5px],[16,7px],[17,9px]]
outline:
#color: [[10,white],[11,black]]
width: [[9,0px],[10,0.5px],[12,1.25px],[13,1.5px],[15,2px]]
#width: [[12,1.5px],[13,2.0px],[14,2.5px]]
light-rail-and-tram-sizing:
filter: { kind: [light_rail, tram] }
draw:
lines:
width: [[10,1px],[12,1.5px],[15,2px],[18,3.5px]]
outline:
#color: [[11,white],[12,black]]
width: [[12,0.25px],[13,0.5px],[14,1px],[16,2px]]
has-data-color:
filter: { colour: true }
draw:
lines:
order: 510
width: [[9,2px],[11,3px],[12,4px]]
color: function() { return feature.colour || 'purple'; }
#outline:
#color: function() { if(feature.colour == 'silver') { return 'black'; } else { return [0.,0.,0.,.1]; } }
#width: [[12,1.0px],[13,1.75px],[14,2px]]
train-with-color:
filter: { kind: train }
draw:
lines:
order: 514
subway-with-color:
filter: { kind: subway }
draw:
lines:
order: 513
light-rail-and-tram-with-color:
filter: { kind: [light_rail, tram] }
draw:
lines:
order: 512
missing-colour:
filter: { colour: false }
train-missing-color:
filter: { kind: train, colour: false }
draw:
lines:
#width: [[5,1.25px],[6,1.75px],[11,2.0px],[13,2.5px],[18,2.5m]]
order: 506
subway-missing-color:
filter: { kind: subway, colour: false }
draw:
lines:
order: 505
#outline:
# width: [[12,1.5px],[13,2.0px],[14,2.5px]]
light-rail-and-tram-missing-color:
filter: { kind: [light_rail, tram], colour: false }
draw:
lines:
order: 504
labels-transit-lines:
filter:
all:
- function() { return global.sdk_transit_overlay; }
- all:
- $zoom: { min: 13 }
- ref: true
draw:
icons:
priority: 20
# you need to match any custom shield to the vector tile `network` values
sprite: function() { return ('sdk_shield-' + feature.ref.length + 'char'); }
sprite_default: sdk_shield_5char
color: function() { if ( feature.kind === 'train') { return 'purple' } else { return feature.colour || 'purple'; } }
# Size is specified below, and limited to 5 char in another filter
repeat_group: shields
repeat_distance: [[8,90px],[10,40px],[13,30px]]
placement: midpoint
placement_min_length_ratio:
- [8, 0.1]
- [9, 0.25]
- [10, 0.25]
- [11, 0.15]
- [12, 1]
- [13, 1.50]
- [14, 2.0]
cull_from_tile: true
# visible: false
text:
offset: [0px, -0.5px]
repeat_distance: 200px
anchor: center
text_source: function() { if( feature.ref.length < 6 ) { return feature.ref; } else { return ''; } }
font:
family: Montserrat
fill: function() { if(feature.colour == 'yellow') { return '#555'; } else { return 'white'; } }
style: bold
size: [[7,7px],[12,8px],[16,11px]]
width_1char:
filter: function() { return (feature.ref.length === 1); }
draw:
icons:
size: [[6,[16px,16px]],[13,[18px,18px]],[16,[21px,21px]]]
width_2char:
filter: function() { return (feature.ref.length === 2); }
draw:
icons:
size: [[6,[21px,16px]],[13,[24px,18px]],[16,[28px,21px]]]
width_3char:
filter: function() { return (feature.ref.length === 3); }
draw:
icons:
size: [[6,[27px,16px]],[13,[31px,18px]],[16,[36px,21px]]]
width_4char:
filter: function() { return (feature.ref.length === 4); }
draw:
icons:
size: [[6,[32px,16px]],[13,[36px,18px]],[16,[41px,21px]]]
# London sucks
early:
filter: { $zoom: { max: 14 } }
draw:
icons:
visible: false
width_5char:
filter: function() { return (feature.ref.length === 5); }
draw:
icons:
size: [[6,[37px,16px]],[13,[41px,18px]],[16,[48px,21px]]]
# London sucks
early:
filter: { $zoom: { max: 14 } }
draw:
icons:
visible: false
# this is kinda a hack
width_longggggg:
filter: function() { return (feature.ref.length > 5); }
draw:
icons:
visible: false
z19-show-long-route-name:
filter:
all:
- function() { return global.sdk_transit_overlay; }
- $zoom: { min: 19 }
draw:
text:
font:
fill: global.black_color
style: italic
stroke: { color: global.white_color, width: 3px }
platforms:
data: { source: mapzen, layer: transit }
filter: { kind: platform }
draw:
lines_transparent:
color: global.transparent
width: 5m
visible: true
polygon_geom:
filter: { $geometry: polygon }
draw:
polygons_transparent:
color: global.transparent
visible: true
lines_transparent:
visible: false
outline_transparent:
color: global.transparent
width: [[15, 0px], [16, 0.5px], [17, 1px], [19, 2px]]
roads:
data: { source: mapzen, layer: roads }
draw:
lines:
#color: black
width: 1px
order: global.feature_order
# but give them all the same outline
outline:
order: 352
text-blend-order:
text_source: global.ux_language_text_source
visible: false # labels are enabled by each layer below
font:
family: global.text_font_family
weight: normal
fill: global.black_color
arrows:
# oneway arrows and shields are distinct groups!
filter: { oneway: yes, shield_text: false, not: { kind: rail }, $zoom: { min: 17 } }
draw:
arrows:
style: icons
flat: true
visible: global.icon_visible_landuse_green
sprite: arrow
color: global.midlight_color
size: [[17, 6px], [20, 14px]]
placement: spaced
placement_spacing: [[17, 70px], [20, 175px]]
angle: auto
early:
filter: { $zoom: { max: 15 } }
draw:
lines:
outline:
order: global.feature_order
bridges-tunnels:
filter: { any: [is_bridge: true, is_tunnel: true] }
draw:
lines:
#cap: butt
outline:
# except bridges and tunnels, their outlines should also self-sort
order: global.feature_order
# default outlines starting at zoom 16
default-outline-width:
filter: { $zoom: { min: 16 } }
draw:
lines:
outline:
width: function () { return 3/16 * Math.log($zoom); }
natural_earth_highways:
filter: { $zoom: { min: 5, max: 8 } }
draw:
lines:
color: [[5, global.mid_color], [6, global.black_color]]
width: [[5, 0.5px], [6, 0.5px], [7, 0.75px]]
outline:
color: global.mid_color
width: [[9, 0px], [10, 0px], [12, 1px], [16, 2px]]
major_road:
filter: { kind: major_road }
draw:
lines:
color: [[5, global.light_color], [7, global.mid_color]]
width: [[5, 0.25px], [7, 0.5px]]
# outline:
# width: [[8, 0.0px], [9, 0.0px], [11, .5px], [16, .75px]]
minor_road:
filter: { kind: minor_road }
draw:
lines:
color: global.offwhite_color
width: 0.5px
# outline:
# width: [[12, 0px], [14, .5px], [17, 1px]]
ferry:
filter: { kind: ferry }
draw:
lines:
color: global.light_color
width: 0.5px
outline:
width: 0px
highway:
filter: { kind: highway, $zoom: { min: 8 } }
draw:
lines:
color: [[8, global.black_color], [13, global.black_color], [14, global.white_color]]
width: [[8, 1px], [13, 1.25px], [14, 0.1px], [15, 1.5px], [17, 8px], [18, 10m]]
outline:
color: [[8, global.white_color], [12, global.white_color], [13, global.black_color]]
width: [[8, 0px], [13, 0px], [14, 1px], [15, 2px], [19, 6px]]
link:
filter: { is_link: true } # on- and off-ramps, etc
draw:
lines:
color: [[9, global.mid_color], [13, global.mid_color], [14, global.white_color]]
width: [[9, 0px], [13, 0.75px], [14, 0.1px], [17, 4px], [18, 5m]]
outline:
color: [[9, global.white_color], [12, global.white_color], [13, global.mid_color], [15, global.black_color]]
width: [[9, 0px], [13, 0px], [14, 0.4px], [17, 1.5px], [18, 2px]]
early_link:
filter: { $zoom: {min: 13, max: 15} }
draw:
lines:
order: 352
tunnel-link:
filter: {is_tunnel: true, $zoom: { min: 13 } }
draw:
lines:
color: [[13, global.light_color], [14, global.ultralight_color]]
outline:
color: [[12, global.white_color], [13, global.light_color]]
tunnel:
filter: { is_tunnel: true, $zoom: { min: 13 } }
draw:
lines:
color: [[13, global.light_color], [14, global.ultralight_color]]
outline:
color: [[12, global.white_color], [13, global.light_color]]
highway_bridge:
filter: { is_bridge: true }
draw:
lines:
cap: round
outline:
cap: butt
labels-highway-z13-z14:
filter:
$zoom: [13,14]
draw:
text-blend-order:
priority: 50
visible: global.text_visible_highway
text_source: global.ux_language_text_source_road_ref_and_name
font:
fill: global.black_color
weight: 600
size: 11px
stroke: { color: global.white_color, width: 4 }
labels-highway-z15-up:
filter: { $zoom: { min: 15 } }
draw:
text-blend-order:
priority: 50
visible: global.text_visible_highway
font:
fill: global.white_color
weight: 600
size: [[15, 12px], [19, 16px]]
stroke: { color: global.black_color, width: [[15, 3], [17, 4]] }
major_road:
filter: { kind: major_road, $zoom: { min: 8 } }
# default style
draw:
lines:
color: [[8, global.black_color], [13, global.black_color], [17, global.white_color]]
width: [[13, 1px], [14, 1px], [16, 2.5px], [17, 3px]]
outline:
width: [[12, 0px], [13, .5px], [15, 1px], [17, 2px]]
trunk_primary:
filter: { kind_detail: [trunk, primary] }
draw:
lines:
color: [[8, global.midlight_color], [12, global.mid_color], [13, global.black_color], [14, global.white_color]]
width: [[8, 0.5px], [11, 0.5px], [13, 1px], [14, 0.1px], [16, 2px], [17, 8px], [18, 10m]]
outline:
color: [[8, global.white_color], [12, global.white_color], [13, global.black_color]]
width: [[8, 0px], [13, 0px], [14, 0.75px], [16, 1.5px], [18, 4px]]
early:
filter: { $zoom: { max: 16 } }
draw:
lines:
order: 352
outline:
order: function() { return feature.sort_rank + 2; }
primary:
filter: { kind: [primary] }
draw:
lines:
outline:
order: function() { return feature.sort_rank + 1; }
routes:
filter: { ref: true }
draw:
lines:
color: [[8, global.midlight_color], [12, global.mid_color], [13, global.black_color], [14, global.white_color]]
width: [[9, 0.5px], [13, 1px], [14, 0.1px], [15, 1.25px], [16, 2px], [17, 8px], [18, 10m]]
outline:
color: [[8, global.white_color], [12, global.white_color], [13, global.black_color]]
width: [[8, 0px], [13, 0px], [14, 0.75px], [15, 1.5px], [17, 3px], [18, 4px]]
early:
filter: { $zoom: { max: 16 } }
draw:
lines:
order: function() { return feature.sort_rank + 2; }
outline:
order: 353
tunnel:
filter: { is_tunnel: true, $zoom: { min: 13 } }
draw:
lines:
color: [[13, global.light_color], [14, global.ultralight_color]]
outline:
color: [[12, global.white_color], [13, global.light_color]]
labels-trunk_primary-route-z13-z14:
filter: { $zoom: [13,14] }
draw:
text-blend-order:
priority: 51
visible: global.text_visible_trunk_primary
text_source: global.ux_language_text_source_road_ref_and_name
font:
fill: global.dark_color
size: 11px
stroke: { color: global.white_color, width: 3 }
labels-trunk_primary-route-z15-up:
filter: { $zoom: { min: 15 } }
draw:
text-blend-order:
priority: 51
visible: global.text_visible_trunk_primary
text_source: global.ux_language_text_source_road_ref_and_name
font:
fill: global.black_color
weight: 600
size: [[15, 12px], [16, 13px], [19, 16px]]
stroke: { color: global.white_color, width: [[15, 3], [17, 6]] }
labels-trunk_primary-z11-z15:
filter:
$zoom: [11,12,13,14,15]
draw:
text-blend-order:
priority: 51
visible: global.text_visible_trunk_primary
text_source: global.ux_language_text_source_road_ref_and_name_short
font:
fill: global.dark_color
size: [[11, 10px], [15, 12px]]
stroke: { color: global.white_color, width: [[11, 3], [13, 3], [14, 4]] }
labels-trunk_primary-z16-up:
filter: { $zoom: { min: 16 } }
draw:
text-blend-order:
priority: 51
visible: global.text_visible_trunk_primary
text_source: global.ux_language_text_source_road_ref_and_name
font:
fill: [[16, global.dark_color], [18, global.black_color]]
weight: 600
size: [[16, 13px], [18, 13px], [19, 16px]]
stroke: { color: global.white_color, width: [[16, 4], [17, 6]]}
link:
filter: { is_link: true } # on- and off-ramps, etc
draw:
lines:
color: [[10, global.mid_color], [15, global.light_color], [16, global.white_color]]
width: [[10, 0.5px], [12, 0.5px], [15, 1px], [16, 1.75px], [17, 3px], [18, 5m]]
outline:
color: [[10, global.white_color], [15, global.mid_color], [16, global.black_color]]
width: [[10, 0px], [15, 0px], [16, 1px], [18, 2px]]
tunnel:
filter: { is_tunnel: true, $zoom: { min: 13 } }
draw:
lines:
color: [[13, global.light_color], [14, global.ultralight_color]]
outline:
color: [[12, global.white_color], [13, global.light_color]]
secondary:
filter: { kind_detail: secondary }
draw:
lines:
color: [[10, global.lighter_color], [13, global.midlight_color], [15, global.dark_color], [16, global.white_color]]
width: [[10, 0.5px], [12, 0.5px], [14, 1px], [15, 1.5px], [16, 0.1px], [17, 7.5px], [18, 9m]]
outline:
color: [[10, global.white_color], [14, global.white_color], [15, global.black_color]]
width: [[10, 0px], [15, 0px], [16, 1.1px], [17, 2px]]
early:
filter: { $zoom: { max: 16 } }
draw:
lines:
order: 352
outline:
order: 353 #function() { return feature.sort_rank + 2; }
routes:
filter: { ref: true, $zoom: { min: 12 } }
draw:
lines:
color: [[10, global.lighter_color], [13, global.mid_color], [15, global.black_color], [16, global.white_color]]
width: [[10, 0.5px], [13, 1px], [15, 1.5px], [16, 0.1px], [17, 7.5px], [18, 9m]]
outline:
color: [[10, global.white_color], [14, global.white_color], [15, global.black_color]]
width: [[10, 0px], [15, 0px], [16, 1.5px], [17, 2px]]
early:
filter: { $zoom: { max: 15 } }
draw:
lines:
order: function() { return feature.sort_rank + 2; }
outline:
order: 353
tunnel:
filter: {is_tunnel: true, $zoom: { min: 13 } }
draw:
lines:
color: [[13, global.light_color], [15, global.light_color], [16, global.ultralight_color]]
outline:
color: [[13, global.white_color], [14, global.white_color], [15, global.light_color]]
labels-secondary-routes-z13-z14:
filter: { $zoom: [13,14] }
draw:
text-blend-order:
priority: 56
visible: global.text_visible_secondary
text_source: global.ux_language_text_source_road_ref_and_name_short
font:
fill: global.black_color
size: 11px
stroke: { color: global.white_color, width: 4 }
labels-secondary-routes-z15-up:
filter: { $zoom: { min: 15 } }
draw:
text-blend-order:
priority: 56
visible: global.text_visible_secondary
text_source: global.ux_language_text_source_road_ref_and_name_short
font:
fill: global.black_color
weight: 600
size: [[15, 11px], [17, 13px]]
stroke: { color: global.white_color, width: 4 }
labels-secondary:
filter: { $zoom: { min: 13 } }
draw:
text-blend-order:
priority: 56
visible: global.text_visible_secondary
text_source: global.ux_language_text_source_road_ref_and_name_short
font:
fill: [[13, global.dark_color], [17, global.black_color]]
size: [[13, 10px], [17, 13px]]
stroke: { color: global.white_color, width: 4 }
tertiary:
filter: { kind_detail: [tertiary, tertiary_link] }
draw:
lines:
color: [[11, global.lighter_color], [15, global.dark_color], [16, global.white_color]]
width: [[11, 0.5px], [15, 1.25px], [16, 0.1px], [17, 6px], [18, 9m]]
outline:
color: [[11, global.white_color], [14, global.white_color], [15, global.black_color]]
width: [[11, 0px], [15, 0px], [16, 1px], [17, 2px], [18, 2px]]
early:
filter: { $zoom: { max: 15 } }
draw:
lines:
order: 352
outline:
order: function() { return feature.sort_rank + 3; }
routes:
filter: { ref: true, $zoom: { min: 12} }
draw:
lines:
color: [[11, global.lighter_color], [15, global.dark_color], [16, global.white_color]]
width: [[11, 0.5px], [15, 1.25px], [16, 0.1px], [17, 6px], [18, 9m]]
outline:
color: [[11, global.white_color], [14, global.white_color], [15, global.black_color]]
width: [[11, 0px], [15, 0px], [16, 1px], [17, 2px], [18, 2px]]
early:
filter: { $zoom: { max: 15 } }
draw:
lines:
order: function() { return feature.sort_rank + 3; }
outline:
order: 353
tunnel:
filter: { is_tunnel: true, $zoom: { min: 13 } }
draw:
lines:
color: [[13, global.light_color], [15, global.light_color], [16, global.ultralight_color]]
outline:
color: [[13, global.white_color], [14, global.white_color], [15, global.light_color]]
link:
filter: { is_link: true } # on- and off-ramps, etc
draw:
lines:
color: [[14, global.light_color], [15, global.dark_color], [16, global.white_color]]
width: [[11, 0.0px], [15, 0.5px], [16, 0.1px], [18, 4.5m]]
outline:
color: [[11, global.white_color], [14, global.white_color], [15, global.black_color]]
width: [[11, 0px], [14, 0px], [16, 0.25px], [18, 2px]]
labels-tertiary:
filter: { $zoom: { min: 13 } }
draw:
text-blend-order:
priority: 57
visible: global.text_visible_tertiary
text_source: global.ux_language_text_source_road_ref_and_name_short
font:
fill: [[13, global.dark_color], [18, global.black_color]]
size: [[13, 10px], [17, 13px]]
stroke: { color: global.white_color, width: 4 }
minor_road:
filter: { kind: minor_road, not: { kind_detail: service }, $zoom: { min: 8 } }
draw:
lines:
color: [[11, global.offwhite_color], [15, global.midlight_color], [16, global.white_color]]
width: [[11, 0.35px], [13, 0.5px], [14, 1px], [15, 1px], [16, 0.1px], [17, 3.5px], [18, 9m]]
outline:
color: [[11, global.white_color], [14, global.white_color], [15, global.midlight_color], [17, global.black_color]]
width: [[11, 0px], [15, 0px], [16, 0.75px], [17, 1.5px], [18, 1.5px]]
early:
filter: { $zoom: { max: 16 } }
draw:
lines:
order: 350
outline:
order: 351
# Is this junk code?
round:
filter: { $zoom: { min: 17 } }
draw:
lines:
cap: round
join: round
tunnel:
filter: {is_tunnel: true, $zoom: { min: 13 } }
draw:
lines:
color: [[13, global.light_color], [15, global.light_color], [16, global.ultralight_color]]
outline:
color: [[13, global.white_color], [14, global.white_color], [15, global.light_color]]
minor_road_bridge:
filter: { is_bridge: true }
draw:
lines:
cap: round
outline:
cap: butt
labels-minor_road:
filter: { $zoom: { min: 15 } }
draw:
text-blend-order:
priority: 59
visible: global.text_visible_minor_road
text_source: name
font:
fill: [[15, global.mid_color], [18, global.black_color]]
size: [[15, 10px], [18, 13px]]
stroke: { color: global.white_color, width: 4 }
service_road:
filter: { kind: minor_road, kind_detail: service, $zoom: { min: 13 } }
draw:
lines:
color: [[13, global.offwhite_color], [15, global.midlight_color], [16, global.white_color]]
width: [[13, 0px], [15, 0.75px], [16, 0.1px], [17, 2.5px], [18, 5m]]
outline:
color: [[13, global.white_color], [14, global.white_color], [15, global.mid_color], [18, global.black_color]]
width: [[13, 0px], [15, 0px], [16, 0.6px], [19, 1.5px]]
labels-service_road:
filter: { $zoom: { min: 17 } }
draw:
text-blend-order:
priority: 60
visible: global.text_visible_service_road
text_source: name
font:
fill: [[17, global.dark_color], [18, global.black_color]]
size: [[17, 11px], [18, 12px]]
stroke: { color: global.white_color, width: 4 }
fpdcc_path:
filter:
all:
- operator: 'Forest Preserve District of Cook County'
draw:
lines:
color: [0.722, 0.004, 0.004, 0.00]
path:
filter:
all:
- kind: [path, portage_way]
not:
- kind_detail: [steps, track, pier]
- operator: 'Forest Preserve District of Cook County'
- landuse_kind: [golf_course]
draw:
lines:
color: [[14, global.light_color], [16, global.white_color]]
width: [[14, 0.35px], [15, 0px], [16, 0.25px], [18, 2px], [20, 1m]]
outline:
color: global.light_color
width: [[14, 0px], [15, 0.35px], [16, 0.45px], [17, 1px]]
early:
filter:
$zoom: { max: 15 }
draw:
lines:
order: 351
outline:
order: 350
pedestrian:
filter: { kind_detail: pedestrian }
draw:
lines:
color: [[14, global.light_color], [16, global.white_color]]
width: [[14, 0.35px], [15, 0px], [16, 0.25px], [18, 2px], [20, 1m]]
outline:
color: global.light_color
width: [[14, 0px], [15, 0.35px], [16, 0.45px], [17, 1px]]
footway:
filter: { kind_detail: footway }
draw:
lines:
color: [[14, global.light_color], [16, global.white_color]]
width: [[14, 0.35px], [15, 0px], [16, 0.25px], [18, 2px], [20, 1m]]
outline:
color: global.light_color
width: [[14, 0px], [15, 0.35px], [16, 0.45px], [17, 1px]]
bridge:
filter: { is_bridge: true }
draw:
lines:
cap: round
outline:
color: global.mid_color
cap: butt
bridge:
filter: { is_bridge: true }
draw:
lines:
cap: round
outline:
color: global.mid_color
cap: butt
labels-path:
filter: { $zoom: { min: 17 } }
draw:
text-blend-order:
priority: 61
visible: global.text_visible_path
text_source: name
font:
fill: global.dark_color
size: 12px
stroke: { color: global.white_color, width: 4 }
track:
filter: { kind: path, kind_detail: track }
draw:
lines:
color: [[13, global.white_color], [16, global.light_color], [17, global.white_color]]
width: [[13, 0px], [14, 0.15px], [16, 1px], [18, 1.5px], [20, 1m]]
outline:
color: [[14, global.light_color], [15, global.white_color], [16, global.white_color], [17, global.light_color]]
width: [[13, 0px], [14, 0.25px], [15, 0.5px], [16, 1px], [17, 1px]]
bridge:
filter: { is_bridge: true }
draw:
lines:
cap: butt
color: [[13, global.white_color], [16, global.light_color], [17, global.white_color]]
width: [[13, 0px], [14, 0.15px], [16, 1px], [18, 1.5px], [20, 1m]]
outline:
color: [[14, global.light_color], [15, global.white_color], [16, global.white_color], [17, global.dark_color]]
width: [[13, 0px], [14, 0.25px], [15, 0.5px], [16, 1px], [17, 1px]]
cap: butt
steps:
filter:
all:
- kind: path
- kind_detail: steps
draw:
dashed_steps:
order: global.feature_order
color: [[15, global.light_color], [19, global.lighter_color]]
width: [[15, 0.5], [18, 3px], [19, 1.5m]]
outline:
color: global.offwhite_color
width: [[15, 0px], [18, 1px]]
labels-steps:
filter: { $zoom: { min: 17 } }
draw:
text-blend-order:
priority: 62
visible: global.text_visible_steps
text_source: name
font:
fill: global.mid_color
size: 11px
stroke: { color: global.white_color, width: 4 }
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:
colorized-icons:
# 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
priority: 58
repeat_group: shields
repeat_distance: [[8, 90px],[10, 40px],[13, 30px]]
placement: midpoint
placement_min_length_ratio:
- [8, 0.1]
- [9, 0.25]
- [10, 0.25]
- [11, 0.15]
- [12, 1]
- [13, 1.50]
- [14, 2.0]
cull_from_tile: true
visible: false
text:
offset: [0px, -0.5px]
repeat_distance: 200px
anchor: center
text_source: |
function() {
if( feature.shield_text ) {
return feature.shield_text;
} else {
return feature.ref;
}
}
font:
family: Montserrat
fill: global.black_color
size: [[7,7px],[12,8px],[16,11px]]
default_priority_highway:
filter:
all:
- kind_detail: motorway
- $zoom: { min: 9 }
draw:
colorized-icons:
priority: 47
#color: yellow
visible: global.sdk_road_shields
default_priority_trunk:
filter:
all:
- kind_detail: [trunk]
- $zoom: { min: 10 }
draw:
colorized-icons:
priority: 48
#color: red
visible: global.sdk_road_shields
default_priority_primary:
filter:
all:
- kind_detail: [primary]
- $zoom: { min: 12 }
draw:
colorized-icons:
priority: 49
#color: aqua
visible: global.sdk_road_shields
default_priority_trunk_secondary:
filter:
all:
- kind_detail: [secondary]
- $zoom: { min: 12 }
draw:
colorized-icons:
priority: 53
#color: blue
visible: global.sdk_road_shields
default_priority_trunk_tertiary:
filter:
all:
- kind_detail: tertiary
- $zoom: { min: 13 }
draw:
colorized-icons:
priority: 55
#color: green
visible: global.sdk_road_shields
# not-special:
# filter:
# not: { network: ['US:I','US:US'] }
# $zoom: { max: 9 }
# draw:
# colorized-icons:
# visible: false
width_1char:
filter: |
function() {
if( feature.shield_text ) {
return (feature.shield_text.length === 1)
} else {
return (feature.ref.length === 1)
}
}
draw:
colorized-icons:
size: [[6,[14px,14px]],[13,[16px,16px]],[16,[18px,18px]]]
width_2char:
filter: |
function() {
if( feature.shield_text ) {
return (feature.shield_text.length === 2)
} else {
return (feature.ref.length === 2)
}
}
draw:
colorized-icons:
size: [[6,[18px,14px]],[13,[20px,15px]],[16,[24px,18px]]]
width_3char:
filter: |
function() {
if( feature.shield_text ) {
return (feature.shield_text.length === 3)
} else {
return (feature.ref.length === 3)
}
}
draw:
colorized-icons:
size: [[6,[25px,14px]],[13,[27px,15px]],[16,[33px,18px]]]
width_4char:
filter: |
function() {
if( feature.shield_text ) {
return (feature.shield_text.length === 4)
} else {
return (feature.ref.length === 4)
}
}
draw:
colorized-icons:
size: [[6,[29px,14px]],[13,[31px,15px]],[16,[38px,18px]]]
# London sucks
early:
filter: { $zoom: { max: 14 } }
draw:
colorized-icons:
visible: false
width_5char:
filter: |
function() {
if( feature.shield_text ) {
return (feature.shield_text.length === 5)
} else {
return (feature.ref.length === 5)
}
}
draw:
colorized-icons:
size: [[6,[34px,14px]],[13,[37px,15px]],[16,[45px,18px]]]
# London sucks
early:
filter: { $zoom: { max: 14 } }
draw:
colorized-icons:
visible: false
# this is kinda a hack
width_longggggg:
filter: |
function() {
if( feature.shield_text ) {
return (feature.shield_text.length > 5)
} else {
return (feature.ref.length > 5)
}
}
draw:
colorized-icons:
visible: false
# missing-route-relations:
# filter: { shield_text: false }
# draw:
# lines:
# order: 1000
# color: red
# width: 2px
#
# Now for the good stuff
#
legit-shields:
filter: { shield_text: true }
# draw:
# colorized-icons:
# color: red
# US Interstate roads
US-I:
filter:
network: 'US:I'
draw:
colorized-icons:
# you need to match any custom shield to the vector tile `network` values
sprite: function() { return (feature.network + '-' + feature.shield_text.length + 'char'); }
priority: 46
visible: global.sdk_road_shields
text:
offset: [0px, 0.5px]
font:
# fill: global.black_color
size: [[7,8px],[13,9px],[15,11px]]
width_1char:
filter: function() { return (feature.shield_text.length === 1) }
draw:
colorized-icons:
size: [[6,[15px,18px]],[13,[17px,20px]],[15,[22px,25px]]]
width_2char:
filter: function() { return (feature.shield_text.length === 2) }
draw:
colorized-icons:
size: [[6,[18px,18px]],[13,[20px,20px]],[15,[25px,25px]]]
width_3char:
filter: function() { return (feature.shield_text.length === 3) }
draw:
colorized-icons:
size: [[6,[23px,18px]],[13,[26px,20px]],[15,[33px,25px]]]
width_4char:
filter: function() { return (feature.shield_text.length === 4) }
draw:
colorized-icons:
size: [[6,[25px,18px]],[13,[27px,20px]],[15,[35px,25px]]]
width_5char:
filter: function() { return (feature.shield_text.length === 5) }
draw:
colorized-icons:
size: [[6,[26px,18px]],[13,[30px,20px]],[15,[38px,25px]]]
# US Federal Routes
US-US:
filter:
network: ['US:US','US:US:Business', 'US:US:Truck', 'US:US:Alternate']
$zoom: { min: 7 }
draw:
colorized-icons:
# you need to match any custom shield to the vector tile `network` values
sprite: |
function() { return ('US:US-' + feature.shield_text.length + 'char'); }
priority: 47
cull_from_tile: true
visible: global.sdk_road_shields
text:
offset: [0px, -0.7px]
font:
# fill: global.black_color
size: [[7,8px],[13,9px],[15,11px]]
# early:
# filter: { $zoom: [7] }
# colorized-icons:
# visible: false
width_1char:
filter: function() { return (feature.shield_text.length === 1) }
draw:
colorized-icons:
size: [[6,[15px,17px]],[13,[17px,19px]],[15,[22px,24px]]]
width_2char:
filter: function() { return (feature.shield_text.length === 2) }
draw:
colorized-icons:
size: [[6,[18px,17px]],[13,[20px,19px]],[15,[26px,24px]]]
width_3char:
filter: function() { return (feature.shield_text.length === 3) }
draw:
colorized-icons:
size: [[6,[22px,17px]],[13,[25px,19px]],[15,[34px,25px]]]
width_4char:
filter: function() { return (feature.shield_text.length === 4) }
draw:
colorized-icons:
size: [[6,[25px,17px]],[13,[29px,19px]],[15,[39px,25px]]]
width_5char:
filter: function() { return (feature.shield_text.length === 5) }
draw:
colorized-icons:
size: [[6,[27px,17px]],[13,[30px,19px]],[15,[41px,25px]]]
# US State Routes
# US-states:
# # Match state highways: `US:??`
# filter: |
# function() {
# return feature.shield_text &&
# /^US:(?!US)\w\w$/.test(feature.network)
# }
# draw:
# colorized-icons:
# # you need to match any custom shield to the vector tile `network` values
# priority: 18
# early:
# filter: { $zoom: [7,8,9] }
# colorized-icons:
# visible: false
US-CA:
# Match California state highways: `US:CA`
filter: |
function() {
return feature.shield_text &&
/^US:CA$/.test(feature.network)
}
draw:
colorized-icons:
sprite: function() { return (feature.network + '-' + feature.shield_text.length + 'char'); }
text:
offset: [0px, 1px]
font:
# fill: global.black_color
size: [[7,7px],[13,9px],[15,10px]]
motorway:
filter: { kind_detail: [motorway], $zoom: [7,8] }
draw:
colorized-icons:
visible: global.sdk_road_shields
trunk:
filter: { kind_detail: [trunk], $zoom: [8,9] }
draw:
colorized-icons:
visible: global.sdk_road_shields
primary:
filter: { kind_detail: primary, $zoom: [10,11] }
draw:
colorized-icons:
visible: global.sdk_road_shields
width_1char:
filter: function() { return (feature.shield_text.length === 1) }
draw:
colorized-icons:
size: [[6,[14px,16px]],[13,[15px,18px]],[15,[18px,21px]]]
width_2char:
filter: function() { return (feature.shield_text.length === 2) }
draw:
colorized-icons:
size: [[6,[18px,18px]],[13,[20px,20px]],[15,[23px,23px]]]
width_3char:
filter: function() { return (feature.shield_text.length === 3) }
draw:
colorized-icons:
size: [[6,[21px,18px]],[13,[24px,20px]],[15,[28px,23px]]]
width_4char:
filter: function() { return (feature.shield_text.length === 4) }
draw:
colorized-icons:
size: [[6,[24px,18px]],[13,[26px,20px]],[15,[31px,23px]]]
width_5char:
filter: function() { return (feature.shield_text.length === 5) }
draw:
colorized-icons:
size: [[6,[25px,18px]],[13,[27px,20px]],[15,[32px,23px]]]
US-NY:
# Match New York state highways: `US:NY`
filter: |
function() {
return feature.shield_text &&
/^US:NY$/.test(feature.network)
/* (/^US:NY$/.test(feature.network) || /^NY:US$/.test(feature.network)) */
}
draw:
colorized-icons:
sprite: |
function() { return ( 'US:NY-' + feature.shield_text.length + 'char'); }
text:
# offset: [0px, 1px]
font:
# fill: global.black_color
size: [[7,7px],[13,9px],[15,10px]]
width_1char:
filter: function() { return (feature.shield_text.length === 1) }
draw:
colorized-icons:
size: [[6,[13px,17px]],[13,[15px,19px]],[15,[18px,22px]]]
width_2char:
filter: function() { return (feature.shield_text.length === 2) }
draw:
colorized-icons:
size: [[6,[17px,17px]],[13,[19px,19px]],[15,[22px,22px]]]
width_3char:
filter: function() { return (feature.shield_text.length === 3) }
draw:
colorized-icons:
size: [[6,[20px,17px]],[13,[22px,19px]],[15,[27px,22px]]]
width_4char:
filter: function() { return (feature.shield_text.length === 4) }
draw:
colorized-icons:
size: [[6,[21px,17px]],[13,[24px,19px]],[15,[29px,22px]]]
width_5char:
filter: function() { return (feature.shield_text.length === 5) }
draw:
colorized-icons:
size: [[6,[22px,17px]],[13,[25px,19px]],[15,[30px,22px]]]
US-PA:
# Match Pennsylvania state highways
filter: |
function() {
return feature.shield_text &&
/^US:PA$/.test(feature.network)
}
draw:
colorized-icons:
sprite: |
function() { return ( 'US:PA-' + feature.shield_text.length + 'char'); }
text:
offset: [0px, 1px]
font:
# fill: global.black_color
size: [[7,7px],[13,9px],[15,10px]]
width_1char:
filter: function() { return (feature.shield_text.length === 1) }
draw:
colorized-icons:
size: [[6,[13px,17px]],[13,[15px,19px]],[15,[18px,22px]]]
width_2char:
filter: function() { return (feature.shield_text.length === 2) }
draw:
colorized-icons:
size: [[6,[17px,17px]],[13,[19px,19px]],[15,[22px,22px]]]
width_3char:
filter: function() { return (feature.shield_text.length === 3) }
draw:
colorized-icons:
size: [[6,[21px,17px]],[13,[24px,19px]],[15,[28px,22px]]]
width_4char:
filter: function() { return (feature.shield_text.length === 4) }
draw:
colorized-icons:
size: [[6,[22px,17px]],[13,[25px,19px]],[15,[30x,22px]]]
width_5char:
filter: function() { return (feature.shield_text.length === 5) }
draw:
colorized-icons:
size: [[6,[24px,17px]],[13,[27px,19px]],[15,[32px,22px]]]
# USA County Routes
US-counties:
# Match state highways: `US:??:*`
#
# this is very USA specific
#
# filter: |
# function() {
# return feature.shield_text &&
# /^US:(?!US)\w\w:.*$/.test(feature.network)
# }
#
# this generic for any country with 3rd level networks (like county routes in USA)
# BEWARE:
# US:US:Business about 150
# US:US:Truck
# US:US:Alternate
#
# STATE ROUTE
# ??:??:Loop about 200
# ??:??:Spur about 200
# ??:??:Business about 100
#
# STATE TEXAS SPECIAL ROUTE
# US:TX:FM -- probably just state? there are 3k of these
#
#
filter: |
function() {
return feature.shield_text &&
/^\w+:\w+:(!Alternate).+$/.test(feature.network) &&
$zoom > 10
}
draw:
colorized-icons:
# you need to match any custom shield to the vector tile `network` values
sprite: function() { return ('county_shield-' + feature.shield_text.length + 'char'); }
# priority: 19
visible: global.sdk_road_shields
text:
font:
fill: global.black_color
#size: [[11,7px],[15,10px]]
# early:
# filter: { $zoom: { max: 11 } }
# draw:
# colorized-icons:
# visible: false
width_1char:
filter: function() { return (feature.shield_text.length === 1) }
draw:
colorized-icons:
size: [[6,[14px,14px]],[13,[16px,16px]],[15,[18px,18px]]]
width_2char:
filter: function() { return (feature.shield_text.length === 2) }
draw:
colorized-icons:
size: [[6,[16px,14px]],[13,[18px,16px]],[15,[22px,18px]]]
width_3char:
filter: function() { return (feature.shield_text.length === 3) }
draw:
colorized-icons:
size: [[6,[20px,14px]],[13,[21px,15px]],[15,[26px,18px]]]
width_4char:
filter: function() { return (feature.shield_text.length === 4) }
draw:
colorized-icons:
size: [[6,[25px,14px]],[13,[28px,15px]],[15,[34px,18px]]]
width_5char:
filter: function() { return (feature.shield_text.length === 5) }
draw:
colorized-icons:
size: [[6,[30px,14px]],[13,[33px,15px]],[15,[40px,18px]]]
winter_sport_pistes:
filter: { kind: piste }
draw:
lines:
order: 388 # We override the server value here because Eraser Map is also a special Ski Map
cap: round
join: round
color: global.offwhite_color
width: [[13,0px], [14, 3px], [15, 5px], [16, 6px], [18, 3m]]
text-blend-order:
priority: 18
visible: global.text_visible_piste
font:
fill: global.midlight_color
size: [[15, 11px], [17, 12px]]
# stroke: { color: global.grey8, width: 4 }
early:
filter: { $zoom: { max: 15 } }
draw:
text-blend-order:
visible: false
easy:
filter: { piste_difficulty: easy }
draw:
lines:
color: global.white_color
intermediate:
filter: { piste_difficulty: intermediate }
draw:
lines:
color: global.white_color
advanced:
filter: { piste_difficulty: advanced }
draw:
lines:
color: global.white_color
text-blend-order:
text_source: global.ux_language_text_source_piste_advanced
expert:
filter: { piste_difficulty: expert }
draw:
lines:
color: global.white_color
text-blend-order:
text_source: global.ux_language_text_source_piste_expert
pier:
filter: { kind: path, kind_detail: pier }
draw:
lines:
color: global.offwhite_color
width: [[13, 0px], [14, 0.5px],[15, 1.5px], [16, 2.5px],[17, 3px],[18, 3m]]
outline:
color: global.mid_color
width: [[15, 0px],[16,0.65px], [17, 0.75px], [18, 1px], [19, 1.5px]]
racetrack:
filter: { kind: racetrack }
draw:
lines:
cap: round
join: round
color: global.black_color
width: [[13,0.5px],[14,1px],[15, 1px], [16, 1.5px], [18, 3px], [19, 5px]]
airport-lines:
filter: { kind: aeroway, kind_detail: [runway,taxiway] }
draw:
lines:
color: global.lighter_color
cap: butt
width: [[10, 1px], [13, 3px], [15, 16px], [17, 60m]]
outline:
color: global.white_color
# Features come in at zoom 9, but include mostly minor airports without POIs until z13
early:
filter: { $zoom: { max: 12 }, not: { landuse_kind: [aerodrome, runway, taxiway] } }
draw:
lines:
visible: false
not-round:
filter: { $zoom: { min: 17 } }
draw:
lines:
cap: butt
taxiway:
filter: { kind_detail: taxiway }
draw:
lines:
color: global.lighter_color
width: [[14, 1px], [16, 6px], [18, 4m]]
outline:
width: 0.5px
color: global.white_color
early:
filter: { $zoom: { max: 13 } }
draw:
lines:
visible: false
ferry:
filter: { kind: ferry }
draw:
lines:
color: global.light_color
width: [[12, 0.5px], [13, 0.75px], [15, 1.0px]]
aerialway:
filter: { kind: aerialway }
draw:
lines:
color: global.mid_color
width: [[14, 0.5px], [15, 1.0px], [16, 2m]]
gondola_cable_car:
filter: { kind_detail: [gondola, cable_car] }
draw:
lines:
color: global.midlight_color
width: [[12, 0.5px], [14, 0.6px], [16, 2px]]
chair_lift:
filter: { kind_detail: chair_lift }
draw:
lines:
color: global.midlight_color
width: [[12, 0.5px], [14, 0.6px], [16, 2px], [18, 3m]]
aerialway-labels:
filter: { $zoom: { min: 14 } }
draw:
text-blend-order:
priority: 63
visible: global.text_visible_aerialway
text_source: name
font:
fill: global.black_color
size: 10px
stroke: { color: global.white_color, width: 4 }
minor:
filter: { not: { kind_detail: [gondola,cable_car,chair_lift] }, $zoom: { max: 17 } }
draw:
text-blend-order:
visible: false
later:
filter: { $zoom: { min: 15 } }
draw:
text-blend-order:
font:
weight: 600
railway:
filter: { kind: rail, not: { kind_detail: [subway,light_rail,tram] } }
draw:
railway_dash:
color: [[12, global.lightest_color], [17, global.light_color]]
width: [[12, 0px], [12, 0.5px], [18, 4px], [20, 2m]]
# let roads sort themselves past zoom 14
order: global.feature_order
# but give them all the same outline
outline:
order: 354
bridges-tunnels:
filter: { any: [is_bridge: true, is_tunnel: true] }
draw:
lines:
outline:
# except bridges and tunnels, their outlines should also self-sort
order: function() { return feature.sort_rank || 305; }
service:
filter: { service: true }
draw:
lines:
color: global.light_color
width: [[14,0px],[15,0.5px],[16,0.75px],[17,1px],[18,1px]]
buildings:
data: { source: mapzen, layer: buildings }
filter:
not: { location: underground }
# set default footprint and extrusion draw properties, but don't draw by default (rules below will turn visibility on)
draw:
polygons:
visible: false
order: 329
color: global.white_color
lines:
visible: false
style: lines
order: 330
color: [[14, global.light_color], [16, global.midlight_color], [19, global.dark_color]]
width: [[14, 0.3px], [15, 0.5px], [16, 0.75px],[18, 0.75px], [19, 1px]]
# building footprints, pre-extrusion
footprints:
filter:
any:
- { $zoom: [13], scale_rank: [1,2] }
- { $zoom: [14], scale_rank: [1,2,3] }
- { $zoom: [15], height: { min: 100 } }
- { $zoom: [15], area: { min: 500 } }
- { $zoom: [15], volume: { min: 100000 } }
- { $zoom: [16], area: { min: 100 } }
- { $zoom: [16], volume: { min: 50000 } }
- { $zoom: { min: 17 }, area: true }
draw:
polygons:
visible: false
lines:
visible: false
# 3d buildings
extrude:
filter:
all:
- function() { return global.sdk_building_extrude; }
- any:
- { $zoom: [15], height: { min: 190 } }
- { $zoom: [15], area: { min: 5000 } }
- { $zoom: [15], volume: { min: 100000 } }
- { $zoom: [16], height: { min: 100 } }
- { $zoom: [16], area: { min: 3500 } }
- { $zoom: [16], volume: { min: 50000 } }
- { $zoom: [17], area: { min: 500 } }
- { $zoom: [17], volume: { min: 15000 } }
- { $zoom: { min: 18 } }
- not:
- layer: [-1, -2, -3, -4, -5]
draw:
polygons:
visible: false
order: 438
style: building-grid
extrude: global.building_extrude_height
# color: global.white_color
lines:
visible: false
order: 439
style: building-lines
extrude: global.building_extrude_height
basement:
filter:
all:
- layer: [-1, -2, -3, -4, -5]
draw:
lines:
color: global.lightest_color
building-labels:
filter:
all:
- { $zoom: { min: 16 } }
- $geometry: point
- kind: [false, building, university, college, school, kindergarten]
- function() { return global.text_visible_building; }
any:
- { $zoom: [16], area: { min: 5000 }, name: true }
- { $zoom: [16], area: { min: 5000 }, kind: true }
- { $zoom: [16], area: { min: 10000 }, landuse_kind: true }
- { $zoom: [16], area: { min: 7000 }, kind: [university, college, school, kindergarten] }
- { $zoom: [16], volume: { min: 50000 }, name: true }
- { $zoom: [17], area: { min: 3000 }, name: true }
- { $zoom: [17], area: { min: 2000 }, kind: [university, college, school, kindergarten] }
- { $zoom: [18], area: { min: 1000 }, name: true }
- { $zoom: [18], kind: [university, college, school, kindergarten] }
- { $zoom: [19], area: { min: 200 }, name: true }
- { $zoom: { min: 19 }, kind: [university, college, school, kindergarten] }
- { $zoom: { min: 20 }, name: true }
draw:
text-blend-order:
interactive: global.sdk_interactive
text_source: global.ux_language_text_source_building_and_address
move_into_tile: true
priority: 51
order: 7
font:
fill: global.dark_color
family: global.text_font_family
style: italic
size: 11px
stroke: { color: global.white_color , width: 4 }
building_labels-z15-z16:
filter: { $zoom: [15,16] }
draw: { text-blend-order: { font: { size: 9px, stroke: { width: 3 } } } }
building_labels-z17-z18:
filter: { $zoom: [17,18] }
draw: { text-blend-order: { font: { size: 11px, stroke: { width: 3 } } } }
building_labels-z19-up:
filter: { $zoom: [19,20] }
draw: { text-blend-order: { font: { size: 12px, 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: function() { if( feature.addr_housenumber ) { return feature.name + '\n' + feature.addr_housenumber; } else { return feature.name; } }
address-labels:
filter:
all:
- $zoom: { min: 20 }
- function() { return global.text_visible_address; }
any:
- kind: address
- { label_position: true, addr_housenumber: true, name: false }
draw:
text-blend-order:
interactive: global.sdk_interactive
order: 7
text_source: addr_housenumber
font:
fill: global.mid_color
family: global.text_font_family
style: italic
size: 11px
stroke: { color: global.white_color, width: 4 }
boundaries:
data: { source: mapzen, layer: boundaries }
# country subdivisions (states, provinces)
draw:
lines:
order: global.feature_order
country:
filter:
any:
- kind: country
- admin_level: 2
draw:
country-outerline:
style: lines
order: function() { return (feature.sort_rank -1); }
color: [[0, global.lightest_color], [8, global.lighter_color]]
width: [[0, 0px], [6, 4px], [14, 7px], [17, 14m]]
lines:
color: global.white_color
width: [[0, 0px], [5, 0px], [6, 1px]]
water:
filter: { maritime_boundary: true }
draw:
country-outerline:
visible: false
lines:
visible: false
country-labels:
filter: { name: true, $zoom: { min: 8 }, not: { maritime_boundary: true } }
draw:
text-blend-order:
priority: 2
visible: global.text_visible_admin
text_source: global.ux_language_text_source_boundary_lines_left_right
offset: [[8,[0, 7px]],[11,[0, 8px]],[12,[0, 9px]]]
text_wrap: 100
font:
family: global.text_font_family
size: 10px
fill: global.black_color
transform: uppercase
other_country_boundary_disputed_etc:
filter: { kind: [disputed, indefinite, indeterminate, lease_limit, line_of_control, overlay_limit] }
draw:
dashed:
order: global.feature_order
color: global.lighter_color
width: [[1,0.2px],[9,1.5px],[17,10m]]
disputed:
filter: { kind: [disputed, line_of_control] }
draw:
dashed:
visible: false
dashed_big:
order: global.feature_order
color: global.lighter_color
width: [[1, 0.5px], [9, 2.5px], [17,14m]]
region:
filter:
any:
- kind: [region,macroregion]
- kind_detail: [3,4]
draw:
lines:
color: global.ultralight_color
width: [[0, 0.5px], [5, 2px], [9, 4px], [14, 5.5px], [16, 6.5px], [17, 16m]]
water:
filter: { maritime_boundary: true }
draw:
lines:
visible: false
early:
filter: { not: { min_zoom: [1,2] }, $zoom: { max: 8 } }
draw:
lines:
visible: false
region-labels:
filter: { name: true, $zoom: { min: 9 }, not: { maritime_boundary: true } }
draw:
text-blend-order:
priority: 3
visible: global.text_visible_admin
text_source: global.ux_language_text_source_boundary_lines_left_right
offset: [[8,[0, 5px]], [11, [0, 6px]], [12,[0, 7px]]]
text_wrap: 100
# offset: [0px, 10px]
# anchor: top
font:
family: global.text_font_family
size: 9px
fill: global.mid_color
transform: uppercase
places:
data: { source: mapzen, layer: places }
filter:
name: true
draw:
colorized-icons:
text:
text_source: global.ux_language_text_source
visible: false
buffer: 3px
font:
family: global.text_font_family
fill: global.black_color
# NOTE: This is a hack for localities because of an icon & text bug, see note below
text-blend-order:
text_source: global.ux_language_text_source
visible: false # labels are enabled by each layer below
buffer: 3px
font:
family: global.text_font_family
fill: global.black_color
# END NOTE
country:
filter:
kind: country
$zoom: { min: 2, max: 9 }
draw:
text-blend-order:
priority: 3
visible: global.text_visible_admin
text_source: global.ux_language_text_source
font:
fill: global.black_color
weight: 600
stroke: { color: global.white_color, width: 4 }
country-z2-3:
filter:
$zoom: [2,3]
draw:
text-blend-order:
priority: 10
buffer: 10px
font:
weight: 300
size: 11px
early-ones-z2:
filter:
$zoom: [2]
not: { name: [United States of America,Brasil,中华人民共和国,Россия,Canada,Kalaallit Nunaat,Ísland,Australia,India,日本,Guam,Indonesia,South Africa,مصر,Nigeria,Kenya] }
draw:
text-blend-order:
visible: false
early-ones-z3:
filter:
$zoom: [3]
name: [Nederland,Luxembourg,Liechtenstein,San Marino,Civitatis Vaticanæ,Crna Gora,Македонија,The Gambia,Burundi,Swaziland,الإمارات العربية المتحدة,العراق,Singapore,El Salvador,Belize,Trinidad and Tobago, Saint Lucia, Montserrat,Anguilla,República Dominicana,Bahamas,British Virgin Islands,Antigua and Barbuda,Grenada,Sint Maarten,Saint Kitts and Nevis,Cayman Islands,België - Belgique - Belgien,Deutschland,España]
draw:
text-blend-order:
visible: false
country-z4:
filter:
$zoom: [4]
draw:
text-blend-order:
buffer: 10px
priority: 8
font:
weight: 300
size: 13px
early-ones-z4:
filter:
name: [Nederland,Luxembourg,Liechtenstein,San Marino,Civitatis Vaticanæ,Crna Gora,Македонија,The Gambia,Burundi,Swaziland,الإمارات العربية المتحدة,العراق,Singapore,El Salvador,Belize,Trinidad and Tobago, Saint Lucia, Montserrat,Anguilla,República Dominicana,Bahamas,British Virgin Islands,Antigua and Barbuda,Grenada,Sint Maarten,Saint Kitts and Nevis,Cayman Islands,België - Belgique - Belgien,Deutschland,España,Magyarország,Österreich,Polska,Хуссар Ирыстон,Аҧсны - Абхазия]
draw:
text-blend-order:
visible: false
country-z5:
filter:
$zoom: [5]
draw:
text-blend-order:
priority: 8
font:
size: 13px
early-ones-z5:
filter:
# South Ossetia and Abkhazia aren't countries (they are disputed areas)
- name: [Luxembourg,Liechtenstein,San Marino,Civitatis Vaticanæ,El Salvador,Belize,België - Belgique - Belgien,"Хуссар Ирыстон - Южная Осетия","Хуссар Ирыстон","Аҧсны - Абхазия","Լեռնային Ղարաբաղի Հանրապետությու (Nagorno-Karabakh Republic)"]
- population: { max: 5000000 }
draw:
text-blend-order:
visible: false
country-z6:
filter:
$zoom: [6]
draw:
text-blend-order:
priority: 8
font:
size: 14px
small-ones-z6:
filter:
# South Ossetia and Abkhazia aren't countries (they are disputed areas)
- name: [Luxembourg,Liechtenstein,San Marino,Civitatis Vaticanæ,België - Belgique - Belgien,"Хуссар Ирыстон - Южная Осетия","Хуссар Ирыстон","Аҧсны - Абхазия","Լեռնային Ղարաբաղի Հանրապետությու (Nagorno-Karabakh Republic)"]
- population: { max: 5000000 }
draw:
text-blend-order:
visible: false
country-z7:
# South Ossetia and Abkhazia aren't countries (they are disputed areas)
filter: { $zoom: { min: 7, max: 9 } }
draw:
text-blend-order:
font:
size: [[7,18px],[9,24px]]
small-ones-z7:
filter:
$zoom: [7]
# South Ossetia and Abkhazia aren't countries (they are disputed areas)
name: [Liechtenstein,San Marino,Civitatis Vaticanæ,"Хуссар Ирыстон - Южная Осетия","Хуссар Ирыстон","Аҧсны - Абхазия","Լեռնային Ղարաբաղի Հանրապետությու (Nagorno-Karabakh Republic)"]
draw:
text-blend-order:
visible: false
small-pop:
filter:
- population: { max: 5000000 }
draw:
text-blend-order:
priority: 30
font:
size: 12px
region:
filter:
kind: region
$zoom: { min: 4, max: 9 }
draw:
text-blend-order:
priority: 14
visible: false
text_source: global.ux_language_text_source_short
font:
size: 11px
weight: normal
fill: [[4, global.light_color], [9, global.midlight_color]]
stroke: { color: global.white_color, width: 4 }
region-z4:
filter:
$zoom: [4]
not: { name: [Western Cape,Eastern Cape,Northern Cape,North West,Limpopo,KwaZulu-Natal,Hamburg,Freie und Hansestadt Hamburg,Neuchâtel,Nordrhein-Westfalen,Haute-Normandie,Baden-Württemberg,Bayern,Sachsen-Anhalt,Berlin,Mecklenburg-Vorpommern,Schleswig-Holstein,Brandenburg,Niedersachsen,Saarland,Thüringen,Hessen,Sachsen] }
draw:
text-blend-order:
visible: global.text_visible_admin
# font:
# fill: [0.70,0.70,0.70]
region-z5:
filter:
$zoom: [5]
not: { name: [Western Cape,Eastern Cape,Northern Cape,North West,Limpopo,KwaZulu-Natal,Hamburg,Freie und Hansestadt Hamburg,Neuchâtel,Nordrhein-Westfalen,Haute-Normandie,Baden-Württemberg,Bayern,Sachsen-Anhalt,Berlin,Mecklenburg-Vorpommern,Schleswig-Holstein,Brandenburg,Niedersachsen,Saarland,Thüringen,Hessen,Sachsen] }
draw:
text-blend-order:
visible: global.text_visible_admin
font:
size: 18px
weight: 300
region-z6:
filter:
$zoom: [6]
not: { name: [Western Cape,Eastern Cape,Northern Cape,North West,Limpopo,KwaZulu-Natal,Hamburg,Freie und Hansestadt Hamburg,Neuchâtel,Nordrhein-Westfalen,Haute-Normandie,Baden-Württemberg,Bayern,Sachsen-Anhalt,Berlin,Mecklenburg-Vorpommern,Schleswig-Holstein,Brandenburg,Niedersachsen,Saarland,Thüringen,Hessen,Sachsen] }
draw:
text-blend-order:
visible: global.text_visible_admin
font:
size: 21px
weight: 300
transform: uppercase
region-z7-z8:
filter: { $zoom: [7,8] }
draw:
text-blend-order:
visible: global.text_visible_admin
text_source: global.ux_language_text_source_short_proxy_name
font:
size: 30px
weight: 300
transform: uppercase
pesky:
filter:
$zoom: [7]
name: [Western Cape,Eastern Cape,Northern Cape,North West,Limpopo,KwaZulu-Natal,Hamburg,Freie und Hansestadt Hamburg,Neuchâtel,Nordrhein-Westfalen,Haute-Normandie,Baden-Württemberg,Bayern,Sachsen-Anhalt,Berlin,Mecklenburg-Vorpommern,Schleswig-Holstein,Brandenburg,Niedersachsen,Saarland,Thüringen,Hessen,Sachsen]
draw:
text-blend-order:
visible: false
abbrev-small-ones-z7:
filter:
$zoom: [7]
name: [Delaware,New Jersey,Connecticut,Rhode Island,Massachusetts,New Hampshire,Vermont]
draw:
text-blend-order:
text_source: global.ux_language_text_source_abbreviation
font: { transform: uppercase }
region-z8:
filter:
$zoom: [8]
draw:
text-blend-order:
text_source: global.ux_language_text_source
no-pop:
filter:
any:
- population: false
- population: { max: 1000000 }
draw:
text-blend-order:
font:
size: 16px
populated-places:
filter:
kind: locality
draw:
colorized-icons:
visible: global.icon_visible_populated_places
size: [[10,4px],[11,0px]]
sprite: townspot-xs-rev
buffer: 8px
priority: 30
text:
visible: global.text_visible_populated_places
buffer: 3px
font:
size: [[5,9px],[8,10px],[12,11px]]
stroke: { color: global.white_color, width: 4 }
# fill: global.text_fill
text-blend-order:
visible: global.text_visible_populated_places
buffer: 10px
font:
size: [[5,9px],[8,10px],[12,11px]]
stroke: { color: global.white_color, width: 4 }
# fill: global.text_fill
#
# NOTE: you'd think no-townspot would be the way to go, but icons with size 0px seems to have a bug to also hide the text :(
#
# no-townspot:
# filter: { $zoom: { min: 11 } }
# draw:
# colorized-icons:
# size: 0px
# text:
# anchor: center
#
# NOTE: So instead we play a shell game with symbolizers per zoom
#
_icons_later:
filter: { $zoom: { min: 11 } }
draw:
colorized-icons:
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:
colorized-icons:
buffer: 25px
#color: red
#visible: false
z9-10k-below:
filter: { $zoom: [8,9], population: { max: 10000 } }
draw:
colorized-icons:
buffer: 18px
#color: blue
#visible: false
z9-no-population:
filter: { $zoom: [8,9], population: false }
draw:
colorized-icons:
buffer: 10px
#color: yellow
#visible: false
sorry-denver:
filter:
$zoom: [3]
name: [Denver]
draw:
colorized-icons:
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:
colorized-icons:
size: [[4,5px],[8,6px],[9,0px]]
sprite: townspot-m-rev
priority: 6
text:
font:
size: [[2,11px],[6,15px],[8,18px],[10,20px],[12,20px],[13,0px]]
text-blend-order:
priority: 6
font:
size: [[2,11px],[6,15px],[8,18px],[10,20px],[12,20px],[13,0px]]
capital:
filter: { country_capital: true, $zoom: { min: 5 } }
draw:
colorized-icons:
size: [[10,8px],[11,0px]]
sprite: capital-l
priority: 5
text-blend-order:
priority: 5
population-5m-10m:
filter:
population: { min: 5000000, max: 10000000 }
draw:
colorized-icons:
size: [[4,5px],[8,6px],[9,0px]]
sprite: townspot-m-rev
priority: 7
text:
font:
size: [[4,10px],[6,14px],[8,18px],[10,20px],[12,20px],[13,0px]]
text-blend-order:
priority: 7
font:
size: [[4,10px],[6,14px],[8,18px],[10,20px],[12,20px],[13,0px]]
capital:
# we only want townspots to show as capital dots starting at zoom 5
filter: { country_capital: true, $zoom: { min: 5 } }
draw:
colorized-icons:
size: [[10,8px],[11,0px]]
sprite: capital-l
priority: 6
text-blend-order:
priority: 6
population-1m-5m:
filter:
population: { min: 1000000, max: 5000000 }
draw:
colorized-icons:
size: [[4,5px],[8,6px],[9,0px]]
sprite: townspot-m-rev
priority: 9
text:
font:
size: [[4,10px],[6,14px],[8,15px],[12,18px],[13,0px]]
text-blend-order:
priority: 9
font:
size: [[4,10px],[6,14px],[8,15px],[12,18px],[13,0px]]
capital:
# we only want townspots to show as capital dots starting at zoom 5
filter: { country_capital: true, $zoom: { min: 5 } }
draw:
colorized-icons:
size: [[10,8px],[11,0px]]
sprite: capital-l
priority: 8
text-blend-order:
priority: 8
population-500k-1m:
filter:
population: { min: 500000, max: 1000000 }
draw:
colorized-icons:
size: [[8,6px],[9,0px]]
sprite: townspot-m-rev
priority: 11
text:
font:
size: [[5,10px],[8,12px],[10,14px],[12,16px],[13,0px]]
text-blend-order:
priority: 11
font:
size: [[5,10px],[8,12px],[10,14px],[12,16px],[13,0px]]
capital:
filter: { country_capital: true, $zoom: { min: 5 } }
draw:
colorized-icons:
size: [[10,6px],[11,0px]]
sprite: capital-m
priority: 10
text-blend-order:
priority: 10
population-200k-500k:
filter:
population: { min: 200000, max: 500000 }
draw:
colorized-icons:
size: [[8,6px],[9,6px],[10,6px],[11,0px]]
sprite: townspot-m-rev
priority: 13
collide: false #debug
text:
font:
size: [[6,10px],[8,14px],[10,15px],[12,16px],[13,0px]]
text-blend-order:
priority: 13
font:
size: [[6,10px],[8,14px],[10,15px],[12,16px],[13,0px]]
capital:
filter: { country_capital: true, $zoom: { min: 5 } }
draw:
colorized-icons:
size: [[10,6px],[11,0px]]
sprite: capital-m
priority: 12
text-blend-order:
priority: 12
population-100k-200k:
filter:
population: { min: 100000, max: 200000 }
draw:
colorized-icons:
size: [[8,6px],[9,6px],[10,6px],[11,0px]]
sprite: townspot-m-rev
priority: 15
text:
font:
size: [[6,10px],[8,12px],[14,14px],[15,0px]]
text-blend-order:
priority: 15
font:
size: [[6,10px],[8,12px],[14,14px],[15,0px]]
capital:
filter: { country_capital: true, $zoom: { min: 5 } }
draw:
colorized-icons:
size: [[10,6px],[11,0px]]
sprite: capital-m
priority: 14
text-blend-order:
priority: 14
population-50k-100k:
filter:
population: { min: 50000, max: 100000 }
draw:
colorized-icons:
size: [[8,5px],[9,5px],[10,6px],[11,0px]]
sprite: townspot-s-rev
priority: 17
text:
font:
size: [[6,10px],[8,12px],[14,14px],[15,0px]]
text-blend-order:
priority: 17
font:
size: [[6,10px],[8,12px],[14,14px],[15,0px]]
capital:
filter: { country_capital: true, $zoom: { min: 5 } }
draw:
colorized-icons:
size: [[10,5px],[11,0px]]
sprite: capital-m
priority: 16
text-blend-order:
priority: 16
population-20k-50k:
filter:
population: { min: 20000, max: 50000 }
draw:
colorized-icons:
size: [[8,5px],[9,5px],[10,5px],[11,0px]]
sprite: townspot-s-rev
priority: 19
text:
font:
size: [[9,10px],[14,12px],[15,0px]]
text-blend-order:
priority: 19
font:
size: [[9,10px],[14,12px],[15,0px]]
capital:
filter: { country_capital: true, $zoom: { min: 5 } }
draw:
colorized-icons:
size: [[10,5px],[11,0px]]
sprite: capital-s
priority: 18
text-blend-order:
priority: 18
population-10k-20k:
filter:
population: { min: 10000, max: 20000 }
draw:
colorized-icons:
size: [[8,4px],[9,4px],[10,4px],[11,0px]]
sprite: townspot-xs-rev
priority: 21
text:
font:
fill: [[9, global.dark_color], [11, global.black_color]]
size: [[9, 10px], [14, 12px], [15, 0px]]
text-blend-order:
priority: 21
font:
fill: [[9, global.dark_color], [11, global.black_color]]
size: [[9, 10px],[14, 12px],[15, 0px]]
capital:
filter: { country_capital: true, $zoom: { min: 5 } }
draw:
colorized-icons:
size: [[10,5px],[11,0px]]
sprite: capital-s
priority: 20
text-blend-order:
priority: 20
population-5k-10k:
filter:
population: { min: 5000, max: 10000 }
draw:
colorized-icons:
size: [[8,4px],[9,4px],[10,4px],[11,0px]]
sprite: townspot-xs-rev
priority: 23
text:
font:
fill: [[9, global.dark_color], [11, global.black_color]]
size: [[9,10px], [14,12px], [15,0px]]
text-blend-order:
priority: 23
font:
fill: [[9, global.dark_color], [11, global.black_color]]
size: [[9,10px], [14,12px], [15,0px]]
capital:
filter: { country_capital: true, $zoom: { min: 5 } }
draw:
colorized-icons:
size: [[10,5px],[11,0px]]
sprite: capital-s
priority: 22
text-blend-order:
priority: 22
population-2k-5k:
filter:
population: { min: 2000, max: 5000 }
draw:
colorized-icons:
size: [[8,4px],[9,4px],[10,4px],[11,0px]]
sprite: townspot-xs-rev
priority: 25
text:
font:
fill: [[9, global.dark_color],[11, global.black_color]]
size: [[9,10px], [14,12px], [15,0px]]
text-blend-order:
priority: 25
font:
fill: [[9, global.dark_color],[11, global.black_color]]
size: [[9,10px], [14,12px], [15,0px]]
capital:
filter: { country_capital: true, $zoom: { min: 5 } }
draw:
colorized-icons:
size: [[10,5px],[11,0px]]
sprite: capital-s
priority: 24
text-blend-order:
priority: 24
population-1k-2k:
filter:
population: { min: 1000, max: 2000 }
draw:
colorized-icons:
size: [[8,4px],[9,4px],[10,4px],[11,0px]]
sprite: townspot-xs-rev
priority: 27
text:
font:
fill: [[9, global.dark_color], [11, global.black_color]]
size: [[9,10px], [14,12px], [15,0px]]
text-blend-order:
priority: 27
font:
fill: [[9, global.dark_color], [11, global.black_color]]
size: [[9, 10px], [14, 12px], [15, 0px]]
capital:
filter: { country_capital: true, $zoom: { min: 5 } }
draw:
colorized-icons:
size: [[10,5px],[11,0px]]
sprite: capital-s
priority: 26
text-blend-order:
priority: 26
population-200-1k:
filter:
population: { min: 200, max: 1000 }
draw:
colorized-icons:
size: [[8,4px],[9,4px],[10,4px],[11,0px]]
sprite: townspot-xs-rev
priority: 28
text:
font:
fill: [[9, global.dark_color],[11, global.black_color]]
size: [[9, 10px], [14, 11px], [15, 0px]]
text-blend-order:
priority: 28
font:
fill: [[9, global.dark_color],[11, global.black_color]]
size: [[9, 10px], [14, 11px], [15, 0px]]
capital:
filter: { country_capital: true, $zoom: { min: 5 } }
draw:
colorized-icons:
size: [[10,5px],[11,0px]]
sprite: capital-s
priority: 27
text-blend-order:
priority: 27
neighbourhoods:
filter:
kind:
- macrohood
- neighbourhood
- borough
$zoom: { min: 10 }
is_landuse_aoi: false
draw:
text-blend-order:
visible: false
priority: 29
buffer: 8px
text_wrap: 10
max_lines: 2
font:
fill: global.mid_color
transform: uppercase
stroke: { color: global.white_color, width: 4 }
neighborhood-z11:
filter:
$zoom: [11]
min_zoom: [11]
max_zoom: { min: 12 }
#- kind_tile_rank: { max: 6 }
draw:
text-blend-order:
visible: global.text_visible_neighbourhoods_e
font:
size: 9px
weight: normal
neighborhood-z12:
filter:
$zoom: [12]
min_zoom: [11,12]
max_zoom: { min: 13 }
#- kind_tile_rank: { max: 8 }
draw:
text-blend-order:
visible: global.text_visible_neighbourhoods_e
font:
size: 10px
weight: normal
neighborhood-z13:
filter:
$zoom: [13]
min_zoom: [11,12,13]
max_zoom: { min: 14 }
kind_tile_rank: { max: 8 }
draw:
text-blend-order:
visible: global.text_visible_neighbourhoods_e
font:
size: 12px
weight: 300
stroke: { color: global.white_color, width: 6 }
neighborhood-z14:
filter:
$zoom: [14]
min_zoom: [11,12,13,14]
max_zoom: { min: 15 }
kind_tile_rank: { max: 8 }
draw:
text-blend-order:
text_wrap: 12
visible: global.text_visible_neighbourhoods
font:
size: 16px
weight: 300
stroke: { color: global.white_color, width: 6 }
neighborhood-z15:
filter:
$zoom: [15]
min_zoom: [11,12,13,14,15]
max_zoom: { min: 16 }
kind_tile_rank: { max: 8 }
draw:
text-blend-order:
text_wrap: 12
visible: global.text_visible_neighbourhoods
font:
size: 21px
weight: 300
fill: global.mid_color
stroke: { color: global.white_color, width: 8 }
z15-new:
filter:
all:
- min_zoom: 15
draw:
text-blend-order:
priority: 19
font:
size: 13px
neighborhood-z16:
filter:
$zoom: [16]
min_zoom: [11,12,13,14,15,16]
max_zoom: { min: 17 }
kind_tile_rank: { max: 8 }
draw:
text-blend-order:
visible: global.text_visible_neighbourhoods
font:
size: 24px
weight: 300
fill: global.mid_color
stroke: { color: global.white_color, width: 8 }
pois:
data: { source: mapzen, layer: pois }
#visible: global.label_visible_poi_landuse
filter:
all:
- not: { kind: [building,address,farm,tree,apron,residential,commercial,industrial] }
# White list a few kinds to "always" show per the tile zoom inclusion, else test feature's min_zoom
#- function() { return feature.min_zoom <= $zoom }
- function() { if( feature.kind == 'restaurant' || feature.kind == 'landmark' || feature.kind == 'cafe' ) { return true } else { return feature.min_zoom <= $zoom } }
draw:
colorized-icons:
visible: global.icon_visible_poi_landuse
size: global.icon_size
sprite: function() { return feature.kind; }
sprite_default: generic
interactive: global.sdk_interactive
priority: 65 #function() { return (feature.min_zoom && Math.floor(feature.min_zoom * 1000)) || 65; }
repeat_group: abc
buffer: 3px
text:
visible: global.text_visible_poi_landuse
text_source: global.ux_language_text_source
buffer: 3px
text_wrap: 18
max_lines: 3
font:
family: global.text_font_family
weight: normal
fill: global.dark_color
size: [[13, 10px], [14, 11px], [17, 12px], [19, 12px], [20, 14px]]
stroke: { color: global.white_color, width: [[12,2px],[16,4px]] }
# improve legibility at high zooms
poi_labels-z18:
filter: { $zoom: { min: 18 } }
draw:
colorized-icons:
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:
colorized-icons:
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:
colorized-icons:
sprite: function() { return feature.religion; }
sprite_default: place_of_worship
# TODO: some or all of this may be unnecessary for the sprite, but is necessary for the early filter
building-icon:
filter:
kind: [apartments, auditorium, building, hangar, manor, recreation_center, retirement_home, terminal]
draw:
colorized-icons:
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:
colorized-icons:
visible: false
#end different icon sprites
#most POI icons without name should be hidden, except these
no-name:
filter: { name: false }
draw:
colorized-icons:
visible: false
# eg park polygons in SF that have area but no name, sigh
no-name-no-area:
filter:
kind: true
name: false
draw:
colorized-icons:
visible: false
sports-pitch:
filter:
$zoom: { min: 17 }
kind: [grass, pitch]
kind_detail: [baseball, basketball, football, hockey, soccer, tennis]
draw:
colorized-icons:
visible: global.icon_visible_poi_landuse_e
priority: 69
z17:
filter:
$zoom: { min: 17 }
kind: [parking]
draw: { colorized-icons: { visible: global.icon_visible_poi_landuse_e } }
z18:
# for different styles, different sets
# since [picnic_site] doesn't have bubble-wrap icon, it's omitted here
filter:
$zoom: { min: 18 }
kind: [drinking_water, information, playground, toilets, traffic_signals]
draw: { colorized-icons: { visible: global.icon_visible_poi_landuse_e } }
z19:
filter:
$zoom: { min: 19 }
kind: [bicycle_parking]
draw: { colorized-icons: { visible: global.icon_visible_poi_landuse_e } }
# NOTE: all natural_* should only be in landuse layer
suppress-icon-always:
filter:
kind: [natural_forest, natural_park, natural_wood]
draw:
colorized-icons:
size: 0px
priority: 100
text:
font:
fill: global.mid_color
family: global.text_font_family
style: italic
size: 11px
suppress-icon-z17:
filter:
$zoom: { min: 17 }
kind: [common, grass, houseboat, pedestrian, railway, ship, wetland]
draw:
colorized-icons:
size: 0px
#visible: false
text: { font: { style: italic } }
# the server should be setting better values here
z-server-friend:
hide-until-z12-any:
filter:
kind: [landmark, museum, prison]
$zoom: { max: 12 }
draw:
colorized-icons:
visible: false
hide-until-z14-any:
filter:
kind: [natural_forest, natural_park, natural_wood, post_office]
$zoom: { max: 14 }
draw:
colorized-icons:
visible: false
hide-until-z15-any:
filter:
$zoom: { max: 15 }
kind: [cafe, restaurant]
draw:
colorized-icons:
visible: false
hide-until-z15-no-area:
filter:
area: false
$zoom: { max: 15 }
kind: [park]
draw:
colorized-icons:
visible: false
hide-until-z15-with-area:
filter:
area: true
$zoom: { max: 15 }
kind: [nursing_home]
draw:
colorized-icons:
visible: false
hide-until-z16-any:
filter:
kind: [fire_station, grass, peak, police, tram_stop]
$zoom: { max: 16 }
draw:
colorized-icons:
visible: false
hide-until-z16-no-area:
filter:
area: false
kind: [allotments, college, garden, university]
$zoom: { max: 16 }
draw:
colorized-icons:
visible: false
# no POIs for commercial, residential
hide-until-z17-any:
filter:
$zoom: { max: 17 }
kind: [bank, bus_stop, car_sharing, wood]
draw:
colorized-icons:
visible: false
hide-until-z17-with-area:
filter:
area: true
$zoom: { max: 17 }
kind: [common, grass, houseboat, pedestrian, pitch, railway, ship, wetland]
draw:
colorized-icons:
visible: false
hide-until-z17-no-area:
filter:
area: false
$zoom: { max: 17 }
# note: atm and drinking_water appear hear and in area versions
kind: [accountant, administrative, advertising_agency, animal, architect, association, atm, bakery, bed_and_breakfast, bicycle, bicycle_parking, bicycle_rental_station, books, butcher, car, car_repair, chalet, clothes, company, computer, consulting, convenience, doityourself, drinking_water, dry_cleaning, educational_institution, emergency_phone, employment_agency, estate_agent, fashion, financial, florist, foundation, gift, government, greengrocer, guest_house, hairdresser, hostel, hotel, insurance, it, jewelry, lawyer, mast, memorial, mobile_phone, motel, newspaper, ngo, notary, optician, parking, pet, physician, playground, political_party, post_box, religion, research, subway_entrance, tax_advisor, telecommunication, telephone, theatre, therapist, toilets, traffic_signals, travel_agent, water_tower]
draw:
colorized-icons:
visible: false
hide-until-z18-any:
filter:
kind: [atm, bus_stop, drinking_water]
$zoom: { max: 18 }
draw:
colorized-icons:
visible: false
hide-until-z18-no-area:
filter:
$zoom: { max: 18 }
area: false
kind: [bench, parking, waste_basket]
draw:
colorized-icons:
visible: false
hide-until-z19-any:
filter:
$zoom: { max: 19 }
kind: [bicycle_parking, burial_vault, car_sharing]
draw:
colorized-icons:
visible: false
# hide based on kind and area filters
military-early:
filter:
kind: [military]
any:
# show labels for smaller landuse areas at higher zooms
- { $zoom: [8], area: { max: 50000000 } }
draw:
colorized-icons:
visible: false
university-early:
filter:
kind: [university, college]
any:
# show labels for smaller landuse areas at higher zooms
- { $zoom: [11], area: { max: 2000000 } }
- { $zoom: [12], area: { max: 500000 } }
draw:
colorized-icons:
visible: false
school-early:
filter:
kind: [school, kindergarten]
any:
# show labels for smaller landuse areas at higher zooms
- { $zoom: [13], area: { max: 100000 } }
- { $zoom: [14], area: { max: 50000 } }
- { $zoom: [15], area: { max: 10000 } }
- { $zoom: [16], area: { max: 5000 } }
- { $zoom: [17], area: { max: 2000 } }
draw:
colorized-icons:
visible: false
garden-area-early:
filter:
kind: [garden, allotments]
any:
# limit show smaller landuse areas to higher zooms
- { $zoom: [12], area: { max: 500000 } }
- { $zoom: [13], area: { max: 100000 } }
- { $zoom: [14], area: { max: 10000 } }
- { $zoom: [15], area: { max: 5000 } }
draw:
colorized-icons:
visible: false
cemetery-early:
filter:
kind: [cemetery]
# limit show smaller landuse areas to higher zooms
any:
- { $zoom: [12], area: { max: 3000000 } }
draw:
colorized-icons:
visible: false
golf_course-early:
filter:
kind: golf_course
any:
- { $zoom: [12], area: { max: 2500000 } }
draw:
colorized-icons:
visible: false
office-early:
filter:
- { kind: [insurance, office, company], $zoom: [15], area: { max: 10000 } }
- { kind: [insurance, office, company], $zoom: [16], area: { max: 5000 } }
draw:
colorized-icons:
visible: false
landuse-labels-green-areas-not-national-park:
filter:
kind: [park, conservation, protected_area, nature_reserve, forest, grass]
any:
# show labels for smaller landuse areas at higher zooms
- { $zoom: { max: 6 }, area: true }
- { $zoom: [6], area: { max: 5000000000 } }
- { $zoom: [7], area: { max: 5000000000 } }
- { $zoom: [8], area: { max: 1000000000 } }
- { $zoom: [9], area: { max: 100000000 } }
- { $zoom: [10], area: { max: 50000000 } }
- { $zoom: [11], area: { max: 25000000 } }
- { $zoom: [12], area: { max: 5000000 } }
- { $zoom: [13], area: { max: 200000 } }
- { $zoom: [14], area: { max: 50000 } }
- { $zoom: [15], area: { max: 10000 } }
- { $zoom: [16], area: { max: 1000 } }
draw:
colorized-icons:
visible: false
wilderness-areas-early:
filter: function() { return $zoom < 9 && feature.name && (feature.name.indexOf("Wilderness") > -1 || feature.name.indexOf("BLM") > -1 || feature.protect_class == '1' || feature.protect_class == '1a' || feature.protect_class == '1b' ); }
draw:
colorized-icons:
visible: false
not-national-park:
filter: function() { return feature.name && !((feature.name.indexOf("National Park") > -1) || feature.name.indexOf("National Monument") > -1); }
early:
filter: { $zoom: { max: 8 } }
draw:
colorized-icons:
visible: false
landuse-labels-not-any-above:
filter:
$zoom: { max: 6 }
not: { kind: [aerodrome, airport, allotments, aquarium, attraction, battlefield, beach, cemetery, college, conservation, forest, garden, glacier, golf_course, grass, kindergarten, landmark, maze, national_park, nature_reserve, park, playground, protected_area, resort, school, stadium, station, theme_park, university, winery, winter_sports, zoo] }
draw:
colorized-icons:
visible: false
glacier:
filter: { $zoom: { max: 14 }, kind: glacier, area: false }
draw:
colorized-icons:
visible: false
# set special priority, sprite, and text styles per kind
has-area:
filter: { area: true }
draw:
colorized-icons:
priority: 41
national-park-protected-areas:
filter:
kind: [national_park, battlefield]
draw:
colorized-icons:
visible: global.icon_visible_landuse_green
size: global.icon_size_green
sprite: park
text:
visible: global.text_visible_landuse_green
font:
fill: global.dark_color
style: italic
# large park icon
# z14-parks:
# filter: { $zoom: { min: 14 } }
# draw:
# colorized-icons:
# sprite: park-l
# size: [[14,24px],[16,32px]]
parks:
filter:
- kind: [park, conservation, grass]
- { kind: protected_area, not: { protect_class: [6, '6'] } }
draw:
colorized-icons:
visible: global.icon_visible_landuse_green
size: global.icon_size_green
sprite: park
text:
visible: global.text_visible_landuse_green
font:
fill: global.dark_color
style: italic
only-text-later:
filter: { kind: [grass], $zoom: { min: 16 } }
draw:
colorized-icons:
size: 0px
text:
font:
style: italic
forest:
filter:
- kind: forest
- { kind: protected_area, protect_class: [6, '6'] }
draw:
colorized-icons:
visible: global.icon_visible_landuse_green
size: global.icon_size_green
sprite: forest
text:
visible: global.text_visible_landuse_green
font:
fill: global.dark_color
style: italic
beach:
filter:
kind: [beach]
draw:
colorized-icons:
visible: global.icon_visible_landuse_green
size: global.icon_size_green
text:
visible: global.text_visible_landuse_green
font:
fill: global.dark_color
airport:
filter:
kind: [airport, aerodrome]
draw:
colorized-icons:
priority: 42
visible: global.icon_visible_landuse_green
size: global.icon_size_green
text:
visible: global.text_visible_landuse_green
text_source: global.ux_language_text_source_iata
early:
filter: { $zoom: [9,10,11] }
draw: { colorized-icons: { text: { text_source: iata } } }
enclosure-related:
filter:
kind: [enclosure, animal]
draw:
colorized-icons:
priority: 43
size: 0px
#: dot-black
text:
text_wrap: 10
font:
style: italic
weight: normal
glacier:
filter:
kind: glacier
draw:
colorized-icons:
size: 0px
#visible: false
text:
visible: true
priority: 44
text_wrap: 10
font:
weight: normal
style: italic
fill: global.dark_color
landuse-labels-not-any-above:
filter:
not: { kind: [aerodrome, airport, allotments, aquarium, attraction, battlefield, beach, cemetery, college, conservation, forest, garden, glacier, golf_course, grass, kindergarten, landmark, maze, national_park, nature_reserve, park, playground, protected_area, resort, school, stadium, station, theme_park, university, winery, winter_sports, zoo] }
draw:
colorized-icons:
priority: 43
building-like:
filter: { kind: [commercial,residential,warehouse,public,dormitory], osm_relation: false }
draw:
colorized-icons:
sprite: building
station-train-subway:
filter: { kind: [station, train_station] }
draw:
colorized-icons:
visible: global.icon_visible_station
size: [[13, 12px], [14, 12px], [15, 16px], [17, 18px], [18, 20px]]
priority: 42
text:
visible: global.text_visible_station
station-early:
filter:
$zoom: { max: 11 }
draw:
colorized-icons:
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:
colorized-icons:
visible: false
low-priority-early-z13:
filter: { kind_tile_rank: { min: 5 }, $zoom: [13] }
draw:
colorized-icons:
visible: false
low-priority-early-z14:
filter: { kind_tile_rank: { min: 7 }, $zoom: [14] }
draw:
colorized-icons:
text: { visible: false }
garden-no-area-early:
filter: { kind: [garden, allotments], $zoom: [16], area: false }
draw:
colorized-icons:
priority: 45
size: 14px
text: { font: { size: 10px, style: italic } }
garden-no-area-later:
filter: { kind: [garden, allotments], $zoom: { min: 17 }, area: false }
draw:
colorized-icons:
priority: 45
size: 16px
text: { font: { size: 11px, style: italic } }
gate:
filter: { kind: gate, name: true }
draw: { colorized-icons: { sprite: generic } }
parking-labels:
filter:
kind: [parking]
$zoom: { min: 18 }
draw:
colorized-icons:
text:
visible: global.text_visible_poi_landuse
font:
size: 10px
tower:
filter: { kind: [tower], label_placement: true }
draw:
colorized-icons:
size: 0px
#visible: false
text:
font:
style: italic
# TODO: this isn't working, should see small icons near the transbay terminal in SF
bus_stop:
filter:
kind: [bus_stop]
draw:
colorized-icons:
size: [[18,12px],[20,18px]]
text:
optional: true
font:
size: 11px
weight: normal
early:
filter: { $zoom: { max: 19 } }
draw:
colorized-icons:
text:
visible: false
airport-gate:
filter: { kind: aeroway_gate }
draw:
colorized-icons:
visible: false
text-blend-order:
visible: global.text_visible_airport_gate
text_source: ref
priority: 63
font:
fill: global.mid_color
size: [[16,9px],[17,12px],[20,14px]]
later:
filter: { $zoom: { min: 19 } }
draw:
colorized-icons:
text:
font:
weight: 600
highway-exit:
filter: { kind: motorway_junction, $zoom: { min: 14 } }
draw:
colorized-icons:
visible: false
text-blend-order:
visible: global.text_visible_exits
text_source: ref
priority: 63
font:
family: Montserrat
fill: global.mid_color
size: [[12,9px],[15,12px],[17,14px]]
stroke: { color: global.text_stroke, width: [[12,2px],[14,3px],[15,3px]] }
later:
filter: { $zoom: { min: 16 } }
draw:
colorized-icons:
text:
font:
weight: 600
transit-overlay-station-labels:
filter:
all:
- function() { return global.sdk_transit_overlay; }
- kind: [station, tram_stop, bus_station, subway_entrance, halt, stop, platform, bus_stop, stop_position ]
- any:
- area: false
- area: true
all:
- $geometry: point
- kind: true
draw:
colorized-icons:
size: [[13, 12px], [16, 16px], [19, 20px]]
interactive: global.sdk_interactive
priority: 15
text:
buffer: 4px
move_into_tile: false # preserves text alignment w/icons in JS
#anchor: bottom
#offset: [[13, [0, 6px]], [16, [0, 8px]], [19, [0, 10px]]] # offset tracks alongside icon size (half icon height)
interactive: global.sdk_interactive
priority: 16
font:
fill: global.black_color
weight: normal
size: 11px
stroke: { color: global.white_color, width: 3 }
poi_labels-z14:
filter: { $zoom: [14] }
draw: { colorized-icons: { text: { font: { size: 11px } } } }
poi_labels-z15:
filter: { $zoom: [15,16,17] }
draw: { colorized-icons: { text: { font: { size: 12px, stroke: { width: 2 } } } } }
poi_labels-z18:
filter: { $zoom: [18,19] }
draw: { colorized-icons: { text: { font: { size: 12px, weight: 600, stroke: { width: 3 } } } } }
poi_labels-z20-up:
filter: { $zoom: { min: 20 } }
draw: { colorized-icons: { text: { font: { size: 14px, weight: 600, stroke: { width: 3 } } } } }
station-train-subway:
filter: { kind: [station, train-station, train_station] } #, $zoom: { min: 13 }
draw:
colorized-icons:
sprite: train_station
size: [[13, 12px], [14, 14px], [15, 16px], [17, 20px]]
priority: 11
text:
#offset: [[13, [0, 6px]], [14, [0, 7px]],[15, [0, 8px]], [17, [0, 10px]]]
priority: 12
low-priority-early:
filter: { kind_tile_rank: { min: 3 }, $zoom: { min: 0, max: 12 } }
draw:
colorized-icons:
size: [[12, 5px], [14, 6px], [15, 16px]]
text:
visible: false
long-tail:
filter: { kind_tile_rank: { min: 10 }, $zoom: [10] }
draw:
colorized-icons:
visible: false
low-priority-early-z12:
filter: { kind_tile_rank: { min: 8 }, $zoom: [12] }
draw:
colorized-icons:
# visible: false
size: [[12, 5px], [14, 6px], [15, 16px]]
text:
visible: false
low-priority-early-z13:
filter: { kind_tile_rank: { min: 8 }, $zoom: [13] }
draw:
colorized-icons:
#visible: false
size: [[12, 8px], [14, 6px], [15, 16px]]
text:
visible: false
low-priority-early-z14:
filter: { kind_tile_rank: { min: 7 }, $zoom: [14] }
draw:
colorized-icons:
size: [[12, 10px], [14, 11px], [15, 16px]]
#visible: false
text:
visible: false
late:
filter: { $zoom: { min: 16 } }
draw:
colorized-icons:
text:
font:
weight: 600
size: 12px
subway-early:
filter: { is_subway: true, is_train: false, $zoom: { max: 12 } }
draw:
colorized-icons:
visible: false
text:
visible: false
halt-early:
filter: { kind: [halt,stop], $zoom: { max: 15 } }
draw:
colorized-icons:
size: [[15, 8px], [16, 18px]]
visible: global.sdk_transit_overlay
sprite: light_rail
text:
visible: false
platform-early:
filter: { kind: [platform] }
draw:
colorized-icons:
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:
colorized-icons:
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:
colorized-icons:
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:
colorized-icons:
size: [[13, 8px], [16, 10px], [17, 12px], [18, 18px]]
sprite: bus_station
text:
interactive: global.sdk_interactive
font:
fill: global.black_color
size: 12px
stroke: { color: global.white_color, width: 4 }
bus-station-labels:
filter:
kind: [bus_station, bus_stop]
$zoom: { min: 16 }
draw:
colorized-icons:
size: [[13, 12px], [16, 18px]]
sprite: bus_station
priority: 17
text:
interactive: global.sdk_interactive
priority: 18
font:
fill: global.black_color
size: 12px
stroke: { color: global.white_color, width: 4 }
bus_stop:
filter:
kind: [bus_stop]
$zoom: { max: 19 }
draw:
colorized-icons:
size: [[13, 8px], [19, 18px]]
text:
visible: false
subway-entrance:
filter:
kind: [subway_entrance]
draw:
colorized-icons:
sprite: subway_entrance
size: [[17, 12px], [19, 14px]]
priority: 19
text:
#offset: [[17, [0, 6px]], [19, [0, 7px]]] # offset tracks alongside icon size (half icon height)
priority: 20
interactive: global.sdk_interactive
text_source: function() { if( feature.ref || feature.name ) { if( feature.ref && feature.name ) { return '[' + feature.ref + ']\n' + feature.name; } else { return feature.name; } } else { return "Entrance"; } }
font:
fill: global.black_color
size: 12px
stroke: { color: global.white_color, width: 4 }
earth-labels:
data: { source: mapzen, layer: earth }
continent:
filter: { kind: [continent], $zoom: {max: 5} }
draw:
text-blend-order:
visible: global.text_visible_continent
text_source: global.ux_language_text_source_continent_stacked_only
text_wrap: false
font:
family: global.text_font_family
size: [[1,11px],[3,14px]]
style: italic
fill: global.black_color
weight: normal
transform: uppercase
continent-spacer:
filter: { $zoom: { min: 2 } }
draw:
text-blend-order:
text_source: global.ux_language_text_source_continent
island:
filter: { kind: [archipelago, island, islet] }
draw:
text-blend-order:
visible: global.text_visible_island
text_wrap: 10
font:
family: global.text_font_family
size: 12px
style: italic
fill: global.black_color
weight: normal
stroke: { color: global.white_color, width: 4 }
landuse:
data: { source: mapzen }
draw:
dots:
order: global.feature_order
visible: false
medium-dots:
order: global.feature_order
visible: false
horizontal-bars:
order: global.feature_order
visible: false
horizontal-bars-rev:
order: global.feature_order
visible: false
dots-rev:
order: global.feature_order
visible: false
dots-rev-grid:
order: global.feature_order
visible: false
pixel-pattern-light:
order: global.feature_order
visible: false
pixel-pattern-bright:
order: global.feature_order
visible: false
tiny-dots:
order: global.feature_order
visible: false
polygons:
order: global.feature_order
visible: false
lines:
order: global.feature_order
landuse-labels:
filter:
all:
- label_placement: true
- name: true
draw:
text-blend-order:
text_source: global.ux_language_text_source
interactive: global.sdk_interactive
move_into_tile: true
priority: 100
visible: global.text_visible_landuse_generic
font:
fill: global.mid_color
family: global.text_font_family
style: italic
size: 11px
stroke: { color: global.white_color, width: 1 }
#tier1:
national_park:
filter:
all:
- kind: [national_park, battlefield, protected_area]
any:
- not: { operator: [ "United States Forest Service", "Forest Preserve District of Cook County" ] }
- protect_class: ['2','3','5']
draw:
dots:
color: global.lighter_color
order: 18
visible: true
us_national_park:
# yosemite national park, death valley national park, grand canyon national park
filter:
any:
- operator: [ "United States National Park Service" ]
- protect_class: ['2','3','5']
draw:
pixel-pattern-light:
visible: true
#tier2:
# effectively wilderness
conservation:
filter:
all:
- $zoom: { min: 4 }
- kind: [protected_area, nature_reserve, national_park]
any:
- protect_class: ['2','3','5']
- not: { operator: { "Forest Preserve District of Cook County" } }
draw:
pixel-pattern-light:
color: global.white_color
visible: true
national_forest_level_6:
filter:
all:
- kind: forest
any:
- protect_class: ['6']
- operator: ['United States Forest Service']
draw:
pixel-pattern-bright:
color: global.lighter_color
visible: true
forest-landcover:
filter:
all:
- kind: [forest, natural_forest, wood, natural_wood, natural_park]
- $zoom: { min: 10 }
any:
- not: { operator: [ "United States Forest Service", "Forest Preserve District of Cook County" ] }
draw:
pixel-pattern-light:
visible: true
parks-and-national-forests-not-national-park:
filter:
all:
- $zoom: { min: 4 }
- kind: [park, national_park]
any:
- not: { operator: [ "United States National Park Service", "United States Forest Service", "Forest Preserve District of Cook County" ] }
- protect_class: ['2','3','5','6']
# default for national forests and more?
draw:
dots:
color: global.lighter_color
visible: true
national_park:
#filter: function() { return feature.name && (feature.name.indexOf('National Park') > -1); }
filter:
all:
- kind: national_park
any:
- protect_class: ['2','3','5','6']
- not: { operator: [ "United States National Park Service", "Forest Preserve District of Cook County" ] }
draw:
pixel-pattern-light:
visible: true
# gotta be a protected area to draw green, not just a landcover type
farm:
filter:
kind: [farm, farmland]
$zoom: { min: 10}
draw:
tiny-dots:
color: global.offwhite_color
visible: true
#tier3:
university:
filter:
kind: [university, college]
draw:
dots-rev:
color: global.lightest_color
visible: true
#tier4:
cemetery:
filter:
kind: cemetery
draw:
tiny-dots:
color: global.lighter_color
visible: true
golf_course:
filter:
kind: golf_course
draw:
medium-dots:
color: global.lighter_color
visible: true
hospital:
filter:
kind: hospital
draw:
medium-dots:
color: global.lightest_color
visible: true
sports_centre:
filter:
kind: sports_centre
draw:
dots-rev-grid:
color: global.offwhite_color
recreation_ground:
filter:
kind: recreation_ground
draw:
dots-rev-grid:
color: global.offwhite_color
visible: true
stadium:
filter:
kind: stadium
draw:
dots-rev-grid:
color: global.offwhite_color
visible: true
zoo:
filter:
kind: [zoo, wildlife_park]
draw:
tiny-dots:
color: global.offwhite_color
visible: true
winter_sports:
filter:
kind: winter_sports
draw:
polygons:
color: [[9, global.white_color], [20, global.offwhite_color]]
visible: true
man-made:
filter: { kind: [pier,wastewater_plant,works,bridge,tower,breakwater,water_works,groyne,dike,cutline] }
draw:
horizontal-bars:
color: global.lightest_color
visible: true
pier:
filter: { kind: [pier,bridge,breakwater,groyne,dike,cutline] }
draw:
polygons:
color: global.offwhite_color
visible: true
tier5:
filter:
all:
- kind:
- theme_park
- resort
- aquarium
- winery
- maze
- beach
tourism-related:
filter:
kind:
- theme_park
- resort
- aquarium
- winery
- maze
draw:
dots:
color: global.light_color
visible: true
beach:
filter:
kind: beach
draw:
dots:
color: global.lightest_color
visible: true
#tier6:
garden:
filter:
kind: garden
draw:
tiny-dots:
color: global.light_color
visible: true
parking:
filter:
all:
- kind: parking
- $zoom: { min: 14 }
any:
- { $zoom: { min: 14 }, area: { min: 10000 } }
- { $zoom: { min: 15 }, area: { min: 5000 } }
draw:
horizontal-bars-rev:
color: global.ultralight_color
visible: true
early:
filter: { $zoom: { max: 15 } }
draw:
horizontal-bars-rev:
color: global.offwhite_color
visible: true
pedestrian:
filter:
kind: [pedestrian,common]
draw:
dots:
color: global.offwhite_color
visible: true
green-stuff:
filter:
surface: [grass]
draw:
dots:
color: global.lighter_color
pitch:
filter: { kind: pitch }
draw:
tiny-dots:
color: global.lightest_color
visible: true
outline:
style: lines
order: global.feature_order
color: global.ultralight_color
width: [[14, 0px], [15, 1px], [18, 2px]]
playground:
filter:
kind: playground
draw:
dots-rev:
color: global.ultralight_color
visible: true
school:
filter:
kind: school
draw:
dots-rev:
color: global.offwhite_color
visible: true
minor-landuse:
filter:
kind:
- attraction
- artwork
- wilderness_hut
- hanami
draw:
dots:
color: global.light_color
visible: true
landuse-not-filtered:
# runways and taxiways are also in the roads layer as lines
# these ones are probably duplicate features, but have AREA (a good thing)
filter:
kind:
- runway
- apron
- beach
- roller_coaster
- amusement_ride
- summer_toboggan
- trail_riding_station
- water_slide
- carousel
- animal
- enclosure
- petting_zoo
- aviary
draw:
dots:
order: global.feature_order
visible: false
polygons:
visible: false
order: global.feature_order
runway:
filter:
kind: runway
draw:
polygons:
visible: true
color: global.lighter_color
apron:
filter:
kind: apron
$zoom: { min: 15 }
draw:
dots:
color: global.offwhite_color
visible: global.grey1_v
minor-amusement-park-landuse:
filter:
kind:
- roller_coaster
- amusement_ride
- summer_toboggan
- trail_riding_station
- water_slide
- carousel
draw:
dots:
color: global.light_color
visible: true
minor-zoo-landuse:
filter:
kind:
- animal
- enclosure
- petting_zoo
- aviary
draw:
dots:
color: global.lighter_color
visible: true
# city_walls:
# filter: { kind: city_wall }
# draw:
# lines:
# order: 8
# color: global.city_wall
# width: [[12, 0.75px], [13, 1.0px], [14, 1.2px], [15, 2.0px], [16, 2.5px], [19, 6m]]
retaining_wall:
filter: { kind: retaining_wall }
draw:
lines:
color: global.lightest_color
width: [[14, 0.5px], [15, 1.0px], [16, 1.5px], [17, 2.0px], [19, 2m]]
# filter: { kind: snow_fence }
# draw:
# lines:
# order: 8
# color: [1.0,0.0,0.0] # global.snow_fence
# width: [[14, 0.5px], [15, 1.0px], [16, 1.5px], [17, 2.0px], [19, 4m]]
fence:
filter: { kind: fence }
draw:
lines:
color: global.lightest_color
width: [[14, 0.5px], [15, 1.0px], [16, 1.5px], [19, 0.5m]]
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Map</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<style>
html, body { margin: 0; padding: 0; }
#map { height: 100%; width: 100%; position: absolute; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/tangram/dist/tangram.min.js"></script>
<script>
var map = L.map('map');
var layer = Tangram.leafletLayer({
scene: 'https://gist.githubusercontent.com/glw/2c4e310cdf26f4b1714d7ba319c71eb8/raw/f9b603adbbf004fa6a3ef0773799ff6e466c96cb/fpdcc_style.yaml',
attribution: '<a href="https://mapzen.com/tangram" target="_blank">Tangram</a> | &copy; OSM contributors'
});
layer.addTo(map);
map.setView([42.0618, -88.1694], 13.1542);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment