# Google Earthengine Community Earthengine Community

> What this is for

- Skill: `tomevault-io/google-earthengine-community-earthengine-community` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/google-earthengine-community-earthengine-community`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/google-earthengine-community-earthengine-community/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/google-earthengine-community-earthengine-community

---


## 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.

---
> Source: [google/earthengine-community](https://github.com/google/earthengine-community) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-06-27 -->