makella · May 22, 2019 22:37
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>Crime Reports 2019</h1>
            </header>
            <section>
                <p class="description open-sans">Count of crime incidents</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: [-122.4326773175207, 37.75977903996777],
            zoom: 11,
            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('sf_crime_2019');
        const viz = new carto.Viz(`
            @count: clusterCount()
            @v_features: viewportFeatures(@count)
            @opacity: 0.8
            @res: 32
            
            width: sqrt(@count)
            color: opacity(#775cbc,@opacity)
            //color: opacity(ramp(clusterMODE($incident_category),bold),@opacity)
            resolution: 32
            strokeWidth: 0
        `);
        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": Math.round(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: ['>', ['number', ['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>Crime Reports 2019</h1>
	</header>
	<section>
	<p class="description open-sans">Count of crime incidents</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: [-122.4326773175207, 37.75977903996777],
	zoom: 11,
	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('sf_crime_2019');
	const viz = new carto.Viz(`
	@count: clusterCount()
	@v_features: viewportFeatures(@count)
	@opacity: 0.8
	@res: 32

	width: sqrt(@count)
	color: opacity(#775cbc,@opacity)
	//color: opacity(ramp(clusterMODE($incident_category),bold),@opacity)
	resolution: 32
	strokeWidth: 0
	`);
	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": Math.round(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: ['>', ['number', ['get', 'label_field']], 1]
	});
	});

	layer.addTo(map);

	</script>
	</body>
	</html>