When you need to load a Torque layer along with other CARTO normal layers (Mapnik type) you need to call createLayer twice and load them into the map in the correct order.
Created
March 3, 2017 12:16
-
-
Save jsanz/d226f4fdfd5d9fee249b0f60df176264 to your computer and use it in GitHub Desktop.
JavaScript: load a mapnik and torque layer with CARTO.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>CreateLayer for Mapnik and Torque layers</title> | |
| <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; | |
| } | |
| </style> | |
| <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" /> | |
| <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script> | |
| </head> | |
| <body> | |
| <!-- define a map object--> | |
| <div id="map"></div> | |
| <script> | |
| function main() { | |
| // create leaflet map and define some properties | |
| var map = L.map('map', { | |
| zoomControl: false, | |
| center: [43, 0], | |
| zoom: 3 | |
| }) | |
| // add a base layer to map | |
| L.tileLayer('//cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png', { | |
| attribution: 'CARTO' | |
| }).addTo(map); | |
| var CARTOCSSTorque = [ | |
| 'Map {', | |
| '-torque-time-attribute: "cartodb_id";', | |
| '-torque-aggregation-function: "count(cartodb_id)";', | |
| '-torque-frame-count: 256;', | |
| '-torque-animation-duration: 30;', | |
| '-torque-resolution: 2', | |
| '-torque-data-aggregation:linear;', | |
| '}', | |
| '#populated_places{', | |
| ' marker-width: 12;', | |
| ' marker-fill-opacity: 1;', | |
| ' marker-fill: #FEE391; ', | |
| ' comp-op: "lighten";', | |
| ' [frame-offset = 1] { marker-width: 10; marker-fill-opacity: 0.8;}', | |
| ' [frame-offset = 2] { marker-width: 15; marker-fill-opacity: 0.6;}', | |
| '}' | |
| ].join('\n'); | |
| var query = "SELECT * FROM populated_places"; | |
| // setting the mapconfig objects for both the mapnik and torque layers | |
| mapnik_config = { | |
| user_name: 'oboix', | |
| type: 'cartodb', | |
| sublayers: [{ | |
| sql: query , | |
| cartocss: '#populated_places_test{marker-width:3; marker-fill: #229A00; marker-allow-overlap: true;}', | |
| }] | |
| }; | |
| torque_config = { | |
| type: "torque", | |
| options: { | |
| query: query, | |
| table_name: "populated_places", | |
| user_name: "oboix", | |
| tile_style: CARTOCSSTorque | |
| } | |
| }; | |
| // create the layer promises | |
| mapnik_promise = cartodb.createLayer(map,mapnik_config,{https:true}); | |
| torque_promise = cartodb.createLayer(map,torque_config,{https:true}); | |
| // use jQuery promises support to wait for both layers to load async | |
| $.when(mapnik_promise, torque_promise) | |
| .done(function(mapnik_layer,torque_layer){ | |
| mapnik_layer.addTo(map,2); | |
| torque_layer.addTo(map,3); | |
| }); | |
| } | |
| // load main() function | |
| window.onload = main; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment