2e:null 2f:["$","title",null,{"children":"Tangram: Query Features | Brett Camper | Observable"}] 34: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' } } }35:[] 32:{"id":"18cbd8431b42dd4e","slug":"tangram-query-features","title":"Tangram: Query Features","thumbnail":"3aa522b8c3cfcd519ba459cc7e667c4388940d8b0df328bbd2af1b4c3fe41edb","access_level":"public","create_time":"$D2019-01-13T02:37:05.762Z","update_time":"$D2019-07-13T02:44:20.487Z","view_time":null,"first_public_time":"$D2019-01-13T03:41:59.750Z","has_unpublished_edits":null,"fork":{"id":"84f2f9bab0fe64cc","slug":"tangram-example","title":"Tangram Example","owner":{"id":"c53130f001c03e79","login":"bcamper","name":"Brett Camper"}},"stars":1,"starred":false,"owner":{"type":"team","id":"c53130f001c03e79","login":"bcamper","name":"Brett Camper","avatar_url":"https://avatars-next.observableusercontent.com/1f3a3aead4cc1f200d81120af918d78f076732c23133b2a182f81410bd748058","tier":"starter_2024"},"version":528,"publish_version":528,"role":null,"authored":false,"authors":[{"type":"individual","id":"9facf0ed218e9eb6","login":"bcamper","name":"Brett Camper","avatar_url":"https://avatars-next.observableusercontent.com/1f3a3aead4cc1f200d81120af918d78f076732c23133b2a182f81410bd748058","tier":null}],"members":[{"type":"individual","id":"9facf0ed218e9eb6","login":"bcamper","name":"Brett Camper","avatar_url":"https://avatars-next.observableusercontent.com/1f3a3aead4cc1f200d81120af918d78f076732c23133b2a182f81410bd748058","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"md`**${center.zoom}/${center.lat}/${center.lng}**`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"mutable features = [];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"md`## Setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"L = require('leaflet@1.5');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"Tangram = require('tangram');\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"map = layer._map;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"scene = layer.scene;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"