jatorre/index.html

## index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>OpenLayers – Vector tiles – Points aggregation | CARTO</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
    <script src="https://openlayers.org/en/v4.6.4/examples/resources/mapbox-streets-v6-style.js"></script>
    <style>
        body {
            margin:0;
            padding:0;
        }
        #map {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="map" class="map"></div>
    <script>
        (async () => {
            const mapConfig = {
                buffersize: { mvt: 0 },
                layers: [
                    {
                        id: 'aggregated',
                        options: {
                            sql: 'select * from ow',
                            aggregation: {
                                threshold: 1,
                                resolution: 4,
                                placement: 'point-grid'
                            }
                        }
                    }
                ]
            }
            const response = await fetch('https://rochoa.carto.com/api/v1/map', {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(mapConfig)
            });

            const layergroup = await response.json();
            var tilejson = layergroup.metadata.tilejson.vector;

            var map = new ol.Map({
                layers: [
                    new ol.layer.VectorTile({
                        source: new ol.source.VectorTile({
                            format: new ol.format.MVT({layerName: 'aggregated'}),
                            urls: tilejson.tiles
                        }),
                        style: new ol.style.Style({
                            image: new ol.style.Circle({
                                fill: new ol.style.Fill({
                                    color: '#F24440',
                                    opacity: 1
                                }),
                                stroke: new ol.style.Stroke({
                                    color: '#ffffff',
                                    width: 1
                                }),
                                radius: 4
                            })
                        })
                    })
                ],
                target: 'map',
                view: new ol.View({
                    center: [0, 0],
                    zoom: 2
                })
            });
        })();
    </script>
</body>

</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title>OpenLayers – Vector tiles – Points aggregation \| CARTO</title>
	<link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
	<script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
	<script src="https://openlayers.org/en/v4.6.4/examples/resources/mapbox-streets-v6-style.js"></script>
	<style>
	body {
	margin:0;
	padding:0;
	}
	#map {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
	</style>
	</head>
	<body>
	<div id="map" class="map"></div>
	<script>
	(async () => {
	const mapConfig = {
	buffersize: { mvt: 0 },
	layers: [
	{
	id: 'aggregated',
	options: {
	sql: 'select * from ow',
	aggregation: {
	threshold: 1,
	resolution: 4,
	placement: 'point-grid'
	}
	}
	}
	]
	}
	const response = await fetch('https://rochoa.carto.com/api/v1/map', {
	method: 'POST',
	headers: {
	'Accept': 'application/json',
	'Content-Type': 'application/json'
	},
	body: JSON.stringify(mapConfig)
	});

	const layergroup = await response.json();
	var tilejson = layergroup.metadata.tilejson.vector;

	var map = new ol.Map({
	layers: [
	new ol.layer.VectorTile({
	source: new ol.source.VectorTile({
	format: new ol.format.MVT({layerName: 'aggregated'}),
	urls: tilejson.tiles
	}),
	style: new ol.style.Style({
	image: new ol.style.Circle({
	fill: new ol.style.Fill({
	color: '#F24440',
	opacity: 1
	}),
	stroke: new ol.style.Stroke({
	color: '#ffffff',
	width: 1
	}),
	radius: 4
	})
	})
	})
	],
	target: 'map',
	view: new ol.View({
	center: [0, 0],
	zoom: 2
	})
	});
	})();
	</script>
	</body>

	</html>