Created
October 21, 2020 18:20
-
-
Save jatorre/3a028150d26b40384a1ab10d9e95d8a1 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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