31: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 } } }32:[] 2f:{"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"},{"id":217,"value":"layer._map.getContainer();","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":263,"value":"mutable features = [];","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":303,"value":"md`## Setup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"L = require('leaflet@1.3');","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 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"},{"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"}