I am new to CARTO VL and i want to make a simple dashboard with an animation panel as shown in one CARTO VL guide.

The problem that i get is that when i try to animate it by the atribute of time of the GeoJSON, it doesn't work.

const viz = new carto.Viz(`
     @animation: animation(linear($TIME, time('2019-03-22T00:00:00'), time('2019-03-24T23:00:00')))

I don't know if it has to be with my GeoJSON time format.

  • Could you add an example of the GeoJSON used? Thanks! – Elena Torró Apr 16 '19 at 11:12
  • Yes, sure! var malla = { "type": "FeatureCollection", "name": "MALLA", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, "features": [ { "type": "Feature", "properties": { "LEFT": 29.59, "BOTTOM": -1.3, "RIGHT": 29.6, "TOP": -1.29, "TOTAL": 1, "TIME": "2019-03-22T00:00:00", "ZSCORE": -2, "PVALOR": 0 }, – Álvaro Apr 16 '19 at 13:54

There're several issues here:

  1. Your GeoJSON doesn't include the feature geometry. It should have the geometry type and the coordinates:
"geometry": {
    "type": "Point",
    "coordinates": [ 30, 10 ]
  1. When using dates in a GeoJSON source, you've to declare which columns (properties) are "date". In this case, it's the 'TIME' property:
    const source = new carto.source.GeoJSON(geojson, { dateColumns: ['TIME'] });

These settings are explained in the GeoJSON source reference

  1. You've declared an @animation variable in your viz, but you're not using it. This is an example to use it with the filter viz property, but I'd recommend you to read the Animated Visualizations Guide
    const viz = new carto.Viz(`
      @animation: animation(linear($TIME, time('2019-03-20T00:00:00'), time('2019-03-24T23:00:00')), 1)
      filter: @animation

I'm adding here a working example with the code from your question.

  • Great! It works! Thank you very much!! The error was that i didn't declare the date Columns. – Álvaro Apr 17 '19 at 15:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.