Skip to content

Instantly share code, notes, and snippets.

@VictorVelarde
Created May 2, 2019 08:51
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 VictorVelarde/3d8ec4f960390acfbd6bf71a509b78dc to your computer and use it in GitHub Desktop.
Save VictorVelarde/3d8ec4f960390acfbd6bf71a509b78dc to your computer and use it in GitHub Desktop.
[CARTO VL - Cluster count interactivity]
<!DOCTYPE html>
<html>
<head>
<title>Label clusters by count | CARTO VL</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://libs.cartocdn.com/carto-vl/v1.2.4/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="https://carto.com/developers/carto-vl/examples/maps/style.css">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Montreal parking signs</h1>
</header>
<section>
<p class="description open-sans">Symbolize, Label + Click interactivity with viewport Cluster count</p>
</section>
<footer id="js-footer"></footer>
</div>
</aside>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
center: [-73.605089, 45.536127],
zoom: 10,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('montreal_parking_signs');
const viz = new carto.Viz(`
@count: clusterCount()
@v_features: viewportFeatures(@count)
width: ramp(linear(@count, viewportMIN(@count), viewportMAX(@count)), [5,50])
color: opacity(#C91329,0.9)
strokeWidth: 0
resolution: 32
`);
const layer = new carto.Layer('layer', source, viz);
// Create labeling layer centroids
layer.on('loaded', () => {
map.addSource('labels', { type: 'geojson', data: null });
const labelSource = map.getSource('labels');
const layerUpdated = function () {
const features = viz.variables.v_features.value;
const geojsonFeatures = features.map(feature => {
return {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": feature.getRenderedCentroid()
},
"properties": {
"label_field": `${feature.properties['count']}`,
}
}
});
labelSource.setData({
type: 'FeatureCollection',
features: geojsonFeatures
});
};
layer.on('updated', layerUpdated);
// Style labels
map.addLayer({
"id": "my-labels",
"type": "symbol",
"source": "labels",
"layout": {
"text-field": "{label_field}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Regular"],
"text-size": 10,
"text-justify": "center"
},
"paint": {
"text-color": "#FFFFFF",
"text-halo-width": 0,
"text-halo-blur": 0
},
filter: ['!=', ['string', ['get', 'label_field']], '1']
});
});
// Interactivity
const interactivity = new carto.Interactivity(layer);
interactivity.on('featureClick', function (event) {
const $display = document.getElementById('js-footer');
const cluster = event.features[0];
const clusterCount = cluster ? cluster.variables.count.value : 0;
$display.innerHTML = `<h2>${clusterCount} features </h2>`;
});
layer.addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment