Last active
August 29, 2015 13:59
-
-
Save andrewxhill/10591759 to your computer and use it in GitHub Desktop.
Random tiles: CartoDB hates me
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> | |
<head> | |
<title>Broken pieces | CartoDB.js</title> | |
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | |
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> | |
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" /> | |
<style> | |
html, body, #map { | |
height: 100%; | |
padding: 0; | |
margin: 0; | |
background: black; | |
} | |
#map { | |
zoom: 40%; | |
} | |
</style> | |
<script type="cartocss/html" id="cartocss_template"> | |
#my_data { | |
line-color: black; | |
line-width: 2; | |
line-comp-op: screen; | |
[color < 9] { | |
line-width: 4; | |
polygon-fill: purple; | |
polygon-opacity: 0.3; | |
[color < 7]{polygon-fill: #F21534; polygon-opacity: 0.3;} | |
polygon-comp-op: screen; | |
} | |
[color < 6] { | |
line-color: #DB1721; | |
line-smooth: 3; | |
} | |
[color < 4] { | |
line-color: #7C1950; | |
line-smooth: 2; | |
} | |
[color <= 3]{ | |
line-dasharray: 4, 8; | |
line-color: #13B5A8; | |
} | |
[color <= 1] { | |
line-color: #7EBDA4; | |
line-smooth: 8; | |
} | |
} | |
</script> | |
<script type="cartocss/html" id="cartocss_template2"> | |
#my_data { | |
[color > 8] { | |
line-width: 4; | |
polygon-fill: white; | |
polygon-opacity: 0.2; | |
polygon-comp-op: multiply; | |
} | |
[color = 8]{building-fill: yellow; building-fill-opacity: 0.3; building-height:1000 } | |
[color < 8] { | |
line-color: white; | |
line-width: 1; | |
line-comp-op: screen; | |
} | |
[color < 6] { | |
line-color: green; | |
line-smooth: 3; | |
} | |
[color < 4] { | |
line-color: purple; | |
line-opacity: 0.3; | |
line-smooth: 2; | |
} | |
[color <= 3]{ | |
line-dasharray: 4, 8; | |
line-color: magenta; | |
} | |
[color <= 1] { | |
line-color: aqua; | |
line-smooth: 8; | |
} | |
} | |
</script> | |
<script type="cartocss/html" id="sql_template"> | |
WITH a AS ( | |
SELECT | |
ST_Extent(ST_SetSRID(!bbox!, 3857)) geom, | |
random() r | |
), | |
b AS ( | |
SELECT | |
geom, | |
r, | |
ST_XMin(geom) xmin, | |
ST_Ymin(geom) ymin, | |
ST_XMax(geom) xmax, | |
ST_Ymax(geom) ymax, | |
ST_X(ST_Centroid(geom)) xmid, | |
ST_Y(ST_Centroid(geom)) ymid, | |
ST_MaxDistance(geom, geom) d | |
FROM a | |
), | |
c AS ( | |
SELECT | |
ST_MakePoint(xmin + abs(d * sin((g / r))), ymin + abs(d * tan((g * r)))) geom, | |
(r * 30)::int i | |
FROM | |
b, GENERATE_SERIES(1, 20) AS g | |
) | |
SELECT | |
ST_MakeLine(geom) the_geom_webmercator, | |
(i/3)::int as color | |
FROM c | |
GROUP BY (i/3)::int | |
</script> | |
<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]--> | |
</head> | |
<body> | |
<div id="map"></div> | |
<!-- include cartodb.js library --> | |
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script> | |
<script> | |
var map, la, lb; | |
function flash(){ | |
var r = Math.random(); | |
if (r < 0.25){ | |
la.getSubLayer(0).hide(); | |
// la.getSubLayer(0).hide(); | |
// } else if (r < 0.5){ | |
// lb.getSubLayer(0).hide(); | |
// la.getSubLayer(0).show(); | |
// } else if (r < 0.75){ | |
// lb.getSubLayer(0).show(); | |
// la.getSubLayer(0).hide(); | |
// } else { | |
la.getSubLayer(0).show(); | |
// lb.getSubLayer(0).show(); | |
} | |
setTimeout(flash, 1500) | |
} | |
function scroll(){ | |
map.panTo(map.getBounds().getNorthEast(), {animate: true, duration: 20, easeLinearity: 1}) | |
setTimeout(scroll, 20000) | |
} | |
function main() { | |
map = new L.Map('map', { | |
zoomControl: false, | |
center: [43, 0], | |
zoom: 20 | |
}); | |
// create a layer with 1 sublayer | |
cartodb.createLayer(map, { | |
user_name: 'andrew', | |
type: 'cartodb', | |
sublayers: [{ | |
sql: $('#sql_template').html(), | |
cartocss: $('#cartocss_template').html() | |
},{ | |
sql: $('#sql_template').html(), | |
cartocss: $('#cartocss_template').html() | |
}] | |
}).done(function(layer) { | |
// console.log(layer.leafletLayer.options) | |
layer.leafletLayer.options.setTileSize = 128; | |
// la = layer; | |
// add the layer to our map which already contains 1 sublayer | |
map.addLayer(layer); | |
cartodb.createLayer(map, { | |
user_name: 'andrew', | |
type: 'cartodb', | |
sublayers: [{ | |
sql: $('#sql_template').html(), | |
cartocss: $('#cartocss_template2').html() | |
},{ | |
sql: $('#sql_template').html(), | |
cartocss: $('#cartocss_template2').html() | |
}] | |
}).done(function(layer2) { | |
layer2.leafletLayer.options.setTileSize = 128; | |
la = layer2; | |
map.addLayer(la,1); | |
// cartodb.createLayer(map, { | |
// user_name: 'andrew', | |
// type: 'cartodb', | |
// sublayers: [{ | |
// sql: $('#sql_template').html(), | |
// cartocss: $('#cartocss_template').html() | |
// },{ | |
// sql: $('#sql_template').html(), | |
// cartocss: $('#cartocss_template').html() | |
// }] | |
// }).done(function(layer3) { | |
// layer3.leafletLayer.options.setTileSize = 128; | |
// la = layer3; | |
// map.addLayer(la,2); | |
scroll(); | |
setTimeout(flash, 200); | |
// }); | |
}); | |
}); | |
} | |
window.onload = main; | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment