-
-
Save AbelVM/a9711aa526586fa45086a6bb1c37df12 to your computer and use it in GitHub Desktop.
Inspired by https://gist.github.com/andrewxhill/8695353, this new approach using Mapnik tokens and window functions generates a simple and fast clustering aggregation
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 lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <!--Edit the title of the page--> | |
| <title>Simple Clustering test</title> | |
| <meta name="description" content=""> | |
| <meta name="author" content="Abel Vázquez"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | |
| <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" /> | |
| <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script> | |
| <link rel="stylesheet" href="main.css"> | |
| </head> | |
| <body> | |
| <div class="map" id="map"></div> | |
| <script type="sql/html" id="sql_template"> | |
| WITH | |
| _pre as( | |
| SELECT | |
| row_number() over() as cartodb_id, | |
| count(*) as point_count, | |
| ST_centroid(st_collect(the_geom)) as the_geom, | |
| ST_centroid(st_collect(the_geom_webmercator)) as the_geom_webmercator | |
| FROM tornados_copy | |
| GROUP BY st_geohash(the_geom, CDB_ZoomFromScale(!scale_denominator!)- 4) | |
| ) | |
| SELECT | |
| *, | |
| percent_rank() over(ORDER BY point_count) as relative_size | |
| FROM _pre | |
| </script> | |
| <script type="css/html" id="cartocss_template"> | |
| Map {buffer-size: 256;} | |
| #layer { | |
| opacity: 0.6; | |
| marker-fill: red; | |
| marker-line-width: 0; | |
| marker-allow-overlap: true; | |
| marker-width: 5 + [relative_size] * 100; | |
| } | |
| #layer::lables { | |
| text-size: 0; | |
| text-halo-radius: 0; | |
| text-fill: black; | |
| text-opacity: 0.8; | |
| text-name: [point_count]; | |
| text-face-name: 'DejaVu Sans Book'; | |
| text-halo-fill: fadeout(white, 30%); | |
| text-allow-overlap: true; | |
| [point_count > 1] {text-size: 8 + [relative_size] * 30; text-halo-radius: 1; } | |
| } | |
| </script> | |
| <script type="text/javascript"> | |
| var map; | |
| function main() { | |
| // create leaflet map | |
| map = L.map('map', { | |
| zoomControl: true, | |
| center: [35, -85], | |
| zoom: 6, | |
| minZoom: 6 | |
| }) | |
| // add a base layer | |
| L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', { | |
| attribution: 'Stamen' | |
| }).addTo(map); | |
| var baseSql = $('#sql_template').html(); | |
| var cartoCss = $('#cartocss_template').html(); | |
| var sublayer; | |
| // add cartodb layer with one sublayer | |
| cartodb.createLayer(map, { | |
| user_name: 'andrew', | |
| type: 'cartodb', | |
| sublayers: [{ | |
| sql: baseSql, | |
| cartocss: cartoCss, | |
| interactivity: 'cartodb_id, point_count, relative_size' | |
| }] | |
| }) | |
| .addTo(map) | |
| .done(function(layer) { | |
| sublayer = layer.getSubLayer(0); | |
| sublayer.setInteraction(true); | |
| }); | |
| } | |
| window.onload = main; | |
| </script> | |
| </body> | |
| </html> |
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
| /* Change the styles below in order to customize your template */ | |
| body{font-family: Helvetica, Arial; font-weight: regular; font-size: 15px; color: #555; background-color: #FFF; margin: 0;} | |
| h1{font-weight: bold; font-size: 31px; letter-spacing: -1px; color: #333; line-height: 33px;} | |
| h3{font-weight: bold; font-size: 12px; color: #CCC; text-transform: uppercase; margin: 10px 0 0 0;} | |
| p{margin: 8px 0 20px 0; line-height: 18px;} | |
| a, a:visited{color: #397DB8; text-decoration: none;} | |
| a:hover{text-decoration: underline;} | |
| .wrapper{display: block; padding: 4px 30px 0 30px;} | |
| .map{background-color:#eee; position: absolute; top: 0; left: 0; bottom: 0; width:100%; *height:100%;} | |
| .sidepanel{background-color:#FFF; position: absolute; top: 0; right: 0; bottom: 0; width: 33%; height: 100%; overflow: auto;} | |
| .context{font-family: Helvetica, Arial; font-size: 13px; color: #999; padding: 10px 0 0 0;} | |
| .subheader{border-bottom: 1px solid #ddd;} | |
| .footer{border-top: 1px solid #ddd; margin-top: 30px;} | |
| .titleBlock{text-align: right;} | |
| /* Here are the styles that makes the template responsive */ | |
| @media only screen and (max-width: 768px) { | |
| .map{position: inherit; height: 400px; width: 100%; display: block;} | |
| .sidepanel{position: inherit; width: 100%;} | |
| } | |
| @media only screen and (max-width: 480px) { | |
| .map {height: 300px;} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment