scale-buildings.yaml

global:
    default_order: function() { return feature.sort_key || 0; }
scene:
    background:
        color: '#8db7d5'
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
        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.]
styles:
    flatcolor:
        base: polygons
        lighting: false
    dashes:
        base: lines
        dash: [1, 1]
        dash_background_color: lightgrey
    scale-buildings:
        base: polygons
        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;
sources:
    osm:
        type: MVT
        url:  https://vector.mapzen.com/osm/all/{z}/{x}/{y}.mvt
        max_zoom: 16
        url_params:
            api_key: vector-tiles-tyHL4AY
layers:
    earth:
        data: { source: osm }
        draw:
            polygons:
                order: 0
                color: '#f0ebeb'
    water:
        data: { source: osm }
        filter:
            any:
                # show smaller water areas at higher zooms
                - { $zoom: { min: 0 }, area: { min: 10000000 } }
                - { $zoom: { min: 10 }, area: { min: 1000000 } }
                - { $zoom: { min: 12 }, area: { min: 100000 } }
                - { $zoom: { min: 15 }, area: { min: 1000 } }
                - { $zoom: { min: 18 } }
        draw:
            flatcolor:
                order: 3
                color: '#8db7d5'
    buildings:
        data: { source: osm }
        filter: { $zoom: { min: 14 } }
        draw:
            polygons:
                order: global.default_order
                color: [.65, .65, .63]
        extruded:
            filter: { $zoom: { min: 15 } }
            draw:
                polygons:
                    extrude: true
                    style: scale-buildings
    landuse:
        data: { source: osm }
        filter:
            name: true
            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 } }
        draw:
            polygons:
                order: 1
                color: '#fffffa'
                interactive: true # currently ignored
        green:
            filter: { kind: [park, graveyard, cemetery, forest, recreation_ground] }
            draw:
                polygons:
                    order: 2
                    color: '#89ab84'
        blue:
            filter: { kind: [commercial, industrial] }
            draw:
                polygons:
                    color: '#C0CDCD'
        orange:
            filter: { kind: [university] }
            draw:
                polygons:
                    color: '#D9CFC3'
    roads:
        data: { source: osm }
        filter:
            not: { kind: [rail] }
        draw:
            lines:
                color: white
                width: 12.
                order: 'function() { return feature.sort_key + 5 || 0 }'
        rounded:
            filter: { $zoom: { min: 18 } }
            draw:
                lines:
                    cap: round
        routes:
            filter: { $zoom: { max: 10 } }
            draw:
                lines:
                    color: '#aaa'
                    width: 2.
        highway:
            filter: { kind: highway }
            draw:
                lines:
                    color: '#D16768'
                    width: [[14, 2px], [15, 12]]
                    outline:
                        width: [[14, 0], [15, 2]]
            link:
                filter: { is_link: yes }
                draw:
                    lines:
                        color: '#aaa'
                        width: [[13, 1px], [14, 12]]
        major_road:
            filter: { kind: major_road, $zoom: { min: 10 } }
            draw:
                lines:
                    color: '#aaaaa4'
                    width: [[10, 1px], [13, 2px], [14, 2px], [16, 12]]
                    outline:
                        width: [[16, 0], [17, 1]]
        minor_road:
            filter: { kind: minor_road }
            draw:
                lines:
                    color: '#bbbbb8'
                    width: [[13, 1px], [14, 1px], [15, 8]]
                    outline:
                        width: [[17, 0], [18, 1]]
        paths:
            filter: { kind: path }
            draw:
                lines:
                    color: '#fff'
                    width: [[15, 1px], [17, 2px]]
                    outline:
                        width: 0
        ferries:
            filter: { kind: ferry }
            draw:
                lines:
                    style: dashes
        airports:
            filter: { aeroway: true }
            draw:
                lines:
                    color: '#f00'
            taxiways:
                filter: { aeroway: taxiway }
                draw:
                    lines:
                        width: [[13, 1px], [14, 2.0], [17, 5.0]]
            runways:
                filter: { aeroway: runway }
                draw:
                    lines:
                        color: [[13, '#FFE4B5'], [16, white]]
                        width: [[11, 2.], [12, 3.], [13, 4.], [17, 8.]]
                        order: 39
                        cap: square
                        outline:
                            color: orange
                            width: [[11, 0], [12, 1.], [17, 2.]]