Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Bikes of NYC</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src=''></script>
    <script src='traveling_bike.js'></script>
    <script src='lib/moment.min.js'></script>
    <link href='' rel='stylesheet' />
    <script src='lib/deckgl.min.js'></script>
    <script type='text/javascript'>
    const {MapboxLayer} = deck;
    </script>
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<style>
.overlay {
    position: absolute;
    top: 10px;
    left: 10px;
}

.overlay button {
    font:600 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    background-color: #3386c0;
    color: #fff;
    display: inline-block;
    margin: 0;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: 3px;
}

.overlay button:hover {
    background-color:#4ea0da;
}
</style>
<script src='' charset='utf-8'></script>

<div id='map'></div>
<div class='overlay'>
    <div id='replay' style="background-color: whitesmoke; color: black; ; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif"></div>
</div>

<script>

class ArcBrushingLayer extends deck.ArcLayer {
      getShaders() {
        return Object.assign({}, super.getShaders(), {
          inject: {
            'vs:#decl': `
             uniform float coef1;
             uniform float coef2;
            `,
            'vs:#main-end': `
            if (coef1 > 0.0) {
              vec4 pct = vec4(segmentRatio);
              pct.a = step(coef1, segmentRatio);
              vec4 colorA = instanceSourceColors;
              vec4 colorB = vec4(instanceTargetColors.r, instanceTargetColors.g, instanceTargetColors.b, 0.0);
              vec4 color = mix(colorA, colorB, pct) / 255.;
              vColor = color;
            }
            if (coef2 > 0.0) {
              vec4 pct = vec4(segmentRatio);
              pct.a = step(coef2, segmentRatio);
              vec4 colorA = instanceTargetColors;
              vec4 colorB = vec4(instanceSourceColors.r, instanceSourceColors.g, instanceSourceColors.b, 0.0);
              vec4 color = mix(colorB, colorA, pct) / 255.;
              vColor = color;
            }
                        `,
                        'fs:#main-start': `
            if (vColor.a == 0.0) discard;
                        `
          }
        });
      }

      draw(opts) {
        const {coef1, coef2} = this.props;
        // add uniforms
        const uniforms = Object.assign({}, opts.uniforms, { coef1: coef1, coef2: coef2 });
        super.draw(Object.assign({}, opts, {uniforms}));
      }
    }

mapboxgl.accessToken = '';
var map = new mapboxgl.Map({
    container: 'map',
    style: '',
    center: [-74.0060, 40.7128],
    zoom: 12,
    pitch: 60, // pitch in degrees
});

map.on('load', function () {
    const firstLabelLayerId = map.getStyle().layers.find(layer => layer.type === 'symbol').id;
    map.addLayer({
        'id': '3d-buildings',
        'source': 'composite',
        'source-layer': 'building',
        'filter': ['==', 'extrude', 'true'],
        'type': 'fill-extrusion',
        'minzoom': 15,
        'paint': {
            'fill-extrusion-color': '#aaa',
            'fill-extrusion-height': [
                "interpolate", ["linear"], ["zoom"],
                15, 0,
                15.05, ["get", "height"]
            ],
            'fill-extrusion-base': [
                "interpolate", ["linear"], ["zoom"],
                15, 0,
                15.05, ["get", "min_height"]
            ],
            'fill-extrusion-opacity': .6
        }
      }, firstLabelLayerId);

    travel = travel.sort(function(a, b) {
        if (a.start_date == b.start_date) {
            if (a.start_time > b.start_time) {
                return 1;
            } else {
                return -1;
            }
        } else if (a.start_date > b.start_time) {
            return 1
        } else {
            return -1
        }
    });

    var arcLayer = null

    function pickTrip () {

        if (arcLayer) {
            map.removeLayer(arcLayer.id)
        }

        trip = travel.shift()

        var arcData = [{
            source: [trip.start_station_longitude, trip.start_station_latitude],
            target: [trip.end_station_longitude, trip.end_station_latitude]
        }]

        arcLayer = new MapboxLayer({
            id: 'deckgl-arc',
            type: ArcBrushingLayer,
            data: arcData,
            getSourcePosition: d => d.source,
            getTargetPosition: d => d.target,
            getSourceColor: [0, 0, 255],
            getTargetColor: [50, 255, 255],
            getStrokeWidth: 8,
            coef1: 0.05,
            coef2: 0
        })

        map.addLayer(arcLayer)
        document.getElementById('replay').innerHTML = trip.start_station_name + " to " + trip.end_station_name
    }

    function animate () {
        if (arcLayer.props.coef1 < 1) {
            arcLayer.setProps({coef1: arcLayer.props.coef1 + 0.1})
        } else if (arcLayer.props.coef2 < 1) {
            arcLayer.setProps({coef2: arcLayer.props.coef2 + 0.1})
        } else {
            pickTrip()
        }
    }

    pickTrip()
    setInterval(animate, 50);
});
</script>

</body>
</html>