Last active
December 13, 2015 17:58
-
-
Save javisantana/4951412 to your computer and use it in GitHub Desktop.
interactivity with a hexagon visualization
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> | |
| <style> | |
| html, body, #map { | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| </style> | |
| <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" /> | |
| <!--[if lte IE 8]> | |
| <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.ie.css" /> | |
| <![endif]--> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| </body> | |
| <!-- include cartodb.js library --> | |
| <script src="http://libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script> | |
| <script> | |
| var sql = "WITH hgrid AS (SELECT CDB_HexagonGrid(ST_Expand(CDB_XYZ_Extent({x},{y},{z}),CDB_XYZ_Resolution({z}) * ({z}+1)),CDB_XYZ_Resolution({z}) * ({z}+1)) as cell) SELECT hgrid.cell as the_geom_webmercator, 1 as cartodb_id, count(i.cartodb_id) as color_count FROM hgrid, ne_10m_populated_p_2 i WHERE ST_Intersects(hgrid.cell, i.the_geom_webmercator) GROUP BY hgrid.cell" | |
| function main() { | |
| var map = L.map('map', { | |
| zoomControl: false, | |
| center: [43, 0], | |
| zoom: 3 | |
| }) | |
| // add a nice baselayer from mapbox | |
| L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', { | |
| attribution: 'Stamen' | |
| }).addTo(map); | |
| cartodb.createLayer(map, 'http://examples.cartodb.com/api/v1/viz/16499/viz.json',{ | |
| query: sql, | |
| tile_style: '#ne_10m_populated_p_2 { polygon-fill:#F00; line-color: #FFF;}', | |
| interactivity: 'color_count', | |
| infowindow: false | |
| }) | |
| .on('done', function(layer) { | |
| map.addLayer(layer); | |
| layer.on('featureClick', function(e, pos, latlng, data) { | |
| alert("indowindow: " + data.color_count) | |
| cartodb.log.log(e, pos, latlng, data); | |
| }); | |
| }).on('error', function() { | |
| cartodb.log.log("some error occurred"); | |
| }); | |
| } | |
| // you could use $(window).load(main); | |
| window.onload = main; | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment