Skip to content

Instantly share code, notes, and snippets.

@jatorre

jatorre/index.html

Created October 21, 2020 18:20
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/3a028150d26b40384a1ab10d9e95d8a1 to your computer and use it in GitHub Desktop.
Save jatorre/3a028150d26b40384a1ab10d9e95d8a1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>team-ricky.suk_sandbox.openaq_wildfire | CARTO BigQuery Tiler</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://storage.googleapis.com/bqtilerjslibs/mbgl1.12.0.js'></script>
<link href='https://storage.googleapis.com/bqtilerjslibs/mbgl1.12.0.css' rel='stylesheet' />
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<style>
* {
box-sizing: border-box;
}
body { display: flex; flex-direction: column; height: 100vh; margin:0; padding:0; }
#map {
position:absolute;
top:0;
left:0;
height: 100%;
width: 100%;
border-radius: 8px;
/* border: 8px solid #f2f6f9;
border-bottom: none; */
}
.map-container {
position: relative;
border: 8px solid #f2f6f9;
border-bottom: none;
border-radius: 8px;
overflow: hidden;
height: 100%;
background-color: #f2f6f9;
}
.map-footer {
display: flex;
padding: 8px;
justify-content: space-between;
align-items: center;
flex-grow: 0;
flex-shrink: 0;
/* height: 20px; */
width: 100%;
font-family: 'Open Sans', sans-serif;
background-color: #f2f6f9;
}
.map-footer p {
font-size: 12px;
line-height: 16px;
margin: 0;
}
.map-footer img {
height: 16px;
width: 16px;
vertical-align: middle;
}
#info {
position: absolute;
margin: 16px;
z-index: 1;
}
</style>
</head>
<body>
<span id="info"></span>
<div class="map-container">
<div id="map"></div>
</div>
<div class="map-footer">
<div>
<p>
<img src="data:image/png;base64,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" alt="CARTO heart"/>
Created with <a href="https://carto.com/bigquery/beta/" target="_blank" style="color: #1785fb">
CARTO BigQuery Tiler</a></p>
</div>
<div>
<a href="https://carto.com" target="_blank">
<svg viewBox="0 0 62 24" height="24" width="62" style="display: block;">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M3.94693333,15.9877346 C5.63066667,15.9877346 6.60373333,15.2552013 7.32533333,14.260268 L5.72906667,13.1232013 C5.26986667,13.6808013 4.79973333,14.0525346 4.0016,14.0525346 C2.93013333,14.0525346 2.17573333,13.1560013 2.17573333,12.0080013 L2.17573333,11.9861346 C2.17573333,10.8709346 2.93013333,9.95253464 4.0016,9.95253464 C4.73413333,9.95253464 5.23706667,10.3133346 5.6744,10.849068 L7.27066667,9.6136013 C6.5928,8.68426797 5.58693333,8.02826797 4.02346667,8.02826797 C1.7056,8.02826797 0,9.7776013 0,12.0080013 L0,12.029868 C0,14.3149346 1.76026667,15.9877346 3.94693333,15.9877346 L3.94693333,15.9877346 Z M10.93653,15.834668 L13.1559967,15.834668 L13.7026634,14.457068 L16.6655967,14.457068 L17.2122634,15.834668 L19.4863967,15.834668 L16.2282634,8.12666797 L14.18373,8.12666797 L10.93653,15.834668 Z M14.3258634,12.8061346 L15.1895967,10.6413346 L16.0423967,12.8061346 L14.3258634,12.8061346 Z M23.61653,15.834668 L25.7375966,15.834668 L25.7375966,13.5168013 L26.6778633,13.5168013 L28.2194633,15.834668 L30.6575966,15.834668 L28.83173,13.1669346 C29.78293,12.7624013 30.40613,11.9861346 30.40613,10.8053346 L30.40613,10.783468 C30.40613,10.029068 30.17653,9.4496013 29.7282633,9.00133464 C29.2143966,8.48746797 28.40533,8.18133464 27.2354633,8.18133464 L23.61653,8.18133464 L23.61653,15.834668 Z M25.7375966,11.8549346 L25.7375966,10.0072013 L27.1370633,10.0072013 C27.8367966,10.0072013 28.2850633,10.3133346 28.2850633,10.9256013 L28.2850633,10.947468 C28.2850633,11.505068 27.8586633,11.8549346 27.1479966,11.8549346 L25.7375966,11.8549346 Z M36.7338633,15.834668 L38.8549299,15.834668 L38.8549299,10.0400013 L41.1509299,10.0400013 L41.1509299,8.18133464 L34.4487966,8.18133464 L34.4487966,10.0400013 L36.7338633,10.0400013 L36.7338633,15.834668 Z" fill="#162945"></path>
<g transform="translate(37.000000, 0.000000)">
<circle fill="rgba(22,41,69,.1)" cx="12.3333333" cy="12" r="12"></circle>
<path d="M12.3333333,16.5 C14.8186147,16.5 16.8333333,14.4852814 16.8333333,12 C16.8333333,9.51471863 14.8186147,7.5 12.3333333,7.5 C9.84805196,7.5 7.83333333,9.51471863 7.83333333,12 C7.83333333,14.4852814 9.84805196,16.5 12.3333333,16.5 L12.3333333,16.5 Z" fill="#162945"></path>
</g>
</g>
</svg>
</a>
</div>
</div>
<script>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
let zoom = 0;
let center = [0, 0];
let customCenterZoom = false;
const info = urlParams.get('info') !== null;
try {
center = [parseFloat(urlParams.get('c').split(',')[0]),parseFloat(urlParams.get('c').split(',')[1])];
zoom = parseInt(urlParams.get('z'));
customCenterZoom = true;
} catch(e) {}
const map = new mapboxgl.Map({
container: 'map',
style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
center,
zoom
});
map.addControl(new mapboxgl.NavigationControl({showCompass: false}), 'bottom-left');
map.on('style.load', () => {
cartoSource = {
type: 'vector',
maxzoom: 16,
tiles: ["https://bq1.cartocdn.com/tile?y={y}&x={x}&z={z}&p=0_16_3319_19889_17121_27971_4000_1&t=team-ricky.suk_sandbox.openaq_wildfire","https://bq2.cartocdn.com/tile?y={y}&x={x}&z={z}&p=0_16_3319_19889_17121_27971_4000_1&t=team-ricky.suk_sandbox.openaq_wildfire","https://bq3.cartocdn.com/tile?y={y}&x={x}&z={z}&p=0_16_3319_19889_17121_27971_4000_1&t=team-ricky.suk_sandbox.openaq_wildfire","https://bq4.cartocdn.com/tile?y={y}&x={x}&z={z}&p=0_16_3319_19889_17121_27971_4000_1&t=team-ricky.suk_sandbox.openaq_wildfire"]
};
map.addSource('cartoSource', cartoSource);
if (info) {
map.on('zoom', () => {
const zoom = map.getZoom().toFixed(4);
document.getElementById('info').innerText = 'Zoom: ' + zoom;
});
}
map.addLayer({
'id': 'bqtiler',
'type': 'circle',
'source': 'cartoSource',
'source-layer': 'default',
"paint": {
"circle-color": {
"property": "max_pm25_level",
"type": "categorical",
"stops": [
[
{"zoom": 0, "value": 1},
"rgba(127, 60, 141, 1)"
],
[
{"zoom": 0, "value": 2},
"rgba(17, 165, 121, 1)"
],
[
{"zoom": 0, "value": 3},
"rgba(57, 105, 172, 1)"
],
[
{"zoom": 0, "value": 4},
"rgba(242, 183, 1, 1)"
],
[
{"zoom": 0, "value": 5},
"rgba(231, 63, 116, 1)"
],
[
{"zoom": 0, "value": 6},
"rgba(128, 186, 90, 1)"
],
[
{"zoom": 0, "value": 7},
"rgba(230, 131, 16, 1)"
]
]
},
"circle-radius": 4
}
},'place_town');
if(!customCenterZoom) {
map.setZoom(5);
map.setCenter([-115.09463281750475,39.734799359727496]);
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment