scene.yaml

cameras:
    perspective:
        type: perspective
        vanishing_point: [0, -500]
lights:
    directional1:
        type: directional
        direction: [.1, .5, -1]
        diffuse: .7
        ambient: .5
scene:
    background:
        color: '#3c3c3c'
styles:
    albers:
        base: polygons
        animated: true
        shaders:
            defines:
                EARTH_RADIUS: 6378137.0
                PI: 3.14159265358979323846
                HALF_PI: 1.570796327
                QUARTER_PI: .785398163
                deg2rad(d): (d)*PI/180.0
                rad2deg(d): (d)*180.0/PI
            blocks:
                global: |
                    // http://wiki.openstreetmap.org/wiki/Mercator
                    float y2lat_m (float y) { return rad2deg(2.0*atan(exp((y/EARTH_RADIUS)))-HALF_PI); }
                    float x2lon_m (float x) { return rad2deg(x/EARTH_RADIUS); }

                    float lat2y_m (float lat) { return EARTH_RADIUS*log(tan(QUARTER_PI+ deg2rad(lat)/2.0)); }
                    float lon2x_m (float lon) { return deg2rad(lon)*EARTH_RADIUS; }
                    
                    // convert from lat/long to albers -- from https://gist.github.com/RandomEtc/476238
                    vec2 albers(float lat, float lng, float lat0, float lng0, float phi1, float phi2) {
                        float n = 0.5 * (sin(phi1) + sin(phi2));
                        float c = cos(phi1);
                        float C = c*c + 2.*n*sin(phi1);
                        float p0 = sqrt(C - 2.*n*sin(lat0)) / n;
                        float theta = n * (lng * PI/180. - lng0);
                        float p = sqrt(C - 2.*n*sin(lat* PI/180.)) / n;

                        float x = p * sin(theta);
                        float y = p0 - p * cos(theta);

                        return vec2(x,y);
                    }
                position: |
                    // mercator position of the current vertex, u_map_position = center of screen,
                    // position.xy = vertex screen position in meters from the center of the screen
                    vec2 mercator = u_map_position.xy + position.xy;
                    float lat = y2lat_m(mercator.y);
                    float lon = x2lon_m(mercator.x);

                    // Latitude_Of_Origin
                    float centerlat = deg2rad(y2lat_m(u_map_position.y));
                    // Central_Meridian
                    float centerlon = deg2rad(x2lon_m(u_map_position.x));

                    // Standard_Parallel_1
                    float phi1 = deg2rad(y2lat_m(u_map_position.y) + 10.);
                    // Standard_Parallel_2
                    float phi2 = deg2rad(y2lat_m(u_map_position.y) - 10.);

                    position.xy = albers(lat, lon, centerlat, centerlon, phi1, phi2)*EARTH_RADIUS;

    alberslines:
        base: lines
        mix: albers
sources:
    mapzen:
        type: TopoJSON
        url: https://meetar.github.io/mapzen-tiles/vector/v1/256/all/{z}/{x}/{y}.topojson
layers:
    boundaries:
        data: { source: mapzen }
        draw:
            alberslines:
                order: function() { return feature.sort_rank || 0; }
                color: white
                width: 2px
    water:
        data: { source: mapzen }
        draw:
            albers:
                order: function() { return feature.sort_rank || 0; }
                color: '#353535'
    earth:
        data: { source: mapzen }
        draw:
            albers:
                order: function() { return feature.sort_rank || 0; }
                color: '#555'
    landuse:
        data: { source: mapzen }
        draw:
            albers:
                order: function() { return feature.sort_rank || 0; }
                color: '#666'
    roads:
        data: { source: mapzen }
        draw:
            alberslines:
                order: function() { return feature.sort_rank || 0; }
                color: '#777'
                width: 5
    buildings:
        data: { source: mapzen }
        draw:
            albers:
                order: function() { return feature.sort_rank || 0; }
                color: '#999'
                extrude: true