Created
August 15, 2016 13:35
Star
You must be signed in to star a gist
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>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