Skip to content

Instantly share code, notes, and snippets.

@mayblue9
Forked from andrewxhill/index.html
Created January 4, 2017 06:05
Show Gist options
  • Save mayblue9/7b5e2b2087c7300816bdf10f7558f868 to your computer and use it in GitHub Desktop.
Save mayblue9/7b5e2b2087c7300816bdf10f7558f868 to your computer and use it in GitHub Desktop.
Quick POW map!
<!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