Skip to content

About

Find the real trees around you, learn what they are, and turn a city walk into a gamified STEAM curriculum for kids — built on open NYC tree data.

Topics

Resources

Contributing

Stars

3 stars

Watchers

0 watching

Forks

Repository files navigation

TreeWalk NYC

TreeWalk turns a walk through New York City into a living map: find the real trees around you, learn what they are, document them, and build a shared, growing record of the city's urban forest. It ships in two modes from the same codebase — a Community mode for general exploration, tree documentation, and tree-bed stewardship, and a Kids mode built around a gamified STEAM curriculum for ages 6-11.

Live app: https://superb-starship-196cd2.netlify.app/ — no install or signup needed to explore the map.

Live map of real NYC street trees, Kids mode Kids-mode lesson: London Planetree teach card One-species deep dive with a real whole-tree photo

Looking for a few contributors. Specifically want to hear from people into mapping, civic/open data, education content, or UX/accessibility — four concrete starter issues, one per area, are open right now: add a city · fix a data gap · add a species deep dive · keyboard accessibility. See CONTRIBUTING.md for what "done" looks like on each.

What's in here

  • Community mode — geolocation-driven map of real NYC street trees from TreeWalk's own municipal snapshot, marker clustering, tree detail sheets with species info, a "Missing Trees" mystery/find game, single- and multi-photo documentation, tree-bed sponsorship/funding, a shared care log, and account sync via Supabase.
  • Kids mode — a per-species mastery curriculum: teach-then-quiz lesson flow, a one-species real-photo deep dive (whole tree, bark, fruit), and a "Leaf → Find It" bridge that sends a kid straight from a lesson into a live, targeted version of the map's find/guess game for the species they just learned.
  • Multi-city adapter pattern (cityAdapters.js) — NYC reads TreeWalk's snapshot. Philadelphia still uses a live civic API. Adding another city is a new adapter with the same fetchTrees(lat, lng) shape — do not point NYC back at Open Data.
  • A printable curriculum (curriculum/) — lesson plans, ID sheets, and coloring sheets per species, adapted from the NYC Parks Street Tree Identification Guide.

Stack

Plain HTML/CSS/JS — no build step, no framework, no bundler. Scripts are loaded in order as classic <script> tags sharing one global scope:

cityAdapters.js → curriculum.js → speciesDeepDive.js → app.js → kidsLessons.js
  → cloud-config.js → gameboard-client.js → cloud-sync.js

Map rendering is Leaflet + leaflet.markercluster, loaded from a CDN. Accounts, tree records, photos, and social features (care log, reactions, verification) are backed by Supabase — see cloud-sync.js. Offline/installability comes from a small service worker (sw.js) with a network-first caching strategy, so a fresh deploy is always picked up on next load rather than served stale.

Running it locally

There's no build step — it's static files. Serve the folder over HTTP and open it:

python3 gameboard/serve.py

Then visit http://localhost:8080. That server serves the site and nearby NYC trees from the local snapshot. python3 -m http.server will not load NYC trees.

Geolocation requires HTTPS on a real device/host (browsers block it on plain HTTP except localhost), so a real deployment is needed to test location features on a phone. See gameboard/README.md for the snapshot and how to publish it.

Backend (optional)

Community-mode accounts, cloud-synced trees/photos, and social features need a Supabase project. cloud-config.js holds the project URL and a publishable (anon/public) key — safe to be client-side by design, since Supabase enforces access with Row Level Security policies, not by keeping that key secret. To run your own backend, point cloud-config.js at your own Supabase project and apply the schema in gameboard/supabase.sql plus the existing app tables. The NYC map works locally through gameboard/serve.py without Supabase. Accounts, sync, and the hosted NYC map need it.

Data sources

  • NYC — TreeWalk snapshot of NYC Parks Forestry Tree Points, ingested weekly. The app does not call the Open Data API. Attribution: NYC Department of Parks and Recreation. This is not the official NYC Tree Map.
  • Philadelphia — Philadelphia Parks & Recreation tree inventory, via an ArcGIS FeatureServer.
  • Species content adapted from NYC Parks' Street Tree Identification Guide.

Contributing

This project is young and moves fast — expect some rough edges (a couple of features in app.js/kidsLessons.js are mid-build, and there's no automated test suite yet). Issues and PRs are welcome — see CONTRIBUTING.md for how to run it locally, what a good first PR looks like, and the ground rules for adding a city or a species.

License

MIT — see LICENSE.

About

Find the real trees around you, learn what they are, and turn a city walk into a gamified STEAM curriculum for kids — built on open NYC tree data.

Topics

Resources

Contributing

Stars

3 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages