-
-
Save mayblue9/7b5e2b2087c7300816bdf10f7558f868 to your computer and use it in GitHub Desktop.
Quick POW map!
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>CartoDB Point Clustering</title> | |
| <meta name="description" content=""> | |
| <meta name="author" content=""> | |
| <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" /> | |
| <!--[if lte IE 8]> | |
| <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" /> | |
| <![endif]--> | |
| <!--Switch between the different themes changing the stylesheet below - light-theme.css |dark-theme.css --> | |
| <style type="text/css"> | |
| body, html, #map {width: 100%; height: 100%;} | |
| .here ul {list-style: none;} | |
| .here ul li {list-style: none; margin: 2px;} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="map" id="map"></div> | |
| <div class="sidepanel"> | |
| <div class="wrapper"> | |
| <div class="context subheader"> | |
| <p>Map created by <a href="http://twitter.com/andrewxhill">@andrewxhill</a></p> | |
| </div> | |
| <div class="context footer"> | |
| <p>Create your maps with ease using <a href="http://cartodb.com">CartoDB</a></p></p> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script> | |
| <script type="sql/html" id="sql_template"> | |
| with base as (SELECT row_number() over() as polyv, geom as the_geom_webmercator FROM (SELECT (ST_Dump(ST_SimplifyPreserveTopology(the_geom_webmercator,2000))).geom FROM {1} WHERE cartodb_id = {0} LIMIT 2) a), | |
| cent as (SELECT polyv, st_centroid(the_geom_webmercator) the_geom_webmercator FROM base), | |
| pts as (SELECT polyv, (ST_DumpPoints(the_geom_webmercator)).geom AS the_geom_webmercator FROM base), | |
| lns as (select pts.polyv, ST_MakeLine(cent.the_geom_webmercator, pts.the_geom_webmercator) the_geom from pts, cent WHERE pts.polyv=cent.polyv), | |
| ext AS ( | |
| SELECT polyv, ST_MakeLine(ST_TRANSLATE(a, sin(az1) * len, cos(az1) * len),ST_TRANSLATE(b,sin(az2) * len, cos(az2) * len)) as the_geom_webmercator | |
| FROM ( | |
| SELECT polyv, a, b, ST_Azimuth(a,b) AS az1, ST_Azimuth(b, a) AS az2, ST_Distance(a,b) + ((random()+((row_number() over())%2-1.5))*(ST_Distance(a,b)/3)) AS len | |
| FROM ( | |
| SELECT polyv, ST_StartPoint(the_geom) AS a, ST_EndPoint(the_geom) AS b | |
| FROM lns | |
| ) AS sub | |
| ) AS sub2), | |
| newpts AS (SELECT polyv, row_number() over () as r, ST_SnapToGrid(ST_StartPoint(the_geom_webmercator),2000) the_geom_webmercator FROM ext), | |
| finlin AS (SELECT polyv, ST_MakeLine(the_geom_webmercator) the_geom_webmercator from newpts GROUP BY polyv) | |
| SELECT cartodb_id, the_geom_webmercator, '' as label FROM {1} | |
| UNION ALL | |
| SELECT -1 as cartodb_id, | |
| ST_MakePolygon(ST_AddPoint(the_geom_webmercator, ST_StartPoint(the_geom_webmercator))) as the_geom_webmercator, 'POW!' as label FROM finlin | |
| </script> | |
| <script type="sql/html" id="cartocss_template"> | |
| Map { | |
| buffer-size: 256; | |
| } | |
| #us_state_1840{ | |
| polygon-opacity: 0.7; | |
| line-color: #000000; | |
| line-width: 8; | |
| line-opacity: 1; | |
| polygon-pattern-file: url(https://s3.amazonaws.com/com.cartodb.users-assets.production/production/andrew-free/assets/201505161518031d.jpg); | |
| polygon-pattern-opacity: 1; | |
| line-clip: false; | |
| line-smooth: 1; | |
| polygon-clip: false; | |
| [cartodb_id = -1]{ | |
| polygon-pattern-file: url(https://s3.amazonaws.com/com.cartodb.users-assets.production/production/andrew-free/assets/201505161656031d.jpg); | |
| } | |
| } | |
| #us_state_1840[cartodb_id=-1]::labels { | |
| text-name: [label]; | |
| text-face-name: 'Lato Bold'; | |
| text-size: 60; | |
| text-label-position-tolerance: 10; | |
| text-fill: black; | |
| text-halo-fill: white; | |
| text-halo-radius: 1; | |
| text-dy: 0; | |
| text-allow-overlap: false; | |
| text-placement: point; | |
| text-placement-type: simple; | |
| text-min-distance: 100000; | |
| } | |
| </script> | |
| <script type="text/javascript"> | |
| var map; | |
| function main() { | |
| // create leaflet map | |
| map = L.map('map', { | |
| zoomControl: true, | |
| center: [35, -85], | |
| zoom: 6 | |
| }) | |
| var tablename = "us_state_1840"; | |
| var baseSql = $('#sql_template').html(); //.format(gridsize); | |
| var cartoCss = $('#cartocss_template').html(); //.format(gridsize); | |
| var sublayer; | |
| // add cartodb layer with one sublayer | |
| cartodb.createLayer(map, "https://andrew-free.cartodb.com/api/v2/viz/1414dd22-fbeb-11e4-bdca-7054d21a95e5/viz.json") | |
| .addTo(map) | |
| .done(function(layer) { | |
| // sublayer = layer.getSubLayer(0); | |
| // sublayer.setInteraction(true); | |
| // addCursorInteraction(sublayer); | |
| layer.getSubLayer(0).setInteraction(true); | |
| layer.getSubLayer(0).on('featureClick', function(e, pos, latlng, data) { | |
| layer.getSubLayer(0).setSQL(baseSql.format(data.cartodb_id, tablename)) | |
| }); | |
| }); | |
| } | |
| String.prototype.format = (function (i, safe, arg) { | |
| function format() { | |
| var str = this, | |
| len = arguments.length + 1; | |
| for (i = 0; i < len; arg = arguments[i++]) { | |
| safe = typeof arg === 'object' ? JSON.stringify(arg) : arg; | |
| str = str.replace(RegExp('\\{' + (i - 1) + '\\}', 'g'), safe); | |
| } | |
| return str; | |
| } | |
| //format.native = String.prototype.format; | |
| return format; | |
| })(); | |
| // you could use $(window).load(main); | |
| window.onload = main; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment