Skip to content

Instantly share code, notes, and snippets.

@jorgesancha

jorgesancha/index.html

Last active June 1, 2018 19:28
Show Gist options
  • Save jorgesancha/cbfbe9b9444dd62cc9d50b2d2ede98aa to your computer and use it in GitHub Desktop.
Save jorgesancha/cbfbe9b9444dd62cc9d50b2d2ede98aa to your computer and use it in GitHub Desktop.
Download ZIP
A run with CARTO VL
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Run</title>
<!-- Include CARTO VL JS -->
<script src="https://cartodb-libs.global.ssl.fastly.net/carto-vl/v0.3.0/carto-vl.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://cartodb-libs.global.ssl.fastly.net/mapbox-gl/v0.45.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://cartodb-libs.global.ssl.fastly.net/mapbox-gl/v0.45.0-carto1/mapbox-gl.css" rel="stylesheet" />
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map">
</div>
<script type="text/javascript">
const map = new mapboxgl.Map({
container: 'map',
style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
center: [-3.645153008023385, 40.47298546406881],
zoom: 14.25,
dragRotate: false
});
carto.setDefaultAuth({
user: 'jsancha-carto',
apiKey: 'bSsOv0isyj2OqyUmRUXA-Q'
});
const source = new carto.source.Dataset('run_20170917t102217');
const viz = new carto.Viz(`
color: opacity(ramp(linear($speed, 0.25, 3.85), prism),0.6)
width: 7
filter: torque($time,12,fade(0.03, 2)) + 0.03
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment