Skip to content

Instantly share code, notes, and snippets.

@andrewxhill

andrewxhill/dark-theme.css

Last active August 29, 2015 13:55
Show Gist options
  • Save andrewxhill/8695515 to your computer and use it in GitHub Desktop.
Save andrewxhill/8695515 to your computer and use it in GitHub Desktop.
Download ZIP
Spreading points found at the same location
Raw
dark-theme.css
/* Change the styles below in order to customize your template */
body{font-family: Helvetica, Arial; font-weight: regular; font-size: 15px; color: #CBCBCB; background-color: #333}
h1{font-weight: bold; font-size: 31px; letter-spacing: -1px; color: #FFF; line-height: 33px; *margin-top:20px;}
h3{font-weight: bold; font-size: 12px; color: #777; text-transform: uppercase; margin: 10px 0 0 0;}
p{margin: 8px 0 20px 0; line-height: 18px;}
a, a:visited{color: #72B6E5; text-decoration: none;}
a:hover{text-decoration: underline;}
.context{font-family: Helvetica, Arial; font-size: 13px; color: #999; padding: 10px 0 0 0;}
.subheader{border-bottom: 1px solid #555;}
.footer{border-top: 1px solid #555; margin-top: 20px;}
.map{background-color:#eee; border-bottom: 1px solid #000; border-top: 1px solid #000; height: 440px; margin: 10px 0 25px 0;}
.titleBlock{text-align: center;}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--Edit the title of the page-->
<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="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]-->
<link rel="stylesheet" href="makeitresponsive.css">
<!--Switch between the different themes changing the stylesheet below - light-theme.css |dark-theme.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">
<!--Link to your personal website, your blog or your twitter account-->
<p>Map created by <a href="http://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>
<!--Copy and paste the "row" div below a second, third, or fourth time to create content blocks-->
<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>
<!--This is an example of a second content block-->
<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>
<!--Play fair and keep the attributions. If you do so, we will love you even more. :)-->
<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="http://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="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<!--Change the URL's below in order to change the maps that are being shown.
map1 is the one on the left side and map2 is the one on the right side.
Go to your map view in CartoDB, click on share, and copy the URL under the API section
Check the cartodb.js documentation for more info
http://developers.cartodb.com/documentation/cartodb-js.html-->
<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
});
// add a nice baselayer from Stamen
L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
attribution: 'Stamen'
}).addTo(map1);
L.tileLayer('http://{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']);
});
//Applies the same view from src to tgt map
function changeMapState(src,tgt){
tgt.setZoom(src.getZoom());
tgt.panTo(src.getCenter());
}
</script>
</body>
</html>
Raw
makeitresponsive.css
/* Here are the styles that makes the template responsive */
.row {width: 96%; max-width: 960px; margin: 0 auto; text-align: center;}
.row:before, .row:after {content: " "; display: table;}
.row:after {clear: both;}
.row .row {width: 100%;}
.col {display: inline; float: left; margin: 0 1%; position: relative;}
.col .col {margin: 0 2%;}
.col .col:first-child {margin-left: 0;}
.col .col:last-child {margin-right: 0;}
.span1 {width: 4.25%;}
.span2 {width: 10.5%;}
.span3 {width: 16.75%;}
.span4 {width: 23%;}
.span5 {width: 29.5%;}
.span6 {width: 35.5%;}
.span7 {width: 41.75%;}
.span8 {width: 48%;}
.span9 {width: 54.25%;}
.span10 {width: 60.5%;}
.span11 {width: 66.75%;}
.span12 {width: 73%;}
.span13 {width: 79.25%;}
.span14 {width: 85.5%;}
.span15 {width: 91.75%;}
.span16 {width: 98%;}
@media only screen and (max-width: 480px) {
.col.span8 {margin: 0; width: 100%;}
.col.span12 {margin: 0; width: 100%;}
.col.span4 {margin: 0; text-align: left;}
.col.footer {margin: 30px 0 0 0;}
.col.span4.titleBlock h3 {margin: 5px 0 0 0;}
.col.span2.empty {margin: 0; width: 100%; display: none}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment