31:T575,sceneStyle = { return { import: [ // Bubble Wrap style 'https://www.nextzen.org/carto/bubble-wrap-style/10/bubble-wrap-style.zip', 'https://www.nextzen.org/carto/bubble-wrap-style/10/themes/label-10.zip', 'https://www.nextzen.org/carto/bubble-wrap-style/10/themes/bubble-wrap-road-shields-usa.zip', // Walkabout style // 'https://www.nextzen.org/carto/walkabout-style/8.0.0/walkabout-style.zip', // 'https://www.nextzen.org/carto/walkabout-style/8.0.0/themes/label-10.zip', // 'https://www.nextzen.org/carto/walkabout-style/8.0.0/themes/walkabout-road-shields-usa.zip', // 'https://www.nextzen.org/carto/walkabout-style/8.0.0/themes/walkabout-road-shields-international.zip', // Refill style // 'https://www.nextzen.org/carto/refill-style/11/refill-style.zip', // 'https://www.nextzen.org/carto/refill-style/11/themes/label-10.zip', // 'https://www.nextzen.org/carto/refill-style/11/themes/color-gray-gold.zip', // 'https://www.nextzen.org/carto/refill-style/11/themes/color-blue.zip', // 'https://www.nextzen.org/carto/refill-style/11/themes/no-texture.zip', // 'https://www.nextzen.org/carto/refill-style/11/themes/terrain-pattern.zip', ], global: { // Nextzen API key for tiles, sign-up at https://developers.nextzen.org sdk_api_key: 'fYFPuX-sQ76LIEN8-U_lVQ' } } }32:[] 2f:{"title":"Tangram: Query Features","cells":[{"id":0,"value":"md`# Tangram: Query Features\nInteractively query the current viewport tiles for feature counts by layer, kind, and geometry.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":463,"value":"md`**${center.zoom}/${center.lat}/${center.lng}**`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"viewof center = {\n const container = map.getContainer();\n \n // see https://observablehq.com/@observablehq/introduction-to-views\n // set map center initially, and update on move event\n container.value = {\n zoom: map.getZoom().toFixed(1),\n lat: map.getCenter().lat.toFixed(5),\n lng: map.getCenter().lng.toFixed(5)\n };\n \n const listener = () => {\n container.value = {\n zoom: map.getZoom().toFixed(1),\n lat: map.getCenter().lat.toFixed(5),\n lng: map.getCenter().lng.toFixed(5)\n };\n container.dispatchEvent(new CustomEvent('input')); // tell Observable to update view value\n };\n map.on('move', listener);\n invalidation.then(() => map.off('move', listener)); // clean up resources when cell is re-evaluated\n \n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"queryFeatures = {\n const update = async () => {\n const f = await scene.queryFeatures({\n // group_by: 'kind',\n group_by: ['$layer', 'kind', '$geometry'],\n // visible: true, // only query rendered features\n });\n \n // sort features by highest count\n mutable features = Object.entries(f).sort((a, b) => b[1].length - a[1].length);\n };\n \n const listener = { view_complete: update };\n scene.subscribe(listener); // subscribe to tangram event\n invalidation.then(() => scene.unsubscribe(listener)); // clean up resources when cell is re-evaluated\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"mutable features = [];","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"features.length > 0 && html`\n \n \n \n ${Object.keys(JSON.parse(features[0][0])).map(k => html``)}\n \n \n \n \n ${\n features.map(r => html`\n \n ${Object.entries(JSON.parse(r[0])).map(k => html``)}\n \n \n `)\n }\n \n

${k}	count
${k[1]}	${r[1].length}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"md`## Setup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"L = require('leaflet@1.5');","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"Tangram = require('tangram');\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"layer = {\n const container = DOM.element('div', { style: `width:${width}px;height:${width/2}px` });\n \n const map = L.map(container)\n .setView([40.70532700869127, -74.00976419448854], 12);\n \n const layer = Tangram.leafletLayer({\n scene: sceneStyle\n });\n \n layer.addTo(map);\n \n invalidation.then(() => layer.remove()); // clean up resources when cell is re-evaluated\n \n yield layer;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"map = layer._map;","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"scene = layer.scene;","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}