scene.yaml

scene:
    background:
        color: '#ddeeee'

sources:
    nextzen:
        type: MVT
        url: https://tile.nextzen.org/tilezen/vector/v1/512/all/{z}/{x}/{y}.mvt
        url_params:
            api_key: NaqqS33fTUmyQcvbuIUCKA
        tile_size: 512
        max_zoom: 16

layers:
    landuse:
        data: { source: nextzen }
        draw:
            polygons:
                order: function() { return feature.sort_rank; }
                color: lightgreen

    water:
        data: { source: nextzen }
        draw:
            polygons:
                order: function() { return feature.sort_rank; }
                color: lightblue

    roads:
        data: { source: nextzen }
        filter:
            not: { kind: [path, rail, ferry] }
        draw:
            lines:
                order: function() { return feature.sort_rank; }
                color: [.6, .6, .6]
                width: [[0, 2px], [14, 2px], [16, 4px], [18, 6px]]
                outline:
                    color: white
                    width: [[14, 0px], [16, 1px]]
                    order: 350

    buildings:
        data: { source: nextzen }
        draw:
            polygons:
                order: function() { return feature.sort_rank; }
                color: |
                    function () {
                        var h = feature.height || 20;
                        h = Math.min((h + 50)/ 255, 1); // max brightness: 1
                        h = Math.max(h, .4); // min brightness: .4
                        h = (h - 0.4) * -1 + 1; // flip brightness
                        return [h, h * 0.4, h * 0.7];
                    }
        3d-buildings:
            filter: { $zoom: { min: 15 } }
            draw:
                polygons:
                    extrude: function () { return feature.height > 20 || $zoom >= 16; }

    places:
        data: { source: nextzen }
        filter: function() { return ($zoom >= feature.min_zoom && (feature.max_zoom == null || $zoom <= feature.max_zoom)); }
        draw:
            text:
                visible: global.labels
                priority: function() { return 1 - 1/feature.min_zoom; } # give higher priority to lower min_zoom
                repeat_distance: 512px # filter out duplicate place names
                text_source: name
                font:
                    family: Helvetica
                    fill: black
                    size: |
                        function() {
                            if (feature.min_zoom == null) return 12;
                            var p = feature.population_rank || 7;
                            return Math.min(
                                12 + (p - 7) + Math.pow(1.5, Math.max($zoom - feature.min_zoom)),
                                24);
                        }
                    weight: bold