Skip to content

Instantly share code, notes, and snippets.

@jatorre

jatorre/index.html

Created June 22, 2020 10:16
Show Gist options
  • Save jatorre/8aefeb6a44b1adc739ba5f687caced52 to your computer and use it in GitHub Desktop.
Save jatorre/8aefeb6a44b1adc739ba5f687caced52 to your computer and use it in GitHub Desktop.
Download ZIP
Test with washington pings
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>MapboxGL VECTOR CartoBasemaps and Vector DATA</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css' rel='stylesheet' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/nanoajax/0.4.3/nanoajax.min.js"></script>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
var map = new mapboxgl.Map({
container: 'map',
style: 'http://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
center: [-73.99952307865874,40.720456948272926],
zoom: 4,
});
map.on('style.load', function () {
var tileSet = "cartodb-gcp-backend-data-team.carto_tilesets.washington_pings_res8_z0_14_correos";
//You need access to [email protected]
var p_req = {"version":1,"partitions":4000,"zmin":0,"zmax":14,"zstep":1,"xmin":4634,"xmax":4747,"ymin":6219,"ymax":6322};
var partition = p_req.zmin +"_"+p_req.zmax+"_"+p_req.xmin+"_"+p_req.xmax+"_"+p_req.ymin+"_"+p_req.ymax+"_"+p_req.partitions+"_"+p_req.zstep;
cartoSource = {
type: 'vector',
maxzoom: 14,
tiles: [
"http://cartotest.com.global.prod.fastly.net/bqtiler?y={y}&x={x}&z={z}&p="+partition+"&t="+tileSet,
"http://cartotest2.com.global.prod.fastly.net/bqtiler?y={y}&x={x}&z={z}&p="+partition+"&t="+tileSet,
"http://cartotest3.com.global.prod.fastly.net/bqtiler?y={y}&x={x}&z={z}&p="+partition+"&t="+tileSet,
"http://cartotest4.com.global.prod.fastly.net/bqtiler?y={y}&x={x}&z={z}&p="+partition+"&t="+tileSet]
//tiles: ["https://us-central1-cartobq.cloudfunctions.net/py_bq_tiler?y={y}&x={x}&z={z}&q=2588672&t=cartodb-gcp-backend-data-team.carto_tilesets.osm_buildings_all_res8_z0_14"]
};
map.addSource('cartoSource', cartoSource);
map.addLayer({
'id': 'bqtiler',
'type': 'fill',
'source': 'cartoSource',
'source-layer': 'default',
'paint': {
'fill-color': [
'step',
['get','aggregated_total'],
'#009392',
1,
'#39b185',
10,
'#9ccb86',
100,
'#e9e29c',
1000,
'#eeb479',
10000,
'#e88471',
100000,
'#cf597e'
],
'fill-opacity': 0.4
}
},'place_town');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment