| name | gee-adhoc-maps |
| description | Build quick interactive HTML maps to inspect Earth Engine results. Use layered overlays on a satellite basemap with per-layer opacity, clear/show-all, and a click-to-get-coordinates tool. Use when you need to eyeball "where / what" (coverage gaps, disagreement, masks) when interacting with Earth Engine outside of the Code Editor or Colab. |
What this is for
Throwaway, interactive maps to see a result and sanity-check it: coverage holes,
class masks, where two products disagree, whether an AOI matches reality.
Implementation
- Plain
folium + Earth Engine getMapId tile layers. Build a folium map
directly and add each EE layer as a tile layer from its map-id URL.
- Tile URLs from
getMapId will expire in about a day; regenerate the map to
revisit later.
- Note:
map_id_dict['tile_fetcher'].url_format might contains
unformatted placeholders (like {state.tile_base_url}) which break Folium.
Instead, construct the URL manually: url = f"https://earthengine.googleapis.com/v1/{map_id_dict['mapid']}/tiles/{{z}}/{{x}}/{{y}}"
- Use a basemap. Add it as the base and hide it from the layer control.
- Save an
.html file and open it.
- Optional Python Server (for dynamic pixel values): If the "Pick coords"
tool needs to show actual Earth Engine layer values, serve the map using a
Python
http.server backend with a /value endpoint. The map's JavaScript
can then make fetch() calls to query EE dynamically (e.g., via
ee.Image.reduceRegion).
Basic Controls (more can be added)
- Per-layer opacity sliders, embedded in each layer-control row
(Code-Editor style): tag each EE layer with a CSS class, then on page load
add a range slider to every overlay row that sets that layer's opacity.
Note: Folium-generated TileLayers do not have a
name attribute in
their Leaflet options, so you cannot match layers by name. Instead,
extract the internal layer ID directly from the checkbox element (var layerId = input.layerId;) and adjust its opacity using
map_instance._layers[layerId].setOpacity(op);.
- Clear all / Show all buttons, placed next to the layer control.
Implement by clicking each overlay checkbox through Leaflet's own handler so
layer state stays consistent (and layers can be toggled back on).
- "Pick coords" toggle (off by default): when on, the cursor becomes a
crosshair and a map click drops a lat/lon popup; when off, clicks just pan.
Grab the Leaflet map instance from the page's globals and gate the click
handler on the toggle.
- Disable click/scroll propagation on custom controls so interacting with them
doesn't pan the map.
Layer design principles
- Categorical / raw-class layers: remap class codes to contiguous values
and apply a palette; put the class order in the layer name so the name
doubles as a legend.
- Reference boundaries (lake polygon, AOI, admin) as styled outlines with
no fill, on top.
- Optical true-color backdrop (e.g. Sentinel-2) for human context under
the overlays.
- Offer the raw underlying layers (each product's full class image, unmasked)
as toggles: they're the real verification tool when a derived layer looks
wrong.
