Skip to content

Instantly share code, notes, and snippets.

@elenatorro

elenatorro/index.html

Created April 17, 2019 15:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save elenatorro/c35094e1941b4a188e590264114e6f30 to your computer and use it in GitHub Desktop.
Save elenatorro/c35094e1941b4a188e590264114e6f30 to your computer and use it in GitHub Desktop.
Download ZIP
GeoJSON Animation
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Test GeoJSON time | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v1.2.4/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<style>
html,
body {
margin: 0;
}
#map {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
</style>
</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: [24.262216593510175, 14.767345708297881],
zoom: 3,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
const geojson = {
"type": "FeatureCollection",
"name": "MALLA",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ 10, 10 ]
},
"properties": {
"name": 'first',
"LEFT": 29.59,
"BOTTOM": -1.3,
"RIGHT": 29.6,
"TOP": -1.29,
"TOTAL": 1,
"TIME": "2019-03-20T00:00:00Z",
"ZSCORE": -2,
"PVALOR": 0
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ 20, 10 ]
},
"properties": {
"name": 'second',
"LEFT": 29.59,
"BOTTOM": -1.3,
"RIGHT": 29.6,
"TOP": -1.29,
"TOTAL": 1,
"TIME": "2019-03-21T00:00:00Z",
"ZSCORE": -2,
"PVALOR": 0
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ 30, 10 ]
},
"properties": {
"name": "third",
"LEFT": 29.59,
"BOTTOM": -1.3,
"RIGHT": 29.6,
"TOP": -1.29,
"TOTAL": 1,
"TIME": "2019-03-22T00:00:00Z",
"ZSCORE": -2,
"PVALOR": 0
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ 40, 10 ]
},
"properties": {
"name": "fourth",
"LEFT": 29.59,
"BOTTOM": -1.3,
"RIGHT": 29.6,
"TOP": -1.29,
"TOTAL": 1,
"TIME": "2019-03-23T00:00:00Z",
"ZSCORE": -2,
"PVALOR": 0
}
}
]
};
const dateColumns = ['TIME'];
const source = new carto.source.GeoJSON(geojson, { dateColumns });
const viz = new carto.Viz(`
@animation: animation(linear($TIME, time('2019-03-20T00:00:00'), time('2019-03-24T23:00:00')), 1)
filter: @animation
width: 40
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', 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