Created
September 20, 2017 12:53
-
-
Save ramiroaznar/aa7c46fcefdb1978f257ae8c41fa6ae6 to your computer and use it in GitHub Desktop.
invalidate + setInterval + CARTO.js
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> | |
| <title>invalidate + setInterval + CARTO.js</title> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> | |
| <link rel="shortcut icon" href="https://cartodb.com/assets/favicon.ico" /> | |
| <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> | |
| <style> | |
| html, body, #map { | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- map div --> | |
| <div id="map"></div> | |
| <script type="text/cartocss" id="style"> | |
| #layer { | |
| marker-width: 10; | |
| marker-fill: red; | |
| } | |
| </script> | |
| <script type="text/sql" id="query"> | |
| SELECT * FROM geo_test | |
| </script> | |
| <script> | |
| function main() { | |
| // get selector | |
| var selector = $(".js-city-selector"); | |
| // get styles & query | |
| style = $("#style").text(), | |
| query = $("#query").text(), | |
| // declare map variable | |
| map = L.map('map', { | |
| zoomControl: false, | |
| center: [41, -3], | |
| zoom: 3 | |
| }); | |
| // add basemap | |
| L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CARTO</a>'}).addTo(map); | |
| // add cartodb layer | |
| cartodb.createLayer(map, { | |
| user_name: 'ramirocartodb', | |
| type: 'cartodb', | |
| sublayers: [{ | |
| sql: query, | |
| cartocss: style, | |
| }] | |
| }).addTo(map) | |
| .done(function(layer){ | |
| // declare sublayer variable | |
| var sublayer = layer.getSubLayer(0); | |
| setInterval(function(){ | |
| layer.invalidate(); | |
| console.log("Update!") | |
| }, 5000); | |
| }); | |
| } | |
| window.onload = main; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment