1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5<!-- This site is hosted on Netlify. Anyone can build and deploy a site 6 like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=4ab8415d-4c6e-4e28-a605-623374fc13d2 7 Netlify hosting facts for this site: static/SSR served via Netlify Edge. --> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 9 <title>Copenhagen Tree Density</title> 10
10<script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
10 11 <link 12 href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" 13 rel="stylesheet" 14 /> 15 <link rel="stylesheet" href="style.css" /> 16 </head> 17 <body> 18 <div id="map"></div> 19 <div id="loading-indicator" style="display: none">Loading tiles...</div> 20 21 <!-- Basemap switcher in top right --> 22 <div id="basemap-switcher"> 23 <button id="basemap-toggle" title="Change map style"> 24 <svg 25 xmlns="http://www.w3.org/2000/svg" 26 fill="none" 27 viewBox="0 0 24 24" 28 stroke-width="1.5" 29 stroke="currentColor" 30 style="margin: auto; display: block; width: 24px; height: 24px" 31 > 32 <path 33 stroke-linecap="round" 34 stroke-linejoin="round" 35 d="M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z" 36 /> 37 </svg> 38 </button> 39 <button 40 id="info-button" 41 title="About this map" 42 aria-label="About this map" 43 > 44 <svg 45 xmlns="http://www.w3.org/2000/svg"
46 viewBox="0 0 24 24" 47 fill="none" 48 stroke="currentColor" 49 stroke-width="2" 50 stroke-linecap="round" 51 stroke-linejoin="round" 52 style="margin: auto; display: block; width: 20px; height: 20px" 53 > 54 <circle cx="12" cy="12" r="9" /> 55 <path d="M12 10v6" /> 56 <path d="M12 7h.01" /> 57 </svg> 58 </button> 59 <div id="basemap-menu" style="display: none"> 60 <button data-style="carto-light">Default</button> 61 <button data-style="satellite">Satellite</button> 62 </div> 63 </div> 64 65 <div id="controls"> 66 <button id="controls-toggle" aria-label="Toggle controls"> 67 <svg 68 xmlns="http://www.w3.org/2000/svg" 69 width="20" 70 height="20" 71 viewBox="0 0 24 24" 72 fill="none" 73 stroke="currentColor" 74 stroke-width="2" 75 stroke-linecap="round" 76 stroke-linejoin="round" 77 > 78 <line x1="4" y1="6" x2="20" y2="6"></line> 79 <line x1="4" y1="12" x2="20" y2="12"></line> 80 <line x1="4" y1="18" x2="20" y2="18"></line> 81 </svg> 82 </button> 83 <div id="controls-content"> 84 <div class="control-group"> 85 <label for="surface-filter">Filter by Surface</label> 86 <select id="surface-filter"> 87 <option value="all">All Surfaces</option> 88 </select> 89 </div> 90 <div class="control-group checkbox-group"> 91 <input type="checkbox" id="toggle-trees" /> 92 <label for="toggle-trees">Show individual trees</label> 93 </div> 94 <div class="legend"> 95 <h4>Trees per 100m</h4> 96 <div class="legend-items"> 97 <div class="legend-item"> 98 <span class="color-box" style="background-color: #cccccc"></span> 99 <span class="legend-label">0</span> 100 </div> 101 <div class="legend-item"> 102 <span class="color-box" style="background-color: #e5f5e0"></span> 103 <span class="legend-label">0.1 - 2</span> 104 </div> 105 <div class="legend-item"> 106 <span class="color-box" style="background-color: #a1d99b"></span> 107 <span class="legend-label">2 - 5</span> 108 </div> 109 <div class="legend-item"> 110 <span class="color-box" style="background-color: #41ab5d"></span> 111 <span class="legend-label">5 - 10</span> 112 </div> 113 <div class="legend-item"> 114 <span class="color-box" style="background-color: #006d2c"></span> 115 <span class="legend-label">> 10</span> 116 </div> 117 </div> 118 </div> 119 </div> 120 </div> 121 122 <!-- Info modal (shown on open; can be reopened via info button) --> 123 <div 124 id="info-modal" 125 class="modal-overlay" 126 role="dialog" 127 aria-modal="true" 128 aria-labelledby="info-modal-title" 129 style="display: none" 130 > 131 <div class="modal" role="document"> 132 <button id="info-modal-close" class="modal-close" aria-label="Close"> 133 <span>×</span> 134 </button> 135 <h1>Copenhagen Trees ð³</h1> 136 <h2 id="info-modal-title">About this map</h2> 137 <p> 138 This map highlights Copenhagen streets by tree density (trees per 139 100m) to help you find greener routes and see where street-tree 140 coverage varies across the city. 141 </p> 142 <p> 143 Street trees also relate to happiness and mental wellbeing: studies 144 have found that areas with higher street-tree density are associated 145 with better mental-health indicators and improved self-reported 146 health. 147 </p> 148 <p> 149 They can also improve thermal comfort by providing shade and cooling 150 at street level. 151 </p> 152 153 <h3>How to use</h3> 154 <ul> 155 <li> 156 Color shows tree density (trees per 100m) for each street segment. 157 </li> 158 <li>Click a street to see counts and open Street View.</li> 159 <li>Use the surface filter to compare street types.</li> 160 <li>Toggle âShow Treesâ to view individual tree points.</li> 161 </ul> 162 163 <h3>Note</h3> 164 <p> 165 While the tree data is fairly comprehensive, some trees may be missing 166 or misclassified. 167 </p> 168 169 <h3>Sources</h3> 170 <ul class="sources"> 171 <li> 172 <a 173 href="https://www.nature.com/articles/s41598-020-79924-5" 174 target="_blank" 175 rel="noopener" 176 > 177 Marselle et al. (2020) â Street-tree density & antidepressant 178 prescriptions (Leipzig) 179 </a> 180 </li> 181 <li> 182 <a 183 href="https://environment.ec.europa.eu/news/effectiveness-urban-tree-planting-city-cooling-varies-between-european-regions-2023-07-27_en" 184 target="_blank" 185 rel="noopener" 186 > 187 European Commission â Urban trees and city cooling (shade, 188 canopy/leaf density) 189 </a> 190 </li> 191 <li> 192 <a 193 href="https://urbandevelopmentcph.kk.dk/urban-planning/urban-nature" 194 target="_blank" 195 rel="noopener" 196 > 197 Copenhagen Municipality â Urban nature in Copenhagen 198 </a> 199 </li> 200 <li> 201 <a 202 href="https://www.openstreetmap.org/" 203 target="_blank" 204 rel="noopener" 205 > 206 OpenStreetMap â Street and tree data 207 </a> 208 </li> 209 </ul> 210 211 <div style="text-align: center"> 212 <p style="font-size: 12px; color: #666; margin: 16px auto 0 auto"> 213 Made with â¤ï¸ by 214 <a 215 href="https://www.ppp.one/" 216 style="text-decoration-line: underline" 217 >Peter Pihlmann Pedersen</a 218 > 219 <br /> 220 <a 221 href="https://github.com/ppp-one/cph-trees" 222 target="_blank" 223 rel="noopener" 224 style=" 225 color: inherit; 226 text-decoration: none; 227 display: inline-flex; 228 align-items: center; 229 vertical-align: middle; 230 margin-top: 4px; 231 " 232 title="View source on GitHub" 233 >Find the source on GitHub 234 <svg 235 xmlns="http://www.w3.org/2000/svg" 236 width="16" 237 height="16" 238 fill="currentColor"
239 viewBox="0 0 16 16" 240 > 241 <path 242 d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" 243 /> 244 </svg> 245 </a> 246 </p> 247 </div> 248 </div> 249 </div> 250
250<script src="script.js"></script>
250 251 </body> 252</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.