Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar

ramiroaznar/index.html

Created October 22, 2018 16:04
Show Gist options
  • Save ramiroaznar/71dcafc7ad328c5730b7a9cf48026611 to your computer and use it in GitHub Desktop.
Save ramiroaznar/71dcafc7ad328c5730b7a9cf48026611 to your computer and use it in GitHub Desktop.
Download ZIP
Animate origins, destinations and connections with CARTO VL
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Bizi Movement | CARTO VL</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,200,400,500" rel="stylesheet">
<link href="https://carto.com/developers/carto-vl/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [-0.883333, 41.655],
zoom: 13,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
// Define user
carto.setDefaultAuth({
username: 'ramirocartodb',
apiKey: 'default_public'
});
// Define origin layer
const originSource = new carto.source.Dataset('bizi_init');
const originViz = new carto.Viz(`
@date: $fecha_inicio
@duration: 1000
@animation: animation(linear(@date,time('2017-03-20T06:00:06Z'),time('2017-03-26T23:58:56Z')),@duration,fade(1,1))
color: #4ECB83
filter: @animation
width: 10
`);
const originLayer = new carto.Layer('originLayer', originSource, originViz);
// Define destination layer
const destinationSource = new carto.source.Dataset('bizi_dest');
const destinationViz = new carto.Viz(`
@date: $fecha_final
@duration: 1000
@animation: animation(linear(@date,time('2017-03-20T06:05:04Z'),time('2017-03-27T00:15:16Z')),@duration,fade(1,1))
filter: @animation
width: 10
`);
const destinationLayer = new carto.Layer('destinationLayer', destinationSource, destinationViz);
// Define lines layer
const linesSource = new carto.source.Dataset('bizi_connections');
const linesViz = new carto.Viz(`
@date: $date_dest
@duration: 1000
@animation: animation(linear(@date,time('2017-03-20T06:05:04Z'),time('2017-03-27T00:15:16Z')),@duration,fade(1,1))
color: opacity(ramp(linear($duration, 3, 111), sunsetdark),0.7)
width: sqrt($duration)+1
filter: @animation
`);
const linesLayer = new carto.Layer('linesLayer', linesSource, linesViz);
destinationLayer.addTo(map);
originLayer.addTo(map);
linesLayer.addTo(map);
carto.on('loaded', [originLayer, destinationLayer, linesLayer], hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment