index.html
<!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="//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="//libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<script src="//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).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
});
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) {
layer.leafletLayer.options.setTileSize = 128;
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);
scroll();
setTimeout(flash, 200);
});
});
}
window.onload = main;
</script>
</body>
</html>