Skip to content

Instantly share code, notes, and snippets.

@jatorre

jatorre/index.html

Last active July 9, 2020 14:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jatorre/230bc8dfd7addf56085bbc6c388f4536 to your computer and use it in GitHub Desktop.
Save jatorre/230bc8dfd7addf56085bbc6c388f4536 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>CARTO BQ Tiler Pre-view map</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' />
<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: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
center: [-73.99952307865874,40.720456948272926],
zoom: 0,
});
map.on('style.load', function () {
var tileSet = "cartobq.maps.msft_buildings";
var p_req = {"version":1,"partitions":4000,"zstep":1,"zmin":0,"zmax":14,"xmin":900,"xmax":5145,"ymin":4249,"ymax":7314};
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: p_req.zmax,
tiles: [
"https://bqtiler.global.ssl.fastly.net/bqtiler?y={y}&x={x}&z={z}&p="+partition+"&t="+tileSet,
"https://bqtiler2.global.ssl.fastly.net/bqtiler?y={y}&x={x}&z={z}&p="+partition+"&t="+tileSet,
"https://bqtiler3.global.ssl.fastly.net/bqtiler?y={y}&x={x}&z={z}&p="+partition+"&t="+tileSet,
"https://bqtiler4.global.ssl.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);
var paintStyleForAggregatedTotal = {
"circle-color": {
"property": "aggregated_total",
"type": "exponential",
"stops": [
[
{"zoom": 0, "value": 1},
"rgba(0, 147, 146, 1)"
],
[
{"zoom": 0, "value": 10},
"rgba(57, 177, 133, 1)"
],
[
{"zoom": 0, "value": 100},
"rgba(156, 203, 134, 1)"
],
[
{"zoom": 0, "value": 1000},
"rgba(233, 226, 156, 1)"
],
[
{"zoom": 0, "value": 10000},
"rgba(238, 180, 121, 1)"
],
[
{"zoom": 0, "value": 100000},
"rgba(232, 132, 113, 1)"
],
[
{"zoom": 0, "value": 1000000},
"rgba(207, 89, 126, 1)"
]
]
},
"circle-radius": {
"stops": [[0, 2.2], [0.99, 2.6]]
},
"circle-opacity": 1,
"circle-blur": 0
};
var paintStyleForSimplePoints = {
"circle-color": "rgba(209, 7, 218, 1)",
"circle-radius": {
"stops": [[0, 2.2], [0.99, 2.6]]
},
"circle-opacity": 0.6,
"circle-blur": 0,
"circle-stroke-opacity": 0
};
var paintStyleForSimpleCells = {
"fill-color": "rgba(100, 0, 100, 1)",
"fill-opacity": 0.4};
var paintStyleForAggregatedCells = {
"fill-color": {
"property": "aggregated_total",
"type": "exponential",
"stops": [
[
{"zoom": 0, "value": 1},
"rgba(0, 147, 146, 1)"
],
[
{"zoom": 0, "value": 10},
"rgba(57, 177, 133, 1)"
],
[
{"zoom": 0, "value": 100},
"rgba(156, 203, 134, 1)"
],
[
{"zoom": 0, "value": 1000},
"rgba(233, 226, 156, 1)"
],
[
{"zoom": 0, "value": 10000},
"rgba(238, 180, 121, 1)"
],
[
{"zoom": 0, "value": 100000},
"rgba(232, 132, 113, 1)"
],
[
{"zoom": 0, "value": 1000000},
"rgba(207, 89, 126, 1)"
]
]
},
"fill-opacity": 0.8
};
map.addLayer({
'id': 'bqtiler',
'type': 'fill',
'source': 'cartoSource',
'source-layer': 'msft_buildings',
"paint": paintStyleForSimpleCells
},'place_town');
map.fitBounds([[-160.224609,18.916680],[-66.928711,65.136878]]);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment