Skip to content

Instantly share code, notes, and snippets.

@jatorre jatorre/index.html
Last active Jan 11, 2018

Embed
What would you like to do?
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.