31:[{"id":"a943658e5b22fe839dc2d64d158ffd40c95230073bab36fbbfc398648885998439e1a0c4ab9466967f8efd29159c6204746325728344e34b884106ed6d6082cb","href":"https://static.observableusercontent.com/files/a943658e5b22fe839dc2d64d158ffd40c95230073bab36fbbfc398648885998439e1a0c4ab9466967f8efd29159c6204746325728344e34b884106ed6d6082cb","name":"munich.boundary.geojson","type":"application/geo+json","lastModified":1620242944062.764,"size":55998},{"id":"cb0d39836341a59d5874e3e2ab0678babc786bb44dade6978bc01f1f68ef00ba59a05954f0cc1f3a133604d48124cbe093b0e6013d5a6c2f727e0187604f7ebb","href":"https://static.observableusercontent.com/files/cb0d39836341a59d5874e3e2ab0678babc786bb44dade6978bc01f1f68ef00ba59a05954f0cc1f3a133604d48124cbe093b0e6013d5a6c2f727e0187604f7ebb","name":"district_tree_cover-2017@2.json","type":"application/json","lastModified":1651870395329.564,"size":1587},{"id":"9326da9a08e70a7aef7659367b4499fa0820b941bbfd65473f648a13e1ef9c7ed0c8d59d03e202fa39ecaef0cfc79b0651df87f099743815b1f09eb4211586fc","href":"https://static.observableusercontent.com/files/9326da9a08e70a7aef7659367b4499fa0820b941bbfd65473f648a13e1ef9c7ed0c8d59d03e202fa39ecaef0cfc79b0651df87f099743815b1f09eb4211586fc","name":"missing-2017-2020@2.geojson","type":"application/geo+json","lastModified":1649184215678.535,"size":3706892},{"id":"7e8e12a5e40565d9160be7a56094fd0900a9f95ec86bbe63a6a318f14458b503ed9f867684bb17a51b323f08db0d344e13e444bb1536fe623bf37d775ef46064","href":"https://static.observableusercontent.com/files/7e8e12a5e40565d9160be7a56094fd0900a9f95ec86bbe63a6a318f14458b503ed9f867684bb17a51b323f08db0d344e13e444bb1536fe623bf37d775ef46064","name":"missing-2017-2020@3.geojson","type":"application/geo+json","lastModified":1649329185530.411,"size":2928890}] 2f:{"title":"Munich Urban Tree / Bäume in München","cells":[{"id":0,"value":"md`# Munich Urban Tree / Bäume in München`","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"md`A short [introduction](https://tsungi.medium.com/urban-trees-in-munich-city-b0e7db7c2c18)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"md`## Urban Tree Canopy / Single map view`","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"viewof fs_ctrl = Inputs.toggle({label: \"Enable fullscreen control\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"map = {\n add_canopy_style();\n \n // DOM container to hold map content\n let container = DOM.element('div');\n yield container; // assign to `map`\n create_map(container, single_map_options);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":652,"value":"md`## Urban Tree Canopy / Split map view`","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"split_map = {\n const w = width / 3-10;\n const h = width / 1.6;\n \n const container = html`\n\n\n

\n`;\n \n yield container;\n \n var map1 = create_map(container.querySelector(\"#w1\"), { height:h+'px', ...canopy_split_map_options } );\n var map2 = create_map(container.querySelector(\"#w2\"), { height:h+'px', ...aerial_2017_split_map_options } );\n var map3 = create_map(container.querySelector(\"#w3\"), { height:h+'px', ...aerial_2020_split_map_options } );\n \n map1.sync(map2);\n map1.sync(map3);\n \n map2.sync(map1);\n map2.sync(map3);\n\n map3.sync(map1);\n map3.sync(map2);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":790,"value":"md`## Hotspots of Missing Urban Trees`","pinned":false,"hidden":false,"mode":"ojs"},{"id":842,"value":"map_diff = { \n // DOM container to hold map content\n let container = DOM.element('div');\n yield container; // assign to `map`\n\n create_map(container, { ...diff_map_options });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1128,"value":"modes = ['normal',\n'multiply',\n'screen',\n'overlay',\n'darken',\n'lighten',\n'color-dodge',\n'color-burn',\n'hard-light',\n'soft-light',\n'difference',\n'exclusion',\n'hue',\n'saturation',\n'color',\n'luminosity']","pinned":false,"hidden":false,"mode":"ojs"},{"id":1126,"value":"viewof blend_mode = Inputs.select(modes, {value: \"multiply\", label: \"Blend\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1055,"value":"md`## Urban Tree Density`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1060,"value":"map_heatmap = { \n add_density_style();\n // DOM container to hold map content\n let container = DOM.element('div');\n yield container; // assign to `map`\n\n create_map(container, { ...heatmap_options });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1211,"value":"district_tree_cover_table = Inputs.table(district_tree_cover, {\n sort: 'tree_cover_ratio',\n reverse: true,\n format: {\n district_area: x => html`${x.toFixed(2)} km²`,\n tree_cover_ratio: x => (x*100).toFixed(1) + \" %\"}}\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":971,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"import { create_map, map_options } from \"@easz/my-map\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"add_canopy_style = () => {\n var style = document.createElement('style');\n style.type = 'text/css';\n style.innerHTML = css_canopy;\n document.getElementsByTagName('head')[0].appendChild(style);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1118,"value":"add_density_style = () => {\n var style = document.createElement('style');\n style.type = 'text/css';\n style.innerHTML = css_density;\n document.getElementsByTagName('head')[0].appendChild(style);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"// https://haoliangyu.github.io/boundary.now/\nboundary = FileAttachment(\"munich.boundary.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"city_map_base_layer = (\n {\n type: 'WMS',\n name: 'City Map',\n url: 'https://geoportal.muenchen.de/geoserver/gsm/wms',\n options: {\n maxZoom: 19,\n layers: 'gsm:g_stadtkarte_gesamt',\n format: 'image/png',\n transparent: 'true',\n attribution:\n 'GeodatenService München',\n opacity: 1.0\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"aerial_2017_base_layer = (\n {\n type: 'WMTS',\n name: 'Aerial Image in 2017',\n url: 'https://easz.github.io/opendata_luftbild_dop60_Y2017/{z}/{x}/{y}.png',\n options: {\n maxZoom: 19,\n maxNativeZoom: 18,\n attribution:\n 'opengov-muenchen.de (DL-DE BY-2.0)',\n opacity: 1\n }\n } \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"aerial_2020_base_layer = (\n {\n type: 'WMTS',\n name: 'Aerial Image in 2020',\n url: 'https://easz.github.io/by_dop80c_Y2020/{z}/{x}/{y}.png',\n options: {\n maxZoom: 19,\n maxNativeZoom: 18,\n attribution:\n 'Bayerischen Vermessungsverwaltung (CC BY 3.0 DE)',\n opacity: 1\n }\n } \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1224,"value":"google_sat_base_layer = (\n {\n type: 'WMTS',\n name: 'Latest Google Satellite',\n url: 'http://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',\n options: {\n maxZoom: 19,\n maxNativeZoom: 18,\n attribution:\n 'Google',\n opacity: 1\n }\n } \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1232,"value":"aerial_2021_base_layer = (\n {\n type: 'WMTS',\n name: 'Aerial Image in 2021',\n url: 'https://easz.github.io/opendata_luftbild_dop20_Y2021/{z}/{x}/{y}.png',\n options: {\n maxZoom: 19,\n maxNativeZoom: 18,\n attribution:\n 'pendata.muenchen.de',\n opacity: 1\n }\n } \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"canopy_2017_overlay_layer = (\n {\n enable: true,\n type: 'WMTS',\n name: 'Tree Canopy in 2017',\n url: 'https://easz.github.io/opendata_luftbild_dop60_Y2017_canopy/{z}/{x}/{y}.png',\n options: {\n maxZoom: 19,\n maxNativeZoom: 18,\n className: 'canopy2017',\n opacity: 0.7,\n attribution:\n 'opendata_luftbild_dop60_Y2017_canopy CC-BY-SA'\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"canopy_2020_overlay_layer = (\n {\n enable: true,\n type: 'WMTS',\n name: 'Tree Canopy in 2020',\n url: 'https://easz.github.io/by_dop80c_Y2020_canopy/{z}/{x}/{y}.png',\n options: {\n maxZoom: 19,\n maxNativeZoom: 18,\n className: 'canopy2020',\n opacity: 0.7,\n attribution:\n 'by_dop80c_Y2020_canopy CC-BY-SA'\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1070,"value":"heatmap_2017_overlay_layer = (\n {\n enable: true,\n type: 'WMTS',\n name: 'Tree Density in 2017',\n url: 'https://easz.github.io/urban-tree-munich-heatmap/{z}/{x}/{y}.png',\n options: {\n maxZoom: 19,\n maxNativeZoom: 15,\n opacity: 1.,\n attribution:\n 'urban-tree-munich-heatmap CC-BY-SA'\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"single_map_base_layers = [ \n city_map_base_layer,\n aerial_2017_base_layer,\n aerial_2020_base_layer,\n aerial_2021_base_layer\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"single_map_overlay_layers = [\n canopy_2017_overlay_layer, \n canopy_2020_overlay_layer,\n {\n type: 'GEOJSON',\n name: 'City Boundary',\n url: boundary,\n options: {\n style: { fillOpacity: 0 }\n }\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"single_map_options = {\n let opts = map_options;\n opts.layer = {\n base: single_map_base_layers,\n overlay: single_map_overlay_layers,\n extra: []\n };\n opts.map.center = { lat: 48.13223, lng: 11.57341 };\n opts.map.maxBounds = [[47.873065, 11.002808], [48.367198, 12.238770]];\n opts.map.zoom = 11;\n opts.map.minZoom = 11;\n opts.map.maxZoom = 19;\n opts.map.fullscreenControl = fs_ctrl,\n opts.control.edit = false;\n opts.control.search = false;\n opts.control.ruler = false;\n return opts;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"_split_map_options = {\n let opts = map_options;\n opts.map.center = { lat: 48.137079, lng: 11.576006 };\n opts.map.maxBounds = [[47.873065, 11.002808], [48.367198, 12.238770]];\n opts.map.zoom = 15;\n opts.map.minZoom = 11;\n opts.map.maxZoom = 19;\n opts.map.fullscreenControl = false,\n opts.control.edit = false;\n opts.control.search = false;\n opts.control.ruler = false;\n return opts;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":564,"value":"canopy_split_map_options = {\n _split_map_options.map = {..._split_map_options.map, zoomControl: true}\n return {\n ..._split_map_options,\n layer: {\n base: [ city_map_base_layer ],\n overlay: [ canopy_2017_overlay_layer, canopy_2020_overlay_layer ],\n extra: []\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"aerial_2017_split_map_options = {\n _split_map_options.map = {..._split_map_options.map, zoomControl: false}\n return {\n ..._split_map_options,\n layer: {\n base: [ aerial_2017_base_layer ],\n overlay: [ ],\n extra: []\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"aerial_2020_split_map_options = {\n _split_map_options.map = {..._split_map_options.map, zoomControl: false}\n return {\n ..._split_map_options,\n layer: {\n base: [ aerial_2020_base_layer, aerial_2021_base_layer ],\n overlay: [ ],\n extra: []\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":978,"value":"diff_trees = FileAttachment(\"missing-2017-2020@3.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"diff_overlay_layer = (\n {\n enable: true,\n type: 'VECTOR',\n name: 'Missing Tree Hotspot',\n url: diff_trees,\n on: [\n { \n event: 'mouseover',\n handler: function(e) { \n e.layer.setStyle({\n fillOpacity: 0.,\n });\n }\n },\n { \n event: 'mouseout',\n handler: function(e) { \n e.layer.setStyle({\n fillOpacity: 0.8,\n });\n }\n }\n ],\n options: {\n maxZoom: 22,\n maxNativeZoom: 22,\n interactive: true,\n opacity: 1,\n vectorTileLayerStyles: {\n sliced: function(properties, zoom) {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tfillColor: '#FFD700',\n\t\t\t\t\t\tstroke: true,\n\t\t\t\t\t\tfill: true,\n\t\t\t\t\t\tcolor: '#FF00FF',\n\t\t\t\t\t\tweight: zoom < 16 ? 10 : 5,\n fillOpacity: 0.8,\n\t\t\t\t\t}\n\t\t\t\t}\n },\n attribution: \n 'urban-tree'\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":794,"value":"diff_map_options = {\n return {\n ...single_map_options,\n layer: {\n base: [ \n city_map_base_layer, \n aerial_2017_base_layer, \n { ...aerial_2020_base_layer, enable: true },\n aerial_2021_base_layer\n ],\n overlay: [ diff_overlay_layer,\n {\n type: 'GEOJSON',\n name: 'City Boundary',\n url: boundary,\n options: {\n style: { fillOpacity: 0 }\n }\n }\n ],\n extra: []\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1063,"value":"heatmap_options = {\n return {\n ...single_map_options,\n layer: {\n base: [ \n city_map_base_layer\n ],\n overlay: [ \n { ...aerial_2017_base_layer, enable: false }, \n { ...heatmap_2017_overlay_layer, enable: true },\n { ...toner_overlay, enable: true } ],\n extra: []\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1132,"value":"toner_overlay = (\n {\n type: 'WMTS',\n name: 'Toner',\n url: 'https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png',\n options: {\n maxZoom: 19,\n className: 'toner_map',\n opacity: 0.1,\n attribution:\n 'Stamen Design',\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1176,"value":"district_tree_cover = {\n var f = await FileAttachment(\"district_tree_cover-2017@2.json\").json();\n var result = {};\n var id = [];\n for (const [column, c_values] of Object.entries(f)) {\n for (const [idx, value] of Object.entries(c_values)) {\n if (result[idx]===undefined) {\n result[idx] = {};\n }\n result[idx][column] = value;\n }\n }\n \n return Object.values(result);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"css_canopy = `\n .canopy2017 {\n filter: hue-rotate(${hue2017}deg) brightness(${brightness2017}%);;\n }\n .canopy2020 {\n filter: hue-rotate(${hue2020}deg) brightness(${brightness2020}%);;\n }\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1114,"value":"css_density = `\n .toner_map {\n mix-blend-mode: ${blend_mode};\n }\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"viewof hue2017 = Inputs.range([0, 360], {value: 160, step: 1, label: \"Tree Canopy in 2017 - hue (deg)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"viewof brightness2017 = Inputs.range([0, 500], {value: 100, step: 10, label: \"Tree Canopy in 2017 - brightness (%)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"viewof hue2020 = Inputs.range([0, 360], {value: 90, step: 1, label: \"Tree Canopy in 2020 - hue (deg)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"viewof brightness2020 = Inputs.range([0, 500], {value: 155, step: 10, label: \"Tree Canopy in 2020 - brightness (%)\"})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}