osmarender.yaml

cameras:
    perspective:
        type: perspective
        vanishing_point: [0, -500]
lights:
    directional1:
        type: directional
        direction: [.5, .1, -1]
        diffuse: .2
        ambient: 0.8
styles:
    buildings:
        base: polygons
        shaders:
            blocks:
                color: |
                    color.rgb *= vec3(min((v_world_position.z*.001 + .9),1.));
sources:
    osm:
        type: TopoJSONTiles
        url:  //vector.mapzen.com/osm/all/{z}/{x}/{y}.topojson??api_key=vector-tiles-x4i7gmA
layers:
    water:
        data: { source: osm }
        draw:
            polygons:
                order: 3
                color: '#b5d6f1'
    earth:
        data: { source: osm }
        draw:
            polygons:
                order: 0
                color: '#fffcfa'
    landuse:
        data: { source: osm }
        draw:
           polygons:
               order: 2
        builtup:
            filter: { kind: 'urban area'}
            draw:
                polygons:
                    color: '#eee4e4'
        ne_parks:
            filter: { kind: ['park or protected land', scrub]}
            draw:
                polygons:
                    color: '#bde3cb'
        allotments:
            filter: { kind: [allotments, village_green] }
            draw:
                polygons:
                    color: '#bde3cb'
        park:
            filter: { kind: [park, cemetery] }
            draw:
                polygons:
                    color: '#c7f1a3'
        beach:
            filter: { kind: beach } # Missing the beach!
            draw:
                polygons:
                    order: 8
                    color: '#ff0'
        recreation:
            filter: { kind: recreation_ground }
            draw:
                polygons:
                    color: '#bde3cb'
        residential:
            filter: { kind: residential }
            draw:
                polygons:
                    color: '#e4e4e4'
        commercial:
            filter: { kind: commercial }
            draw:
                polygons:
                    color: '#ffffc0'
        retail:
            filter: { kind: retail }
            draw:
                polygons:
                    color: '#ffebeb'
        railway:
            filter: { kind: railway }
            draw:
                polygons:
                    color: '#ecd8ff'
        industrial:
            filter: { kind: industrial }
            draw:
                polygons:
                    color: '#ecd8ff'
        forest:
            filter: { kind: [forest, wood] }
            draw:
                polygons:
                    order: 3
                    color: '#6fc18e' 
        maedow:
            filter: { kind: meadow }
            draw:
                polygons:
                    color: '#ebfff2'
        aeroway:
            filter: { kind: apron }
            draw:
                polygons:
                    order: 4
                    color: 'f0f0f0'
        farmland:
            filter: { kind: [farmland, farm, grass] }
            draw:
                polygons:
                    color: '#ebfff2'
        university:
            filter: { kind: [university, school, college]}
            draw:
                polygons:
                    order: 4
                    color: '#cdabde'
                lines:
                    order: 5
                    color: '#e9dd72'
                    width: 2
        hospital:
            filter: { kind: [hospital]}
            draw:
                polygons:
                    order: 4
                    color: '#e2a9a1'
        track: 
            filter: { kind: [sports_centre, stadium]}
            draw:
                polygons:
                    order: 4
                    color: '#bde3cb'
                lines:
                    order: 5
                    color: '#6fc18e'
                    width: 2            
        pitch:
            filter: { kind: [pitch, playground, playing_fields]}
            draw:
                polygons:
                    order: 5
                    color: '#c7f1a3'
                lines:
                    order: 6
                    color: '#6fc18e'
                    width: 2
        parking:
            filter: { kind: [parking]}
            draw:
                polygons:
                    color: '#ffffc0'
        highway:
            filter: { kind: [pedestrian, footway] }
            draw:
                polygons:
                    order: 3
                    color: '#ffffff'
  
    roads:
        data: { source: osm }
        properties: { width: 3 }
        
        draw:
            lines:
                order: 4
                color: '#fff'
                width: 10
                cap: round
                outline:
                    color: '#777'
                    width: 2.5
        rail:
            filter: { kind: rail }
            draw:
                lines:
                    cap: butt
                    order: 5
                    color: '#555'
                    width: 2
                    outline:
                        color: '#ccc'
                        width: 1.5
        path:
            filter: { kind: path }
            draw:
                lines:
                    cap: butt
                    order: 3
                    color: '#eee'
                    width: 2
                    outline:
                        color: '#aaa'
                        width: 1.5
        service:
            filter: { highway: service }
            draw:
                lines:
                    cap: butt
                    order: 4
                    color: '#fff'
                    width: 4
                    outline:
                        color: '#aaa'
                        width: 1.5
        motorway:
            filter: { highway: motorway }
            draw:
                lines:
                    order: 3
                    color: '#809bc0'
                    width: 12
        trunk:
            filter: { highway: trunk }
            draw:
                lines:
                    order: 5
                    color: '#7fc97f'
                    width: 12                    
        primary:
            filter: { highway: primary }
            draw:
                lines:
                    order: 5
                    color: #e46d71'
                    width: 13
        secondary:
            filter: { highway: secondary }
            draw:
                lines:
                    order: 5
                    color: '#fdbf6f'
                    width: 12
        tertiary:
            filter: { highway: tertiary }
            draw:
                lines:
                    order: 5
                    color: '#ffff90'
                    width: 12
    buildings:
        data: { source: osm }
        filter: { $zoom: { min: 15 } }
        draw:
            polygons:
                order: 50
                color: '#f8daba'
        lines:
            filter: { $zoom: { max: 16 } }
            draw:
                lines:
                    order: 52
                    color: '#6a5a8e'
                    width: 2.5
        extruded:
            filter: { $zoom: { min: 16 } }
            draw:
                polygons:
                    style: buildings
                    #color: '#fff'
                    extrude: function () { return feature.height > 0 || $zoom >= 16; }
    road_labels:
        data: { source: osm, layer: roads }
        filter: { name: true, aeroway: false, tunnel: false, railway: false, not: { kind: rail } }

        highway:
            filter: { kind: highway, $zoom: { min: 7 } }
            draw:
                text:
                    font:
                        fill: white
                        typeface: 500 16px Helvetica

        not_highway:
            filter: { not: { kind: highway }, $zoom: { min: 13 } }
            draw:
                text:
                    font:
                        fill: black
                        typeface: 200 14px Helvetica
                        stroke: { color: 'rgba(255,255,255,0.2)' , width: 4 }
                        
                        
    places:
        data: { source: osm }
        filter: {  name: true }
        draw:
            text:
                font:
                    typeface: 100 18px Helvetica
                    fill: black
                    stroke: { color: white,width: 5 }