makella · May 21, 2019 10:40
diff --git a/index.html b/index.html
 <!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.5/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 href="https://carto.com/developers/carto-vl/v1.2.5/examples/maps/style.css" rel="stylesheet">
 </head>

 <body>
    <div id="map"></div>
    <aside class="toolbox">
        <div class="box">
            <header>
                <h1>Pittsburgh 311 Incidents</h1>
            </header>
            <section>
                <p class="description open-sans">Symbolize and label by viewport cluster count</p>
            </section>
            <footer class="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: [-79.9989207567719, 40.44770237075463],
            zoom: 13,
            scrollZoom: false
        });

        const nav = new mapboxgl.NavigationControl({
            showCompass: false
        });
        map.addControl(nav, 'top-left');


        carto.setDefaultConfig({
            serverURL: 'https://{user}.carto.com'
        });

        carto.setDefaultAuth({
            username: 'cartovl',
            apiKey: 'default_public'
        });


        const source = new carto.source.Dataset('pittsburgh_311');
        const viz = new carto.Viz(`
            @count: clusterCount()
            @v_features: viewportFeatures(@count)
            
            width: ramp(linear(@count, viewportMIN(@count), viewportMAX(@count)), [8,65])
            color: opacity(ramp(buckets(@count,[5,25,50,100]),reverse(sunsetdark)),0.8)
            strokeWidth: 1
            strokeColor: black
            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 Bold", "Arial Unicode MS Regular"],
                    "text-size": 10,
                    "text-justify": "center"
                },
                "paint": {
                    "text-color": "#FFFFFF",
                    "text-halo-color": "black",
                    "text-halo-width": 0.5,
                    "text-halo-blur": 0
                },
                filter: ['!=', ['string', ['get', 'label_field']], '1']
            });
        });

        layer.addTo(map);

    </script>
 </body>

 </html>
	<!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.5/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 href="https://carto.com/developers/carto-vl/v1.2.5/examples/maps/style.css" rel="stylesheet">
	</head>

	<body>
	<div id="map"></div>
	<aside class="toolbox">
	<div class="box">
	<header>
	<h1>Pittsburgh 311 Incidents</h1>
	</header>
	<section>
	<p class="description open-sans">Symbolize and label by viewport cluster count</p>
	</section>
	<footer class="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: [-79.9989207567719, 40.44770237075463],
	zoom: 13,
	scrollZoom: false
	});

	const nav = new mapboxgl.NavigationControl({
	showCompass: false
	});
	map.addControl(nav, 'top-left');


	carto.setDefaultConfig({
	serverURL: 'https://{user}.carto.com'
	});

	carto.setDefaultAuth({
	username: 'cartovl',
	apiKey: 'default_public'
	});


	const source = new carto.source.Dataset('pittsburgh_311');
	const viz = new carto.Viz(`
	@count: clusterCount()
	@v_features: viewportFeatures(@count)

	width: ramp(linear(@count, viewportMIN(@count), viewportMAX(@count)), [8,65])
	color: opacity(ramp(buckets(@count,[5,25,50,100]),reverse(sunsetdark)),0.8)
	strokeWidth: 1
	strokeColor: black
	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 Bold", "Arial Unicode MS Regular"],
	"text-size": 10,
	"text-justify": "center"
	},
	"paint": {
	"text-color": "#FFFFFF",
	"text-halo-color": "black",
	"text-halo-width": 0.5,
	"text-halo-blur": 0
	},
	filter: ['!=', ['string', ['get', 'label_field']], '1']
	});
	});

	layer.addTo(map);

	</script>
	</body>

	</html>