0

I've been trying to create a cartodb map with a torque layer as indicated in the Torque.js documentation, but I keep getting the same error:

cartodb.js:14 MAP: error creating layertorque Error: :21:17 Missing closing ] of filter.

enter image description here

JS FILE:

function main() {


  // Instantiate new map object, place it in 'map' element
  var mapThree = new L.Map('mapThree', {
    center: [25, 25], // Western Egypt
    zoom: 2,
    scrollWheelZoom: false,
  })

  var layer = L.tileLayer(
    'https://{s}.basemaps.cartocdn.com/rastertiles/dark_nolabels/{z}/{x}/{y}.png',
    {
      maxZoom: 18,
    }
  ).addTo(mapThree)

  // setup layer
  var layerSource = {
    type: 'torque',
    options: {
      user_name: 'modernizacion', // replace with your user name
      table_name: 'same_07_vuelos_ida_puntos_torque',
      cartocss: $('#cartocss').html(),
    },
  }

  // put torque layer on top of basemap
  cartodb
    .createLayer(mapThree, layerSource)
    .addTo(mapThree)
    .done(function(layer) {
      // do stuff
    })
    .error(function(err) {
      console.log('Error: ' + err)
    })
}

window.onload = main

I'm using this tutorial: https://carto.com/academy/courses/cartojs-ground-up/torquejs/ But I can't make it work...

HTML HEADER:

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Vuelos</title>
        <link rel="shortcut icon" href="https://argob.github.io/poncho/favicon.ico">
        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
        <link rel="stylesheet" href="./css/main.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-1.8.1.js" integrity="sha256-e6rn3uRMD1/JU+Fd/OYCf2OSFcUOXHQlkCL0rYR/JUM=" crossorigin="anonymous"></script>
        <!-- <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script> -->

        <!-- Load Leaflet CSS -->
        <link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet">
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
        <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.12/themes/css/cartodb.css" />

        <link rel="stylesheet" href="./css/leaflet.css">
        <!-- TEST -->
        <script type="cartocss/text" id="cartocss">
            Map {
                -torque - frame - count: 745;
                -torque - animation - duration: 60;
                -torque - time - attribute: "rowid";
                -torque - aggregation - function: "count(1)";
                -torque - resolution: 1;
                -torque - data - aggregation: linear;
            }

            #layer {
                marker - width: 1;
                marker - fill: #4dc3ee;
                marker - fill - opacity: 0.9;
                marker - line - width: 0;
                marker - line - color: #FFFFFF;
                marker - line - opacity: 1;
                comp - op: lighter;
            }

            #layer[frame - offset= 1] {
                marker - width: 3;
                marker - fill - opacity: 0.45;
            }

            #layer[frame - offset= 2] {
                marker - width: 5;
                marker - fill - opacity: 0.225;
            }
        </script>
    </head>

HTML LOADED SCRIPTS:

<!-- Load Leaflet and Carto libraries -->
        <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
        <script src="https://cartodb-libs.global.ssl.fastly.net/carto.js/v4.0.0-beta/carto.min.js"></script>
        <!-- include cartodb.js library -->
        <script src="http://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.js"></script>


        <!-- call to library for controlling GIF animation -->
        <script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>

FINAL SOLUTION (I was able to make it work, needed to correct the css style and make the dataset public with link (Not just make the map public))

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      #selector_menu{
              position: absolute;
              top: 20px;
              left: 40px;
              z-index: 9000;
            }
    </style>
    <!-- include cartodb css  -->
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
    <!-- include cartodb.js library -->
    <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>

  </head>
  <body>
    <!--  define a map object-->
    <div id="map"></div>
    <div id='selector_menu'>
        <select id='selector'>
          <option value='torque'>Torque</option>
          <option value='heatmap'>Heatmap</option>
          <option value = 'torquecat'>Torque Category</option>
        </select>

    </div>

    <script>

      function main() {

        //create map element
        var map = new L.Map('map', {
           zoomControl: true,
           center: [40, 0],
           zoom: 3
        });

        // add map
        L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/dark_nolabels/{z}/{x}/{y}.png', {
          attribution: 'CartoDB'
        }).addTo(map);


        // cartocss style
        var CARTOCSSTorque = [
          'Map {',
            '-torque-frame-count: 729;',
            '-torque-animation-duration: 60;',
            '-torque-time-attribute: "rowid";',
            '-torque-aggregation-function: "count(1)";',
            '-torque-resolution: 1;',
            '-torque-data-aggregation: linear;',
          '}',
          '#layer {',
            'marker-width: 1;',
            'marker-fill: #4dd9ee;',
            'marker-fill-opacity: 0.9;',
            'marker-line-width: 0;',
            'marker-line-color: #FFFFFF;',
            'marker-line-opacity: 1;',
            'comp-op: lighter;',
          '}',
          '#layer[frame-offset=1] {',
            'marker-width: 3;',
            'marker-fill-opacity: 0.45;',
          '}'
        ].join('\n');


        var layerSource = {
          type: 'torque',
          options: {
            user_name: 'modernizacion',
            table_name: "same_07_vuelos_ida_puntos_torque",
            cartocss:  CARTOCSSTorque,
            loop: true // stop loop of the animation
          },
            https:true // here!
        }

        cartodb.createLayer(map, layerSource)
          .addTo(map)
          .done(function(layer){
            var torqueLayer = layer;
            // torqueLayer.stop(); // everytime that the map is reloaded, the torque layer is stop, the animation won't start
                                // unless you click the "play" button.
            torqueLayer.getStep(0); // everytime that the map is reloaded, it restarts the animation


            var LayerActions = {
                        torque: function(){
                          torqueLayer.setCartoCSS(CARTOCSSTorque);
                          torqueLayer.getStep(0); // it restarts the animation
                          torqueLayer.stop(); //  the torque layer is stop, the animation won't start unless you click the "play" button.


                        },

                      }

                    $('#selector').change(function() {
                       LayerActions[$(this).val()]();
                    });

            layer.setInteraction(true);
            layer.on('featureOver',function(e,latlng,pos,data){
              console.log(data)
            })

          }).error(function(err) {
            console.log('Error: ' + err)
          })
      }
      window.onload = main;
    </script>
