index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Split overlapping points.</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="//libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<link rel="stylesheet" href="makeitresponsive.css">
<link rel="stylesheet" href="dark-theme.css">
</head>
<body>
<div class="row">
<div class="col span2 empty"><p></p></div>
<div class="col span12 context subheader">
<p>Map created by <a href="//twitter.com/andrewxhill">andrewxhhill</a></p>
</div>
<div class="col span2 empty"><p></p></div>
</div>
<div class="row">
<div class="col span8 map" id="map1"></div>
<div class="col span8 map" id="map2"></div>
</div>
<div class="row">
<div class="col span2 empty"><p></p></div>
<div class="col span12 titleBlock">
<h3>Description block</h3>
</div>
<div class="col span2 empty"><p></p></div>
</div>
<div class="row">
<div class="col span2 empty"><p></p></div>
<div class="col span12">
<p>A quick test to try and create a generic SQL script for breaking up multiple overlapping points</p>
</div>
<div class="col span2 empty"><p></p></div>
</div>
<div class="row">
<div class="col span2 empty"><p></p></div>
<div class="col span12 titleBlock">
<h3>Description block 2</h3>
</div>
<div class="col span2 empty"><p></p></div>
</div>
<div class="row">
<div class="col span2 empty"><p></p></div>
<div class="col span12">
<p>We hope you enjoy <a href="#">our templates</a> and we will continue creating new ones as much as we can!</p>
</div>
<div class="col span2 empty"><p></p></div>
</div>
<div class="row">
<div class="col span2 empty"><p></p></div>
<div class="col span12 context footer">
<p>Create your maps with ease using <a href="//cartodb.com">CartoDB</a></p></p>
</div>
<div class="col span2 empty"><p></p></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&v=3.8"></script>
<script src="//libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script type="sql/html" id="sql_template">
WITH q AS (SELECT cartodb_id, the_geom_webmercator FROM twain WHERE name = 'New Orleans, LA, US'),
m AS (SELECT count(*) n, array_agg(cartodb_id) id_list, the_geom_webmercator FROM q GROUP BY the_geom_webmercator),
f AS (SELECT n, generate_series(1, array_length(id_list,1)) p, unnest(id_list) cartodb_id, the_geom_webmercator FROM m)
SELECT ST_SetSRID(ST_MakePoint(ST_X(f.the_geom_webmercator) + f.p * 180 * cos(f.p * radians(301*ceil(f.n/20.0))/f.n), ST_Y(f.the_geom_webmercator) + f.p*180 * sin(f.p * radians(301*ceil(f.n/20.0))/f.n)),3857) the_geom_webmercator, f.cartodb_id, t.name, t.passage, t.source FROM f, twain t WHERE f.cartodb_id = t.cartodb_id
</script>
<script type="text/javascript">
var map1 = L.map('map1', {
zoomControl: true,
center: [29.9537, -90.0777],
zoom: 9
});
var map2 = L.map('map2', {
zoomControl: false,
center: [29.9537, -90.0777],
zoom: 9
});
L.tileLayer('//{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
attribution: 'Stamen'
}).addTo(map1);
L.tileLayer('//{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
attribution: 'Stamen'
}).addTo(map2);
map1.on('moveend', function(e) {
changeMapState(map1, map2);
});
map2.on('moveend', function(e) {
changeMapState(map2, map1);
});
cartodb.createLayer(map1, {
user_name: 'andrew',
type: 'cartodb',
sublayers: [{
sql: "SELECT * FROM twain WHERE name = 'New Orleans, LA, US'",
cartocss: '#table_name {marker-fill: #0F3B82; marker-width: 25; marker-line-color: #FFF; marker-line-width: 1.5; }',
interactivity: 'cartodb_id, name, passage, source, file'
}]
})
.addTo(map1)
.done(function(layer) {
layer.getSubLayer(0).setInteraction(true);
cdb.vis.Vis.addInfowindow(map1, layer.getSubLayer(0), ['name','passage', 'source']);
});
cartodb.createLayer(map2, {
user_name: 'andrew',
type: 'cartodb',
sublayers: [{
sql: $('#sql_template').html(),
cartocss: 'Map {buffer-size: 512} #table_name {marker-fill: #0F3B82; marker-width: 25; marker-line-color: #FFF; marker-line-width: 1.5; marker-allow-overlap: true; [zoom<7] {marker-allow-overlap: false;}}',
interactivity: 'cartodb_id, name, passage, source, file'
}]
})
.addTo(map2)
.done(function(layer) {
layer.getSubLayer(0).setInteraction(true);
cdb.vis.Vis.addInfowindow(map2, layer.getSubLayer(0), ['name','passage', 'source']);
});
function changeMapState(src,tgt){
tgt.setZoom(src.getZoom());
tgt.panTo(src.getCenter());
}
</script>
</body>
</html>