Skip to content

Instantly share code, notes, and snippets.

@padawannn

padawannn/index.html

Created March 15, 2018 08:39
Show Gist options
  • Save padawannn/906421bca569a56bf76cce7ece90e287 to your computer and use it in GitHub Desktop.
Save padawannn/906421bca569a56bf76cce7ece90e287 to your computer and use it in GitHub Desktop.
Download ZIP
Carto-cluster
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>MapboxGL CARTO Building</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
const map = new mapboxgl.Map({
container: 'map',
center: [-3.8196205, 40.4378698],
style: 'http://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',
zoom: 5
});
map.on('load', function(){
loadCcaaCluster();
loadProvincesCluster();
loadMunCluster();
loadPcCluster();
loadPois();
});
async function loadCcaaCluster() {
const mapConfig = {
buffersize: { mvt: 0 },
layers: [
{
id: 'ccaa_cluster',
type: 'mapnik',
options: {
sql: `SELECT ccaa.cartodb_id, q.count, ST_Centroid(ccaa.the_geom_webmercator) as the_geom_webmercator
FROM (
SELECT ccaa, count(cartodb_id) FROM pois
GROUP BY ccaa) as q
INNER JOIN ccaa on ccaa.cartodb_id = q.ccaa
`,
aggregation: false
}
}
]
},
tilejson = await getTiles(mapConfig)
;
map.addSource('ccaa_source', { type: 'vector', tiles: tilejson });
map.addLayer({
id: 'ccaa',
type: 'circle',
source: 'ccaa_source',
'source-layer': 'ccaa_cluster',
maxzoom: 7,
paint: {
'circle-color': '#A4A5A7',
'circle-opacity': 0.8,
'circle-radius': [
'interpolate',
['linear'],
['get', 'count'],
1000, 20,
25000, 40
]
}
});
map.addLayer({
id: 'ccaa_symbol',
type: 'symbol',
source: 'ccaa_source',
maxzoom: 7,
'source-layer': 'ccaa_cluster',
layout: {
'text-field': '{count}',
'text-size': 12
}
});
}
async function loadProvincesCluster() {
const mapConfig = {
buffersize: { mvt: 0 },
layers: [
{
id: 'provinces_cluster',
type: 'mapnik',
options: {
sql: `SELECT provincias.cartodb_id, q.count, ST_Centroid(provincias.the_geom_webmercator) as the_geom_webmercator
FROM (
SELECT province , count(cartodb_id) FROM pois
GROUP BY province
) as q
INNER JOIN provincias on provincias.cartodb_id = q.province
`,
aggregation: false
}
}
]
},
tilejson = await getTiles(mapConfig)
;
map.addSource('provinces_source', { type: 'vector', tiles: tilejson });
map.addLayer({
id: 'provinces_',
type: 'circle',
source: 'provinces_source',
'source-layer': 'provinces_cluster',
minzoom: 7,
maxzoom: 9,
paint: {
'circle-color': '#A4A5A7',
'circle-opacity': 0.8,
'circle-radius': [
'interpolate',
['linear'],
['get', 'count'],
1000, 20,
25000, 40
]
}
});
map.addLayer({
id: 'provinces_symbol',
type: 'symbol',
source: 'provinces_source',
'source-layer': 'provinces_cluster',
minzoom: 7,
maxzoom: 9,
layout: {
'text-field': '{count}',
'text-size': 12
}
});
}
async function loadMunCluster() {
const mapConfig = {
buffersize: { mvt: 0 },
layers: [
{
id: 'mun_cluster',
type: 'mapnik',
options: {
sql: `SELECT municipios.cartodb_id, q.count, ST_Centroid(municipios.the_geom_webmercator) as the_geom_webmercator
FROM (
SELECT mun, count(cartodb_id) FROM pois
GROUP BY mun
) as q
INNER JOIN municipios on municipios.cartodb_id = q.mun
`,
aggregation: false
}
}
]
},
tilejson = await getTiles(mapConfig)
;
map.addSource('mun_source', { type: 'vector', tiles: tilejson });
map.addLayer({
id: 'mun',
type: 'circle',
source: 'mun_source',
'source-layer': 'mun_cluster',
minzoom: 9,
maxzoom: 11,
paint: {
'circle-color': '#A4A5A7',
'circle-opacity': 0.8,
'circle-radius': [
'interpolate',
['linear'],
['get', 'count'],
1, 10,
14000, 40
]
}
});
map.addLayer({
id: 'mun_symbol',
type: 'symbol',
source: 'mun_source',
'source-layer': 'mun_cluster',
minzoom: 9,
maxzoom: 11,
layout: {
'text-field': '{count}',
'text-size': 12
}
});
}
async function loadPcCluster() {
const mapConfig = {
buffersize: { mvt: 0 },
layers: [
{
id: 'pc_cluster',
type: 'mapnik',
options: {
sql: `SELECT pc.cartodb_id, q.count, ST_Centroid(pc.the_geom_webmercator) as the_geom_webmercator
FROM (
SELECT pc, count(cartodb_id) FROM pois
GROUP BY pc
) as q
INNER JOIN alasarr.postal_code pc on pc.cartodb_id = q.pc
`,
aggregation: false
}
}
]
},
tilejson = await getTiles(mapConfig)
;
map.addSource('pc_source', { type: 'vector', tiles: tilejson });
map.addLayer({
id: 'cp',
type: 'circle',
source: 'pc_source',
'source-layer': 'pc_cluster',
minzoom: 11,
maxzoom: 13,
paint: {
'circle-color': '#A4A5A7',
'circle-opacity': 0.8,
'circle-radius': [
'interpolate',
['linear'],
['get', 'count'],
1, 10,
5000, 40
]
}
});
map.addLayer({
id: 'pc_symbol',
type: 'symbol',
source: 'pc_source',
'source-layer': 'pc_cluster',
minzoom: 11,
maxzoom: 13,
layout: {
'text-field': '{count}',
'text-size': 12
}
});
}
async function loadPois() {
const mapConfig = {
buffersize: { mvt: 0 },
layers: [
{
id: 'aggregated',
type: 'mapnik',
options: {
sql: `SELECT * FROM pois `,
aggregation: {
threshold: 1, // Force aggregation
resolution: 1,
placement: 'centroid'
}
}
}
]
}
tilejson = await getTiles(mapConfig)
;
map.addSource('pois_source', { type: 'vector', tiles: tilejson });
map.addLayer({
id: 'pois',
type: 'circle',
minzoom: 13,
source: 'pois_source',
'source-layer': 'aggregated',
paint: {
'circle-color': '#b13f64',
'circle-stroke-width': 1,
'circle-stroke-color': '#fff',
'circle-radius': 2
}
});
}
async function getTiles(mapConfig) {
const response = await fetch('https://paulajulia.carto.com/api/v1/map', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(mapConfig)
}),
layergroup = await response.json();
return layergroup.metadata.tilejson.vector.tiles;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment