1+ /**** Start of imports. If edited, may not auto-convert in the playground. ****/
2+ var enhancedTCC = ee.Image("projects/sat-io/open-datasets/USGS/EnhancedTCC2011");
3+ /***** End of imports. If edited, may not auto-convert in the playground. *****/
4+ // Define a color palette for tree canopy percentage
5+ var tccPalette = [
6+ '#FFFFFF', // 0% - white
7+ '#EDF8E9', // Very light green
8+ '#C7E9C0',
9+ '#A1D99B',
10+ '#74C476',
11+ '#41AB5D',
12+ '#238B45',
13+ '#006D2C', // Dark green
14+ '#00441B' // Very dark green - 100%
15+ ];
16+
17+ // Set visualization parameters
18+ var visParams = {
19+ min: 0,
20+ max: 100,
21+ palette: tccPalette,
22+ opacity: 0.9
23+ };
24+
25+ // Add the UNMASKED dataset to the map - this is key for seeing all values
26+ // We'll handle NoData values (255) in the inspection itself, not in visualization
27+ Map.addLayer(enhancedTCC, visParams, 'Enhanced Urban Tree Canopy Cover');
28+
29+ // Set map center to Washington DC area
30+ Map.setCenter(-77.0369, 38.9072, 10);
31+
32+ // Create a panel to display the tree canopy percentage
33+ var panel = ui.Panel({
34+ style: {
35+ position: 'top-right',
36+ padding: '8px 15px',
37+ width: '300px'
38+ }
39+ });
40+
41+ // Add a title to the panel
42+ var panelTitle = ui.Label('Tree Canopy Cover Inspector', {
43+ fontWeight: 'bold',
44+ fontSize: '16px',
45+ margin: '0 0 8px 0'
46+ });
47+ panel.add(panelTitle);
48+
49+ // Add instructions
50+ var instructions = ui.Label('Click anywhere on the map to see the tree canopy percentage. Wait for value to Load', {
51+ fontSize: '12px',
52+ margin: '0 0 10px 0'
53+ });
54+ panel.add(instructions);
55+
56+ // Create labels for displaying the clicked location and value
57+ var valueLabel = ui.Label('', {fontSize: '14px', margin: '5px 0'});
58+ var coordLabel = ui.Label('', {fontSize: '12px', margin: '5px 0'});
59+ panel.add(valueLabel);
60+ panel.add(coordLabel);
61+
62+ // Add the panel to the map
63+ Map.add(panel);
64+
65+ // Create a variable to store the current inspection point
66+ var inspectionPoint = null;
67+
68+ // Handle map clicks - active immediately
69+ Map.onClick(function(coords) {
70+ // Get the coordinates of the clicked point
71+ var point = ee.Geometry.Point(coords.lon, coords.lat);
72+
73+ // Remove previous inspection point if exists
74+ if (inspectionPoint) {
75+ Map.layers().remove(inspectionPoint);
76+ }
77+
78+ // Add a new point at the click location with a plus sign style
79+ inspectionPoint = ui.Map.Layer(point, {
80+ color: 'red',
81+ pointSize: 6,
82+ pointShape: 'cross' // This creates a plus sign
83+ }, 'Inspection Point');
84+
85+ Map.layers().set(Map.layers().length(), inspectionPoint);
86+
87+ // Try a different sampling approach
88+ // Create a small buffer around the clicked point to ensure we capture data
89+ var buffer = point.buffer(30);
90+
91+ // Use reduceRegion instead of sample
92+ var tccValue = enhancedTCC.reduceRegion({
93+ reducer: ee.Reducer.first(),
94+ geometry: point,
95+ scale: 30,
96+ maxPixels: 1e9
97+ });
98+
99+ // Get the value
100+ tccValue.evaluate(function(result) {
101+ if (result && result.b1 !== null && result.b1 !== undefined) {
102+ // Check if it's NoData (255)
103+ if (result.b1 === 255) {
104+ valueLabel.setValue('No data available at this point');
105+ } else {
106+ // Round to nearest whole number for display
107+ var roundedValue = Math.round(result.b1);
108+ valueLabel.setValue('Tree Canopy Cover: ' + roundedValue + '%');
109+ }
110+
111+ // Update coordinate display
112+ coordLabel.setValue('Location: ' + coords.lon.toFixed(4) + ', ' + coords.lat.toFixed(4));
113+ } else {
114+ valueLabel.setValue('No data available at this point');
115+ coordLabel.setValue('Location: ' + coords.lon.toFixed(4) + ', ' + coords.lat.toFixed(4));
116+
117+ // Try a slightly different approach with a small buffer
118+ enhancedTCC.reduceRegion({
119+ reducer: ee.Reducer.mean(),
120+ geometry: buffer,
121+ scale: 30,
122+ maxPixels: 1e9
123+ }).evaluate(function(bufferResult) {
124+ if (bufferResult && bufferResult.b1 !== null && bufferResult.b1 !== undefined && bufferResult.b1 !== 255) {
125+ var roundedValue = Math.round(bufferResult.b1);
126+ valueLabel.setValue('Tree Canopy Cover (area average): ' + roundedValue + '%');
127+ }
128+ });
129+ }
130+ });
131+ });
132+
133+ // Add a title and label for the legend
134+ var title = ui.Label('Enhanced National-Scale Urban Tree Canopy Cover (2011)',
135+ {fontWeight: 'bold', fontSize: '16px', margin: '0 0 4px 0'});
136+
137+ var subtitle = ui.Label('Values represent percent tree canopy cover (0-100%)',
138+ {fontSize: '13px', margin: '0 0 15px 0'});
139+
140+ // Create a color bar for the legend
141+ var makeColorBar = function(palette) {
142+ var colorBar = ui.Thumbnail({
143+ image: ee.Image.pixelLonLat().select(0),
144+ params: {
145+ bbox: [0, 0, 1, 0.1],
146+ dimensions: '300x20',
147+ format: 'png',
148+ min: 0,
149+ max: 1,
150+ palette: palette
151+ },
152+ style: {stretch: 'horizontal', margin: '0px 8px'}
153+ });
154+ return colorBar;
155+ };
156+
157+ // Create a panel with a legend
158+ var legend = ui.Panel({
159+ style: {
160+ position: 'bottom-left',
161+ padding: '8px 15px'
162+ }
163+ });
164+
165+ // Create legend title and add the colorbar
166+ legend.add(title);
167+ legend.add(subtitle);
168+ legend.add(makeColorBar(tccPalette));
169+
170+ // Add labels for the legend
171+ var legendLabels = ui.Panel({
172+ widgets: [
173+ ui.Label('0%', {margin: '4px 0'}),
174+ ui.Label('', {margin: '4px 20px'}),
175+ ui.Label('50%', {margin: '4px 0', textAlign: 'center', stretch: 'horizontal'}),
176+ ui.Label('', {margin: '4px 20px'}),
177+ ui.Label('100%', {margin: '4px 0'})
178+ ],
179+ layout: ui.Panel.Layout.flow('horizontal')
180+ });
181+
182+ legend.add(legendLabels);
183+
184+ // Add the legend panel to the map
185+ Map.add(legend);
186+
187+ // Add a source attribution label
188+ var source = ui.Label('Source: Corro et al. (2025) Enhanced national-scale urban tree canopy cover dataset',
189+ {fontSize: '10px', position: 'bottom-right', padding: '3px 8px'});
190+ Map.add(source);
191+ Map.setCenter(-99.0530,39.484,5)
192+ var snazzy = require("users/aazuspan/snazzy:styles");
193+ snazzy.addStyle("https://snazzymaps.com/style/38/shades-of-grey", "Greyscale");
0 commit comments