</body>
</html>
0

A couple of things stand out to me;

The first is that you are using an older version of CartoJs (3.12). Is there any reason you are not using 3.15?

The second is that your CartoCSS variables do not seem valid. You can not have spaces in the variable name. e.g. It should be;

    <script type="cartocss/text" id="cartocss">
        Map {
            -torque-frame-count: 745;
            -torque-animation-duration: 60;
            -torque-time-attribute: "rowid";
            -torque-aggregation-function: "count(1)";
            -torque-resolution: 1;
            -torque-data-aggregation: linear;
        }
    </script>

The actual problem (Missing closing ] or filter) though is with your CartoCSS selectors

#layer[frame - offset= 1] {
    ...
}
#layer[frame - offset= 2] {
    ....
}    

should be;

#layer[frame-offset=1] {
    ...
}
#layer[frame-offset=2] {
    ....
}   

FINAL SOLUTION:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      #selector_menu{
              position: absolute;
              top: 20px;
              left: 40px;
              z-index: 9000;
            }
    </style>
    <!-- include cartodb css  -->
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
    <!-- include cartodb.js library -->
    <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>

  </head>
  <body>
    <!--  define a map object-->
    <div id="map"></div>
    <div id='selector_menu'>
        <select id='selector'>
          <option value='torque'>Torque</option>
          <option value='heatmap'>Heatmap</option>
          <option value = 'torquecat'>Torque Category</option>
        </select>

    </div>

    <script>

      function main() {

        //create map element
        var map = new L.Map('map', {
           zoomControl: true,
           center: [40, 0],
           zoom: 3
        });

        // add map
        L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/dark_nolabels/{z}/{x}/{y}.png', {
          attribution: 'CartoDB'
        }).addTo(map);


        // cartocss style
        var CARTOCSSTorque = [
          'Map {',
            '-torque-frame-count: 729;',
            '-torque-animation-duration: 60;',
            '-torque-time-attribute: "rowid";',
            '-torque-aggregation-function: "count(1)";',
            '-torque-resolution: 1;',
            '-torque-data-aggregation: linear;',
          '}',
          '#layer {',
            'marker-width: 1;',
            'marker-fill: #4dd9ee;',
            'marker-fill-opacity: 0.9;',
            'marker-line-width: 0;',
            'marker-line-color: #FFFFFF;',
            'marker-line-opacity: 1;',
            'comp-op: lighter;',
          '}',
          '#layer[frame-offset=1] {',
            'marker-width: 3;',
            'marker-fill-opacity: 0.45;',
          '}'
        ].join('\n');


        var layerSource = {
          type: 'torque',
          options: {
            user_name: 'modernizacion',
            table_name: "same_07_vuelos_ida_puntos_torque",
            cartocss:  CARTOCSSTorque,
            loop: true // stop loop of the animation
          },
            https:true // here!
        }

        cartodb.createLayer(map, layerSource)
          .addTo(map)
          .done(function(layer){
            var torqueLayer = layer;
            // torqueLayer.stop(); // everytime that the map is reloaded, the torque layer is stop, the animation won't start
                                // unless you click the "play" button.
            torqueLayer.getStep(0); // everytime that the map is reloaded, it restarts the animation


            var LayerActions = {
                        torque: function(){
                          torqueLayer.setCartoCSS(CARTOCSSTorque);
                          torqueLayer.getStep(0); // it restarts the animation
                          torqueLayer.stop(); //  the torque layer is stop, the animation won't start unless you click the "play" button.


                        },

                      }

                    $('#selector').change(function() {
                       LayerActions[$(this).val()]();
                    });

            layer.setInteraction(true);
            layer.on('featureOver',function(e,latlng,pos,data){
              console.log(data)
            })

          }).error(function(err) {
            console.log('Error: ' + err)
          })
      }
      window.onload = main;
    </script>
</body>
</html>
  • Thank you! I fixed that and then I had an error that I solve by making the dataset public with link. I thought that just making the map public in the carto editor was going to make the dataset public, but it doesn't work like that... `` – Juan Salvatore Apr 19 '18 at 17:08
  • Glad to hear. I will edit my answer. – Jags Apr 19 '18 at 22:41

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.