Skip to content

Instantly share code, notes, and snippets.

@hjanetzek

hjanetzek/scene.yaml

Created January 23, 2017 12:39
Show Gist options
  • Save hjanetzek/8f2d8c4c7e485fdc0479e5ace6eb5d14 to your computer and use it in GitHub Desktop.
Save hjanetzek/8f2d8c4c7e485fdc0479e5ace6eb5d14 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
scene.yaml
global:
feature_order: function () { return feature.sort_rank | 0; }
fonts:
Montserrat:
url: https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff
Open Sans:
- weight: 400
url: https://fonts.gstatic.com/s/opensans/v13/wMws1cEtxWZc6AZZIpiqWALUuEpTyoUstqEm5AMlJo4.woff
- weight: 400
style: italic
url: https://fonts.gstatic.com/s/opensans/v13/O4NhV7_qs9r9seTo7fnsVLO3LdcAZYWl9Si6vvxL-qU.woff
scene:
background:
color: '#f0ebeb'
cameras:
iso-camera:
# Manhattan
position: [-74.00976419448854, 40.70532700869127, 16]
type: isometric
axis: [0, 1]
active: false
perspective-camera:
# Manhattan
position: [-74.00976419448854, 40.70532700869127, 16]
type: perspective
fov: 45
max_tilt: [[2, 0], [16, 90]]
active: true
lights:
light1:
type: directional
origin: world
direction: [1, 1, -1]
diffuse: [.3, .3, .3, 1.]
ambient: [0.7, 0.7, 0.7, 1.]
textures:
pois:
url: img/poi_icons_32.png
sprites:
plane: [0, 0, 32, 32]
tree: [0, 185, 32, 32]
sunburst: [0, 629, 32, 32]
restaurant: [0, 777, 32, 32]
cafe: [0, 814, 32, 32]
museum: [0, 518, 32, 32]
bar: [0, 887, 32, 32]
train: [0, 74, 32, 32]
bus: [0, 148, 32, 32]
hospital: [0, 444, 32, 32]
parking: [0, 1073, 32, 32]
info: [0, 1110, 32, 32]
hotel: [0, 259, 32, 32]
bookstore: [0, 333, 32, 32]
shield: [0, 1142, 32, 32]
arrow: [1, 1175, 22, 22]
styles:
heightglow:
base: polygons
lighting: vertex
shaders:
blocks:
color: "color.rgb += vec3(worldPosition().z / 800.);"
heightglowline:
base: lines
mix: heightglow
icons:
base: points
texture: pois
dashed:
base: lines
dash: [2, 1]
transit-lines:
base: lines
blend: overlay
blend_order: -2
shaders:
blocks:
filter: |
color.rgb *= 1.25; // pump up the colors
color.a = 0.5; // translucent
sources:
osm:
type: MVT
#url: https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.mvt
mbtiles: berlin_germany.mbtiles
max_zoom: 14
# url_params:
# api_key: vector-tiles-tyHL4AY
layers:
touch:
data: { source: touch }
line:
filter: { type: line }
draw:
lines:
color: function () { return feature.color || 'black'; }
order: 50
width: 2px
poly:
filter: { type: poly }
draw:
polygons:
color: magenta
order: 40
point:
filter: { type: point }
draw:
icons:
sprite: sunburst
collide: false
transition: { show: { time: 0s }, hide: { time: 0s } }
boundary:
data:
source: osm
layer: boundary
earth:
data: { source: osm }
continents:
filter: { kind: continent, $geometry: point }
draw:
text:
priority: 1
font:
family: Open Sans
size: 12px
fill: [0, 0, 0, .8]
stroke: { color: white, width: 4 }
transform: uppercase
landcover:
data: { source: osm }
#rfilter:
#- { $zoom: { min: 16 } }
#TODO: "px2" range unit support for ES, and remove extended any area filter
# - any:
# - { $zoom: { min: 9 }, area: { min: 10000000 } }
# - { $zoom: { min: 10 }, area: { min: 3300000 } }
# - { $zoom: { min: 12 }, area: { min: 1000000 } }
# - { $zoom: { min: 13 }, area: { min: 10000 } }
# - { $zoom: { min: 15 } }
#- { area: { min: 500px2 } }
areas:
draw:
polygons:
order: 2
color: honeydew
residential:
filter: { class: grass }
draw:
polygons:
color: 'lightgreen'
landuse:
data: { source: osm }
#rfilter:
#- { $zoom: { min: 16 } }
#TODO: "px2" range unit support for ES, and remove extended any area filter
# - any:
# - { $zoom: { min: 9 }, area: { min: 10000000 } }
# - { $zoom: { min: 10 }, area: { min: 3300000 } }
# - { $zoom: { min: 12 }, area: { min: 1000000 } }
# - { $zoom: { min: 13 }, area: { min: 10000 } }
# - { $zoom: { min: 15 } }
#- { area: { min: 500px2 } }
areas:
draw:
polygons:
order: global.feature_order
color: honeydew
residential:
filter: { class: residential }
draw:
polygons:
color: '#eeeeee'
parks:
filter: { class: [park, graveyard, cemetery, forest, recreation_ground] }
draw:
polygons:
color: '#bddec5'
park-detail:
filter: { class: [pitch, wood, natural_wood, grass] }
draw:
polygons:
color: '#9dbea5'
industry:
filter: { class: [commercial, industrial] }
draw:
polygons:
color: '#C0CDCD'
civic:
filter: { class: university }
draw:
polygons:
color: '#D9CFC3'
urban:
filter: { class: urban_area }
draw:
polygons:
# color: [0.902, 0.835, 0.753, 1.00]
color: [[7, lightgrey], [9, [.88, .88, .88]]]
# color: lightgrey
water:
data: { source: osm }
draw:
polygons:
order: global.feature_order
color: '#9dc3de'
oceans:
filter: { class: ocean }
visible: true
draw:
text:
font:
family: Open Sans
size: 14pt
style: italic
seas:
filter: { class: sea, $zoom: { min: 7 } }
visible: true
draw:
text:
font:
family: Open Sans
size: 12pt
style: italic
transportation:
data: { source: osm }
filter: { not: { class: rail } }
draw:
lines:
color: white
# color: function() { return [Math.random(), Math.random(), Math.random()] }
width: 12
order: 6
outline:
color: [[16, '#999'], [18, '#aaa']]
width: [[15, 0], [16, 2]]
order: 352 # put all outlines below all roads
rounded:
filter: { $zoom: { min: 18 } }
draw:
lines:
cap: round
highway:
filter: { class: [motorway, trunk] }
draw:
lines:
color: [[5, '#F89595'], [7, '#D16768']]
width: [[5, 1px], [8, 1.5px], [14, 2px], [15, 12]]
outline:
width: [[14, 0], [15, 2]]
link:
filter: { is_link: true }
draw:
lines:
color: '#aaa'
width: [[13, 0], [14, 12]]
major_road:
filter: { class: primary, $zoom: { min: 10 } }
draw:
lines:
color: '#ed0'
width: [[10, 0], [13, 2px], [14, 2px], [16, 12]]
outline:
width: [[16, 0], [17, 1]]
minor_road:
filter: { class: minor_road }
draw:
lines:
width: [[13, 0px], [14, 1px], [15, 8]]
outline:
width: [[17, 0], [18, 1]]
paths:
filter: { class: path }
draw:
lines:
style: dashed
color: white
width: [[15, 0px], [18, 3px]]
outline:
width: 0
# apply outline to roads intersecting parks - see data source transform example in `sources`
land:
filter: { intersects_park: true }
draw:
lines:
outline:
style: lines
color: red
width: 1px
ferry:
filter: { class: ferry }
draw:
lines:
style: dashed
color: '#8db3ce'
width: [[14, 1px], [18, 2px]]
outline:
width: 0
airports:
filter: { class: aeroway }
draw:
lines:
color: '#ddd'
outline:
width: 0
taxiways:
filter: { class_detail: taxiway }
draw:
lines:
width: [[13, 0px], [14, 2px], [17, 10px]]
runways:
filter: { kind_detail: runway }
draw:
lines:
color: [[13, '#FFE4B5'], [16, white]]
width: [[11, 3px], [12, 5px], [13, 10px], [15, 75]]
cap: square
outline:
color: orange
width: [[11, 0px], [12, 1px], [13, 2px], [15, 12.5]]
arrows:
# oneway arrows and shields are distinct groups!
filter: { oneway: yes, shield_text: false, $zoom: { min: 17 } }
draw:
icons:
flat: true
sprite: arrow
size: [[17, 18px], [18, 20px], [20, 32px]]
placement: spaced
placement_spacing: [[17, 70px], [20, 175px]]
angle: auto
shields:
filter:
network: 'US:I' # US interstates only in this demo
shield_text: true
draw:
icons:
sprite: shield
# sprite: function() { return feature.network }
priority: 2
color: white
size: 24px
placement: midpoint
repeat_group: shields
text:
repeat_distance: 150px
anchor: center
text_source: shield_text
font:
family: sans-serif
size: 11px
fill: white
# thin-out shields at low-zoom
thinning:
filter: { $zoom: { max: 11 } }
draw:
icons:
repeat_distance: 75px
transportation_name:
data: { source: osm }
labels:
# filter: 'function() { print("check!"); return true; }'
# name: true
# not: { class: [rail, aeroway] }
draw:
# lines:
# order: 100
# color: '#f00'
# width: 1px
text:
interactive: true
transition: { show: { time: 0s }, hide: { time: 1s } }
font:
family: Open Sans
fill: '#666'
size: 12px
highway:
filter: { class: [motorway, trunk] }
draw:
text:
repeat_distance: 200px
repeat_group: road_labels
priority: 2
font:
stroke: { color: white, width: 4 }
transform: capitalize
major_road:
filter: { class: primary, $zoom: { min: 13 } }
draw:
text:
repeat_distance: 100px
repeat_group: roads
priority: 3
font:
size: 14px
stroke: { color: white, width: 4 }
minor_road:
filter: { class: minor_road, $zoom: { min: 15 } }
draw:
text:
priority: 5
font:
stroke: { color: white, width: 4 }
ferry:
filter: { class: ferry }
draw:
text:
text_wrap: 20
font:
fill: '#8db3ce'
stroke: { color: white, width: 4px }
style: italic
building:
data: { source: osm }
filter: { $zoom: { min: 14 } }
draw:
polygons:
style: heightglow
order: 10 # global.feature_order
color: [.83, .83, .83]
# turn interactive feature selection on for buildings with names
interactive:
filter: { name: true }
draw: { polygons: { interactive: true } }
# extrude 3d buildings
extruded:
#filter: { $zoom: { min: 15 } }
draw:
polygons:
#extrude: function () { return feature.render_height > 20 || $zoom >= 16; }
extrude: |
function () {
return [feature.render_min_height, feature.render_height ];
}
# lines:
# style: heightglowline
# width: 1.0
# color: [.75, .75, .73]
# #order: function() { return feature.sort_key + 1 || 0; }
# extrude: true
high-line:
filter: { roof_material: grass }
draw:
polygons:
style: polygons
color: '#bddec5'
# point labels for buildings
labels:
filter:
$geometry: point
name: true
any:
- { $zoom: { min: 17 }, height: { min: 50 } }
- $zoom: { min: 18 }
draw:
text:
priority: 7
font:
family: Open Sans
size: 8pt
fill: darkred
stroke: { color: white, width: 3 }
pois:
data: { source: osm }
draw:
icons:
interactive: true
collide: true
transition: { show: { time: 0s }, hide: { time: 1s } }
text:
interactive: true
font:
family: Open Sans
style: normal
size: 1.2em
fill: white
parks:
filter:
class: [park, cemetery, graveyard]
any:
- { $zoom: { min: 16 } }
#TODO: "px2" range unit support for ES
#- { area: { min: 500px2 } }
draw:
icons:
sprite: tree
priority: 2
size: 16px
text:
font:
size: 10pt
style: italic
fill: darkgreen
stroke: { color: white, width: 3 }
forest:
filter:
class: forest
any:
- { $zoom: { min: 7 }, tier: 1 }
- { $zoom: { min: 9 }, tier: { max: 3 } }
draw:
icons:
visible: false
text:
priority: 2
font:
size: 9pt
style: italic
fill: darkgreen
stroke: { color: white, width: 3 }
not_landuse:
filter:
name: true
not:
class: [peak, viewpoint, bicycle_rental, car_sharing, park, forest, cemetery, graveyard]
$zoom: { min: 15 }
draw:
icons:
size: [[13, 12px], [15, 18px]]
interactive: true
priority: 6
text:
optional: true
visible: false
# add text label at higher zoom
labels:
filter:
- { $zoom: { min: 17 } }
- { $zoom: { min: 16 }, class: station }
draw:
icons:
text:
visible: true
font:
size: 12px
fill: black
# add generic icon at high zoom
generic:
filter: { $zoom: { min: 18 } }
draw: { icons: { sprite: info } }
# examples of different icons mapped to feature properties
icons:
restaurant:
filter: { class: [restaurant] }
draw: { icons: { sprite: restaurant } }
cafe:
filter: { class: [cafe, convenience] }
draw: { icons: { sprite: cafe } }
bar:
filter: { class: [bar, pub] }
draw: { icons: { sprite: bar } }
culture:
filter: { class: [museum, library, church, place_of_worship, bank] }
draw: { icons: { sprite: museum } }
station:
filter: { class: [station] }
draw: { icons: { sprite: train, priority: 2 } }
hospital:
filter: { class: [hospital, pharmacy] }
draw: { icons: { sprite: hospital } }
hotel:
filter: { class: [hotel, hostel] }
draw: { icons: { sprite: hotel } }
bus_stop:
filter: { class: [bus_stop] }
draw: { icons: { sprite: bus } }
bookstore:
filter: { class: [bookstore] }
draw: { icons: { sprite: bookstore } }
boundaries:
data: { source: osm }
draw:
lines:
visible: false
order: global.feature_order
width: 2px
color: wheat
country:
filter: { class: country }
draw:
lines:
visible: true
color: [0.824, 0.651, 0.329, 1.00]
region:
filter: { class: [region, macroregion] }
draw:
lines:
visible: true
places:
data: { source: osm }
# city labels with points
city-points:
filter:
class: locality
kind_detail: city
$zoom: { max: 11 }
visible: true
draw:
points:
size: 8px
color: darkred
text:
priority: 1
font:
family: Open Sans
size: 12px
fill: [0, 0, 0, .8]
stroke: { color: white, width: 4 }
transform: uppercase
weight: bold
size: [[8, 11px], [12, 16px]]
# places w/text-only labels (not accompanying point)
text-only:
draw:
text:
visible: false
priority: 1
font:
family: Open Sans
size: 12px
fill: [0, 0, 0, .8]
stroke: { color: white, width: 4 }
transform: uppercase
countries:
filter:
class: country
any:
- { population: { min: 100000000 } }
- { $zoom: { min: 5, max: 8 }, population: { min: 1000000 } }
# - population: { min: 10000000 }
draw:
text:
visible: true
font:
weight: bold
size: [[6, 14px], [8, 20px]]
regions:
filter:
class: region
kind_detail: [state, province]
$zoom: { min: 5, max: 9 }
draw:
text:
visible: true
font:
# weight: bold
size: [[6, 12px], [8, 16px]]
# use short name when available at low-zooms
short:
filter: { $zoom: { max: 7 } }
draw:
text:
text_source: 'name:short'
cities:
filter:
class: locality
kind_detail: city
$zoom: { min: 11 } # show city point labels below z11
draw:
text:
visible: true
font:
weight: bold
size: [[8, 11px], [12, 16px]]
neighborhoods:
filter:
- { class: [neighbourhood, macrohood], $zoom: { min: 13 } }
- { class: microhood, $zoom: { min: 15 } }
draw:
text:
visible: true
font:
size: [[13, 11px], [14, 11px], [15, 13px]]
style: italic
fill: rgba(136, 45, 23, 0.9)
transit:
data: { source: osm }
filter: { $zoom: { min: 16 } }
draw:
lines:
style: transit-lines
order: 400
color: gray
width: 6px
outline:
color: [.8, .8, .8]
width: 1px
interactive: true
colored:
filter: { colour: true }
draw:
lines:
color: function() { return feature.colour; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment