Skip to content

Instantly share code, notes, and snippets.

@jmwenda
Created August 15, 2016 13:35
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save jmwenda/17c06e7257963b3d0cee9a4ce84882ac to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>Named Maps Tutorial | CartoDB</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" />
</head>
<body>
<div id="map"></div>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<!-- Drop your code between the script tags below! -->
<script>
function main() {
// create leaflet map
var map = L.map('map', {
zoomControl: false,
scrollWheelZoom: false,
center: [0, 0],
zoomControl: true,
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'
}]}
var verifiedLayerSource = {
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 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'
}]}
var unverifiedLayerSource = {
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 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'
}]
}
// add kkrtods layer with one sublayer
cartodb.createLayer(map, markersLayerSource)
.addTo(map)
.done(function(layer) {
var publishedLayer = layer.getSubLayer(0);
publishedLayer.setInteraction(true);
var infowindow = publishedLayer.infowindow;
cdb.vis.Vis.addInfowindow(map, publishedLayer,['cartodb_id','cdb_list'],{triggerEvent: 'featureOver'});
publishedLayer.on('featureOver', function (e, latlng, pos, data, layer) {
if(infowindow){
$('.cartodb-popup').show();
} else {
cdb.vis.Vis.addInfowindow(map, publishedLayer,['cartodb_id','cdb_list'],{triggerEvent: 'featureOver'});
}
//$('.cartodb-popup').show();
});
publishedLayer.on('featureOut', function (e, latlng, pos, data, layer) {
$('.cartodb-popup').hide();
infowindow.destroy();
//$(document).unbind('mousemove', event, false);
//infowindow.set('visibility', false);
});
/*var tooltip = layer.leafletMap.viz.addOverlay({
type: 'tooltip',
layer: publishedLayer,
template: '<div class="cartodb-tooltip-content-wrapper"> <div class="cartodb-tooltip-content"><h3>{{cartodb_id}}</h3><p>{{cdb_list}} inhabitants</p></div></div>',
width: 200,
position: 'bottom|right',
fields: [{ name: 'cartodb_id' }, { pop_max: 'cdb_list' }]
});
$('body').append(tooltip.render().el);*/
});
// add kkrtods layer with one sublayer
cartodb.createLayer(map, verifiedLayerSource)
.addTo(map)
.done(function(layer) {
var verifiedLayer = layer.getSubLayer(0);
verifiedLayer.setInteraction(true);
var infowindow = verifiedLayer.infowindow;
cdb.vis.Vis.addInfowindow(map, verifiedLayer,['cartodb_id','cdb_list'],{triggerEvent: 'featureOver'});
verifiedLayer.on('featureOver', function (e, latlng, pos, data, layer) {
console.log(infowindow);
if(infowindow){
$('.cartodb-popup').show();
} else {
cdb.vis.Vis.addInfowindow(map, verifiedLayer,['cartodb_id','cdb_list'],{triggerEvent: 'featureOver'});
}
});
verifiedLayer.on('featureOut', function (e, latlng, pos, data, layer) {
$('.cartodb-popup').hide();
//infowindow.set('visibility', false);
});
unverifiedLayer.on('featureOver', function (e, latlng, pos, data, layer) {
console.log(infowindow);
if(infowindow){
$('.cartodb-popup').show();
} else {
cdb.vis.Vis.addInfowindow(map, unverifiedLayer,['cartodb_id','cdb_list'],{triggerEvent: 'featureOver'});
}
});
unverifiedLayer.on('featureOut', function (e, latlng, pos, data, layer) {
$('.cartodb-popup').hide();
});
/*var tooltip = layer.leafletMap.viz.addOverlay({
type: 'tooltip',
layer: verifiedLayer,
template: '<div class="cartodb-tooltip-content-wrapper"> <div class="cartodb-tooltip-content"><h3>{{cartodb_id}}</h3><p>{{cdb_list}} inhabitants</p></div></div>',
width: 200,
position: 'bottom|right',
fields: [{ name: 'cartodb_id' }, { pop_max: 'cdb_list' }]
});
$('body').append(tooltip.render().el);
*/
});
// add kkrtods layer with one sublayer
cartodb.createLayer(map, unverifiedLayerSource)
.addTo(map)
.done(function(layer) {
var unverifiedLayer = layer.getSubLayer(0);
unverifiedLayer.setInteraction(true);
var infowindow = unverifiedLayer.infowindow;
cdb.vis.Vis.addInfowindow(map, unverifiedLayer,['cartodb_id','cdb_list'],{triggerEvent: 'featureOver'});
unverifiedLayer.on('featureOver', function (e, latlng, pos, data, layer) {
console.log(infowindow);
if(infowindow){
$('.cartodb-popup').show();
} else {
cdb.vis.Vis.addInfowindow(map, unverifiedLayer,['cartodb_id','cdb_list'],{triggerEvent: 'featureOver'});
}
});
unverifiedLayer.on('featureOut', function (e, latlng, pos, data, layer) {
$('.cartodb-popup').hide();
});
/*var tooltip = layer.leafletMap.viz.addOverlay({
type: 'tooltip',
layer: unverifiedLayer,
template: '<div class="cartodb-tooltip-content-wrapper"> <div class="cartodb-tooltip-content"><h3>{{cartodb_id}}</h3><p>{{cdb_list}} inhabitants</p></div></div>',
width: 200,
position: 'bottom|right',
fields: [{ name: 'cartodb_id' }, { pop_max: 'cdb_list' }]
});
$('body').append(tooltip.render().el);
*/
});
}
window.onload = main;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment