2e:null 2f:["$","title",null,{"children":"Transit Lines with Tangram + Mapzen Tiles | Brett Camper | Observable"}] 34:T5c9,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', // Enable the transit overlay option sdk_transit_overlay: true } } }35:[] 32:{"id":"10efdd6b45686c05","slug":"transit-lines-with-tangram-mapzen-tiles","title":"Transit Lines with Tangram + Mapzen Tiles","thumbnail":"d4608c365e058e964ebdd0c0706108b1bdcee933a62f9b806a81ffddf2888cd4","access_level":"public","create_time":"$D2019-01-14T19:40:47.154Z","update_time":"$D2019-02-06T18:13:23.979Z","view_time":null,"first_public_time":"$D2019-02-06T18:13:28.279Z","has_unpublished_edits":null,"fork":{"id":"18cbd8431b42dd4e","slug":"tangram-query-features","title":"Tangram: Query Features","owner":{"id":"c53130f001c03e79","login":"bcamper","name":"Brett Camper"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c53130f001c03e79","login":"bcamper","name":"Brett Camper","avatar_url":"https://avatars-next.observableusercontent.com/1f3a3aead4cc1f200d81120af918d78f076732c23133b2a182f81410bd748058","tier":"starter_2024"},"version":405,"publish_version":405,"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":"Transit Lines with Tangram + Mapzen Tiles","cells":[{"id":0,"value":"md`# Transit Lines with Tangram + Mapzen Tiles\nInteractively query tile features when the map moves.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"layer._map.getContainer();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"queryFeatures = {\n let update = async () => {\n let f = await scene.queryFeatures({\n filter: {\n $layer: 'transit',\n $geometry: 'line'\n },\n // group_by: 'kind'\n visible: true,\n // geometry: true\n });\n \n // mutable features = Object.entries(f).sort((a, b) => b[1].length - a[1].length);\n mutable features = f.sort((a, b) => a.properties.kind > b.properties.kind ? 1 : -1);\n };\n \n scene.subscribe({ view_complete: update }); // subscribe to tangram event\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":"{\n let f = features.map(r => r.properties).filter(r => r.colour);\n return html`\n \n \n ${f.map((r, i) => html`\n \n \n \n \n \n \n `)}\n \n

${r.kind}

${r.operator || ''}

${r.name}

`\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.3');","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 let container = DOM.element('div', { style: `width:${width}px;height:${width/2}px` });\n //yield container;\n \n let map = L.map(container)\n .setView([40.70532700869127, -74.00976419448854], 12);\n // .setView([47.16293326606514, 36.831763997463135], 9);\n\n // Hack to clear prior Tangram resources\n // This goes against the stateless nature of notebooks, but is necessary to ensure certain GL\n // resources are internal state is reset correctly when the map is reloaded.\n if (Tangram.debug._layer) {\n Tangram.debug._layer.remove();\n }\n \n let layer = Tangram.leafletLayer({\n scene: sceneStyle\n });\n Tangram.debug._layer = layer; // save ref so resources can be cleared on map reload\n \n layer.addTo(map);\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"