1

I have two tables in CartoDB, one is a fixed layer with locations of restaurants in a city. The other layer has data about the locations where police had to go because of fights for example (say 112 calls) that happened in the city during a one year period.

Because I want to create my own basemap I have been using the createLayer function in CartoDB.js to display the restaurants. This works fine. But next I want to add a Torque map of the 112 calls on top of this. However, when I do finally get the Torque map to work, the other layer of the restaurants is no longer visible.

What should I do to make both layers visible?

Below a short version of the code I am using now, which only shows the Torque layer (also, in this version there is no time slider visible, which I hope will become visible once I get both layers working):

// initiate leaflet map
map = new L.Map('map', { 
    center: [0,0],
    zoom: 11
})

// load the base map
L.tileLayer(mapURL, {
    attribution: '...'
}).addTo(map);

var CARTOCSS_TORQUE = {...};
var torqueLayer = new L.TorqueLayer({
            user       : 'username',
            table      : 'table_name',
            column     : 'column',
            countby    : 'count(cartodb_id)',
            resolution : 2,
            steps      : 300,
            blendmode  : 'multiply',
            animationDuration: 90,
            map: map,
            cartocss   : CARTOCSS_TORQUE
        });

cartodb.createLayer(map, layerURL)
          .addTo(map)
          .done(function(layer) {
              ...make a small SQL query change...
          })
          .on('error', function(err) {
             console.log(err);
          });

torqueLayer.addTo(map);
torqueLayer.play();
1

If you create a Torque visualization with the Torque library and Leaflet alone, you do it the way you are starting out. If you use CartoDB.js, it has a lot of the logic to make it simpler for you. You don't ever actually have to create the Torque object, just tell CartoDB you want a new 'torque' layer,

cartodb.createLayer(map, {
      type: "torque",
      order: 1,
      options: {
        query: "",
        table_name: "monkey_jump",
        user_name: "andrew",
        tile_style: 'Map { ' 
                   +'  -torque-frame-count:19; ' 
                   +'  -torque-animation-duration:2; -torque-time-attribute:"layer"; ' 
                   +'  -torque-aggregation-function:"count(cartodb_id)"; ' 
                   +'  -torque-resolution:4; -torque-data-aggregation:linear; } ' 
                   +'#monkey_jump{ ' 
                   +'  comp-op: lighter; marker-opacity: 0.9; ' 
                   +'  marker-line-color: #FFF; marker-line-width: 0; ' 
                   +'  marker-line-opacity: 1; marker-type: ellipse; ' 
                   +'  marker-width: 12; marker-fill: #FF2900; }'
        }
    })

Here is a working example,

http://bl.ocks.org/andrewxhill/9095945

  • Thank you, this works (sorry for my late reply)! I just placed this statement below the first createLayer and now both layers are visible. Just one thing, my time-attribute is a date and the slider is not showing a date format (for example it shows "07/44188"). How can I change this to show the data (with day) in the slider? – NBremer Feb 24 '14 at 10:15
  • And one other small thing. When I try to also load a jquery library, the cartodb.mod.torque.js gives the error that there is no method slider and the Torque layer fails to load (although the other static layer does load) – NBremer Feb 24 '14 at 10:25
  • be sure you load the jquery library before the CartoDB.js library. CartoDB.js will load jquery on its own, so I often just use the one it loads. The issue with dates was an error in the lib, it should be fixed already – andrewxhill Feb 27 '14 at 21:10

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.