-
-
Save ernesmb/84d4c365d1a30b9dd404 to your computer and use it in GitHub Desktop.
sla-training_session2:async events. Actions on feature click
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>Actions on Feature Click | CartoDB.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="http://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 { | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| position:relative; | |
| } | |
| #map { | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script> | |
| function main() { | |
| var sublayer | |
| var map = L.map('map', { | |
| zoomControl: true, | |
| center: [40.418709, -3.703277], | |
| zoom: 3 | |
| }); | |
| // add a nice baselayer from Stamen | |
| L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', { | |
| attribution: 'Stamen and CartoDB attribution' | |
| }).addTo(map); | |
| cartodb.createLayer(map, { | |
| user_name: 'trainer02', | |
| maps_api_template: "https://sla-training.cartodb.solutions:443/user/{user}", | |
| sql_api_template: "https://sla-training.cartodb.solutions:443/user/{user}", | |
| tiler_protocol: "http", | |
| tiler_domain: "sla-training.cartodb.solutions", | |
| tiler_port: "80", | |
| filter: "mapnik", | |
| type: 'cartodb', | |
| sublayers: [{ | |
| sql: 'SELECT * FROM ne_10m_populated_places_simple', | |
| cartocss:'#ne_10m_populated_places_simple{ marker-fill-opacity: 0.9; marker-line-color: #FFF; marker-line-width: 0; marker-line-opacity: 1; marker-placement: point; marker-multi-policy: largest; marker-type: ellipse; marker-fill: #FFCC00; marker-allow-overlap: true; marker-clip: false; marker-comp-op: multiply;}', | |
| interactivity:"cartodb_id, pop_max, name" | |
| }] | |
| },{/*options here*/}) | |
| .addTo(map) | |
| .on('done', function(layer) { | |
| sublayer = layer.getSubLayer(0); | |
| sublayer.setInteraction(true); | |
| sublayer.on('featureClick', function(event, latlng, pos, data){ | |
| //add here any action you want to perform on click | |
| console.log(data.pop_max); | |
| console.log(pos); | |
| console.log(latlng); | |
| console.log(event); | |
| }); | |
| }) | |
| .on('error', function(e){ | |
| console.log('error: '+e) | |
| }); | |
| } | |
| window.onload = main; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment