Skip to content

Instantly share code, notes, and snippets.

@jmwenda

jmwenda/index.html

Created August 30, 2016 03:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jmwenda/be0d7468fd4f8c17fcf30b51975031d1 to your computer and use it in GitHub Desktop.
Save jmwenda/be0d7468fd4f8c17fcf30b51975031d1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Custom infowindow example | 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;
}
</style>
<link rel="stylesheet" href="http://libs.cartodb.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<script type="infowindow/html" id="infowindow_template">
<span> custom </span>
<div class="cartodb-popup">
<a href="#close" class="cartodb-popup-close-button close">x</a>
<div class="cartodb-popup-content-wrapper">
<div class="cartodb-popup-content">
<img style="width: 100%" src="http://rambo.webcindario.com/images/18447755.jpg">
<!-- content.data contains the field info -->
<h4>{{content.data.name}}</h4>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
<script src="http://libs.cartodb.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
function main() {
var map = L.map('map', {
zoomControl: false,
center: [0, 0],
zoom: 3
});
// add a nice baselayer from Stamen
L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
attribution: 'Stamen'
}).addTo(map);
var markersLayerSource = {
}
cartodb.createLayer(map, {
user_name: 'nation',
type: 'cartodb',
sublayers: [
{
sql: "WITH hgridA AS (SELECT CDB_HexagonGrid(ST_Expand(!bbox!, greatest(!pixel_width!,!pixel_height!) * 48), greatest(!pixel_width!,!pixel_height!) * 48) as cell), bigs AS (SELECT * FROM (SELECT ST_Centroid(ST_Collect(i.the_geom_webmercator)) as the_geom_webmercator, count(i.cartodb_id) as points_count, 1 as cartodb_id, array_agg(cartodb_id) AS id_list FROM hgridA, (select * from reports WHERE published = true) i where ST_Intersects(i.the_geom_webmercator, hgridA.cell) GROUP BY hgridA.cell) t WHERE points_count > 100 ), hgridB AS (SELECT CDB_HexagonGrid(ST_Expand(!bbox!, greatest(!pixel_width!,!pixel_height!) * 36), greatest(!pixel_width!,!pixel_height!) * 36) as cell), mids AS (SELECT * FROM (SELECT ST_Centroid(ST_Collect(i.the_geom_webmercator)) as the_geom_webmercator, count(i.cartodb_id) as points_count, 1 as cartodb_id, array_agg(cartodb_id) AS id_list FROM hgridB, (select * from reports WHERE published = true) i where ST_Intersects(i.the_geom_webmercator, hgridB.cell) AND cartodb_id NOT IN (SELECT unnest(id_list) FROM bigs) GROUP BY hgridB.cell) t WHERE points_count > 25 ), hgridC AS (SELECT CDB_HexagonGrid(ST_Expand(!bbox!, greatest(!pixel_width!,!pixel_height!) * 24), greatest(!pixel_width!,!pixel_height!) * 24) as cell), smalls AS (SELECT * FROM (SELECT ST_Centroid(ST_Collect(i.the_geom_webmercator)) as the_geom_webmercator, count(i.cartodb_id) as points_count, 1 as cartodb_id, array_agg(cartodb_id) AS id_list FROM hgridC, (select * from reports WHERE published = true) i where ST_Intersects(i.the_geom_webmercator, hgridC.cell) AND cartodb_id NOT IN (SELECT unnest(id_list) FROM bigs) AND cartodb_id NOT IN (SELECT unnest(id_list) FROM mids) GROUP BY hgridC.cell) t WHERE points_count > 5 ) SELECT the_geom_webmercator, 1 points_count, cartodb_id, ARRAY[cartodb_id] as id_list, 'origin' as src, cartodb_id::text cdb_list FROM reports WHERE published = true AND cartodb_id NOT IN (select unnest(id_list) FROM bigs) AND cartodb_id NOT IN (select unnest(id_list) FROM mids) AND cartodb_id NOT IN (select unnest(id_list) FROM smalls) UNION ALL SELECT *, 'bigs' as src, array_to_string(id_list, ',') FROM bigs UNION ALL SELECT *, 'mids' as src, array_to_string(id_list, ',') FROM mids UNION ALL SELECT *, 'smalls' as src, array_to_string(id_list, ',') FROM smalls",
https: 'force https',
cartocss: "#reports {marker-width: 12;marker-fill: #109DCD;marker-opacity: 0.6;marker-line-width: 0;marker-allow-overlap: true;marker-comp-op: dst-atop;[src = 'smalls'] {marker-width: 20; }[src = 'mids'] {marker-width: 44;}[src = 'bigs'] { marker-width: 64; }[zoom>11]{marker-width: 52;}}#reports::lables {text-size: 0;text-fill: black;text-opacity: 0.8;text-name: [points_count];text-face-name: 'DejaVu Sans Book';text-halo-fill: #fff;text-halo-radius: 0;[src = 'smalls'] {text-size: 18; text-halo-radius: 1; }[src = 'mids'] {text-size: 26; text-halo-radius: 1; }[src = 'bigs'] { text-size: 32; text-halo-radius: 1; } text-allow-overlap: true;[zoom>11] {text-size: 36;}}",
interactivity: 'cartodb_id, cdb_list',
},{
sql: "WITH hgridA AS (SELECT CDB_HexagonGrid(ST_Expand(!bbox!, greatest(!pixel_width!,!pixel_height!) * 48), greatest(!pixel_width!,!pixel_height!) * 48) as cell), bigs AS (SELECT * FROM (SELECT ST_Centroid(ST_Collect(i.the_geom_webmercator)) as the_geom_webmercator, count(i.cartodb_id) as points_count, 1 as cartodb_id, array_agg(cartodb_id) AS id_list FROM hgridA, (select * from reports WHERE verified = true and published = false) i where ST_Intersects(i.the_geom_webmercator, hgridA.cell) GROUP BY hgridA.cell) t WHERE points_count > 100 ), hgridB AS (SELECT CDB_HexagonGrid(ST_Expand(!bbox!, greatest(!pixel_width!,!pixel_height!) * 36), greatest(!pixel_width!,!pixel_height!) * 36) as cell), mids AS (SELECT * FROM (SELECT ST_Centroid(ST_Collect(i.the_geom_webmercator)) as the_geom_webmercator, count(i.cartodb_id) as points_count, 1 as cartodb_id, array_agg(cartodb_id) AS id_list FROM hgridB, (select * from reports WHERE verified = true and published = false) i where ST_Intersects(i.the_geom_webmercator, hgridB.cell) AND cartodb_id NOT IN (SELECT unnest(id_list) FROM bigs) GROUP BY hgridB.cell) t WHERE points_count > 25 ), hgridC AS (SELECT CDB_HexagonGrid(ST_Expand(!bbox!, greatest(!pixel_width!,!pixel_height!) * 24), greatest(!pixel_width!,!pixel_height!) * 24) as cell), smalls AS (SELECT * FROM (SELECT ST_Centroid(ST_Collect(i.the_geom_webmercator)) as the_geom_webmercator, count(i.cartodb_id) as points_count, 1 as cartodb_id, array_agg(cartodb_id) AS id_list FROM hgridC, (select * from reports WHERE verified = true and published = false) i where ST_Intersects(i.the_geom_webmercator, hgridC.cell) AND cartodb_id NOT IN (SELECT unnest(id_list) FROM bigs) AND cartodb_id NOT IN (SELECT unnest(id_list) FROM mids) GROUP BY hgridC.cell) t WHERE points_count > 5 ) SELECT the_geom_webmercator, 1 points_count, cartodb_id, ARRAY[cartodb_id] as id_list, 'origin' as src, cartodb_id::text cdb_list FROM reports WHERE verified = true AND published = false AND cartodb_id NOT IN (select unnest(id_list) FROM bigs) AND cartodb_id NOT IN (select unnest(id_list) FROM mids) AND cartodb_id NOT IN (select unnest(id_list) FROM smalls) UNION ALL SELECT *, 'bigs' as src, array_to_string(id_list, ',') FROM bigs UNION ALL SELECT *, 'mids' as src, array_to_string(id_list, ',') FROM mids UNION ALL SELECT *, 'smalls' as src, array_to_string(id_list, ',') FROM smalls",
https: 'force https',
cartocss: "#reports {marker-width: 12;marker-fill: #99FF00;marker-opacity: 0.6;marker-line-width: 0;marker-allow-overlap: true;marker-comp-op: dst-atop;[src = 'smalls'] {marker-width: 20; }[src = 'mids'] {marker-width: 44;}[src = 'bigs'] { marker-width: 64; }[zoom>11]{marker-width: 52;}}#reports::lables {text-size: 0;text-fill: black;text-opacity: 0.8;text-name: [points_count];text-face-name: 'DejaVu Sans Book';text-halo-fill: #fff;text-halo-radius: 0;[src = 'smalls'] {text-size: 18; text-halo-radius: 1; }[src = 'mids'] {text-size: 26; text-halo-radius: 1; }[src = 'bigs'] { text-size: 32; text-halo-radius: 1; } text-allow-overlap: true;[zoom>11] {text-size: 36;}}",
interactivity: 'cartodb_id, cdb_list',
},{
sql: "WITH hgridA AS (SELECT CDB_HexagonGrid(ST_Expand(!bbox!, greatest(!pixel_width!,!pixel_height!) * 48), greatest(!pixel_width!,!pixel_height!) * 48) as cell),bigs AS (SELECT * FROM (SELECT ST_Centroid(ST_Collect(i.the_geom_webmercator)) as the_geom_webmercator, count(i.cartodb_id) as points_count, 1 as cartodb_id, array_agg(cartodb_id) AS id_list FROM hgridA, (select * from reports WHERE verified = false and published = false) i where ST_Intersects(i.the_geom_webmercator, hgridA.cell) GROUP BY hgridA.cell) t WHERE points_count > 100 ), hgridB AS (SELECT CDB_HexagonGrid(ST_Expand(!bbox!, greatest(!pixel_width!,!pixel_height!) * 36), greatest(!pixel_width!,!pixel_height!) * 36) as cell), mids AS (SELECT * FROM (SELECT ST_Centroid(ST_Collect(i.the_geom_webmercator)) as the_geom_webmercator, count(i.cartodb_id) as points_count, 1 as cartodb_id, array_agg(cartodb_id) AS id_list FROM hgridB, (select * from reports WHERE verified = false and published = false) i where ST_Intersects(i.the_geom_webmercator, hgridB.cell) AND cartodb_id NOT IN (SELECT unnest(id_list) FROM bigs) GROUP BY hgridB.cell) t WHERE points_count > 25 ), hgridC AS (SELECT CDB_HexagonGrid(ST_Expand(!bbox!, greatest(!pixel_width!,!pixel_height!) * 24), greatest(!pixel_width!,!pixel_height!) * 24) as cell), smalls AS (SELECT * FROM (SELECT ST_Centroid(ST_Collect(i.the_geom_webmercator)) as the_geom_webmercator, count(i.cartodb_id) as points_count, 1 as cartodb_id, array_agg(cartodb_id) AS id_list FROM hgridC, (select * from reports WHERE verified = false and published = false) i where ST_Intersects(i.the_geom_webmercator, hgridC.cell) AND cartodb_id NOT IN (SELECT unnest(id_list) FROM bigs) AND cartodb_id NOT IN (SELECT unnest(id_list) FROM mids) GROUP BY hgridC.cell) t WHERE points_count > 5 ) SELECT the_geom_webmercator, 1 points_count, cartodb_id, ARRAY[cartodb_id] as id_list, 'origin' as src, cartodb_id::text cdb_list FROM reports WHERE verified = false AND published = false AND cartodb_id NOT IN (select unnest(id_list) FROM bigs) AND cartodb_id NOT IN (select unnest(id_list) FROM mids) AND cartodb_id NOT IN (select unnest(id_list) FROM smalls) UNION ALL SELECT *, 'bigs' as src, array_to_string(id_list, ',') FROM bigs UNION ALL SELECT *, 'mids' as src, array_to_string(id_list, ',') FROM mids UNION ALL SELECT *, 'smalls' as src, array_to_string(id_list, ',') FROM smalls",
https: 'force https',
cartocss: "#reports {marker-width: 12;marker-fill: #8b0000;marker-opacity: 0.6;marker-line-width: 0;marker-allow-overlap: true;marker-comp-op: dst-atop;[src = 'smalls'] {marker-width: 20; }[src = 'mids'] {marker-width: 44;}[src = 'bigs'] { marker-width: 64; }[zoom>11]{marker-width: 52;}}#reports::lables {text-size: 0;text-fill: black;text-opacity: 0.8;text-name: [points_count];text-face-name: 'DejaVu Sans Book';text-halo-fill: #fff;text-halo-radius: 0;[src = 'smalls'] {text-size: 18; text-halo-radius: 1; }[src = 'mids'] {text-size: 26; text-halo-radius: 1; }[src = 'bigs'] { text-size: 32; text-halo-radius: 1; } text-allow-overlap: true;[zoom>11] {text-size: 36;}}",
interactivity: 'cartodb_id, cdb_list',
}]
})
.addTo(map)
.on('done', function(layer) {
// get sublayer 0 and set the infowindow template
var sublayer = layer.getSubLayer(0);
console.log(sublayer);
sublayer.infowindow.set('template', $('#infowindow_template').html());
}).on('error', function() {
console.log("some error occurred");
});
}
window.onload = main;
</script>
</body>
</html>
Raw
index.htmlold
<!DOCTYPE html>
<html>
<head>
<title>Leaflet multilayer example | 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;
}
</style>
<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>
function main() {
// create leaflet map
var map = L.map('map', {
zoomControl: false,
center: [43, 0],
zoom: 3
})
// add a base layer
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
attribution: 'Stamen'
}).addTo(map);
var markersLayerSource = {
user_name: 'nation',
type: 'cartodb',
sublayers: [{
sql: "WITH hgridA AS (SELECT CDB_HexagonGrid(ST_Expand(!bbox!, greatest(!pixel_width!,!pixel_height!) * 48), greatest(!pixel_width!,!pixel_height!) * 48) as cell), bigs AS (SELECT * FROM (SELECT ST_Centroid(ST_Collect(i.the_geom_webmercator)) as the_geom_webmercator, count(i.cartodb_id) as points_count, 1 as cartodb_id, array_agg(cartodb_id) AS id_list FROM hgridA, (select * from reports WHERE published = true) i where ST_Intersects(i.the_geom_webmercator, hgridA.cell) GROUP BY hgridA.cell) t WHERE points_count > 100 ), hgridB AS (SELECT CDB_HexagonGrid(ST_Expand(!bbox!, greatest(!pixel_width!,!pixel_height!) * 36), greatest(!pixel_width!,!pixel_height!) * 36) as cell), mids AS (SELECT * FROM (SELECT ST_Centroid(ST_Collect(i.the_geom_webmercator)) as the_geom_webmercator, count(i.cartodb_id) as points_count, 1 as cartodb_id, array_agg(cartodb_id) AS id_list FROM hgridB, (select * from reports WHERE published = true) i where ST_Intersects(i.the_geom_webmercator, hgridB.cell) AND cartodb_id NOT IN (SELECT unnest(id_list) FROM bigs) GROUP BY hgridB.cell) t WHERE points_count > 25 ), hgridC AS (SELECT CDB_HexagonGrid(ST_Expand(!bbox!, greatest(!pixel_width!,!pixel_height!) * 24), greatest(!pixel_width!,!pixel_height!) * 24) as cell), smalls AS (SELECT * FROM (SELECT ST_Centroid(ST_Collect(i.the_geom_webmercator)) as the_geom_webmercator, count(i.cartodb_id) as points_count, 1 as cartodb_id, array_agg(cartodb_id) AS id_list FROM hgridC, (select * from reports WHERE published = true) i where ST_Intersects(i.the_geom_webmercator, hgridC.cell) AND cartodb_id NOT IN (SELECT unnest(id_list) FROM bigs) AND cartodb_id NOT IN (SELECT unnest(id_list) FROM mids) GROUP BY hgridC.cell) t WHERE points_count > 5 ) SELECT the_geom_webmercator, 1 points_count, cartodb_id, ARRAY[cartodb_id] as id_list, 'origin' as src, cartodb_id::text cdb_list FROM reports WHERE published = true AND cartodb_id NOT IN (select unnest(id_list) FROM bigs) AND cartodb_id NOT IN (select unnest(id_list) FROM mids) AND cartodb_id NOT IN (select unnest(id_list) FROM smalls) UNION ALL SELECT *, 'bigs' as src, array_to_string(id_list, ',') FROM bigs UNION ALL SELECT *, 'mids' as src, array_to_string(id_list, ',') FROM mids UNION ALL SELECT *, 'smalls' as src, array_to_string(id_list, ',') FROM smalls",
https: 'force https',
cartocss: "#reports {marker-width: 12;marker-fill: #109DCD;marker-opacity: 0.6;marker-line-width: 0;marker-allow-overlap: true;marker-comp-op: dst-atop;[src = 'smalls'] {marker-width: 20; }[src = 'mids'] {marker-width: 44;}[src = 'bigs'] { marker-width: 64; }[zoom>11]{marker-width: 52;}}#reports::lables {text-size: 0;text-fill: black;text-opacity: 0.8;text-name: [points_count];text-face-name: 'DejaVu Sans Book';text-halo-fill: #fff;text-halo-radius: 0;[src = 'smalls'] {text-size: 18; text-halo-radius: 1; }[src = 'mids'] {text-size: 26; text-halo-radius: 1; }[src = 'bigs'] { text-size: 32; text-halo-radius: 1; } text-allow-overlap: true;[zoom>11] {text-size: 36;}}",
interactivity: 'cartodb_id, cdb_list'
}]}
// add kkrtods layer with one sublayer
cartodb.createLayer(map, markersLayerSource)
.addTo(map)
.done(function(layer) {
var publishedLayer = layer.getSubLayer(0);
console.log(layer.layers);
cdb.vis.Vis.addInfowindow(map, layer.getSublayer(0),['cartodb_id','cdb_list'],{triggerEvent: 'featureOver'});
});
// add cartodb layer with one sublayer
/*
cartodb.createLayer(map, {
user_name: 'examples',
type: 'cartodb',
sublayers: [{
sql: 'select * from country_boundaries',
cartocss: '#layer { polygon-fill: #F00; polygon-opacity: 0.3; line-color: #F00; }',
interactivity: 'cartodb_id'
}]
})
.addTo(map)
.done(function(layer) {
cdb.vis.Vis.addInfowindow(map, layer.getSubLayer(0), ['cartodb_id'])
});
*/
}
// 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