On this style example we load a Torque layer that uses a SVG marker. This option is at this moment not available at the CartoDB editor so you need to edit the layer CartoCSS after selecting your options.
Last active
September 14, 2016 09:17
-
-
Save jsanz/87242484dafe15510af9 to your computer and use it in GitHub Desktop.
JavaScript: Using markers with Torque
This file contains 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> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>Example</title> | |
| <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style> | |
| html, body, #map { | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| </style> | |
| <style type="template/cartocss" id="cartocss"> | |
| /** torque_cat visualization */ | |
| Map { | |
| -torque-frame-count:256; | |
| -torque-animation-duration:60; | |
| -torque-time-attribute:"date_date"; | |
| -torque-aggregation-function:"count(cartodb_id)"; | |
| -torque-resolution:2; | |
| -torque-data-aggregation:linear; | |
| } | |
| #tornados{ | |
| comp-op: source-over; | |
| marker-fill-opacity: 0.9; | |
| marker-line-color: #FFF; | |
| marker-line-width: 0; | |
| marker-line-opacity: 1; | |
| marker-width: 16; | |
| marker-file: url(https://s3.amazonaws.com/com.cartodb.users-assets.production/production/solutions/assets/20160121100317star-24.svg); | |
| } | |
| #tornados[frame-offset=1] { | |
| marker-width:8; | |
| marker-fill-opacity:0.45; | |
| } | |
| #tornados[frame-offset=2] { | |
| marker-width:4; | |
| marker-fill-opacity:0.225; | |
| } | |
| </style> | |
| <script type="template/sql" id="sql"> | |
| SELECT | |
| *, | |
| date::timestamp as date_date | |
| FROM tornados_us | |
| </script> | |
| <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" /> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script> | |
| <script> | |
| $( document ).ready(function() { | |
| //Create the leaflet map | |
| var map = L.map('map', { | |
| zoomControl: true, | |
| center: [36.261992,-98.745117], | |
| zoom: 5 | |
| }); | |
| var layer = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>' | |
| }).addTo(map); | |
| //Add a CartoDB Layer | |
| cartodb.createLayer(map, { | |
| type: "torque", | |
| order: 1, | |
| options: { | |
| query: $('#sql').html(), | |
| table_name: "", | |
| user_name: "documentation", | |
| tile_style: $('#cartocss').html() | |
| } | |
| }).addTo(map); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment