$500 dollars in API Credits
CityScape
Visualize your city's footprint and green spaces using real-world data!
Core trick
Mapbox renders 3D building layers from public spatial datasets, estimating canopy and carbon absorption for candidate tree locations.
Tags
Built with
mapboxnext.jsreacttailwindtypescriptvercel
Description
How we built it
CityScape was built using Next.js, React, and TypeScript, with Mapbox to create geospatial visualizations and 3D mapping layers.
We integrated spatial datasets to analyze urban surfaces, identify potential locations for new trees, and estimate environmental impact metrics such as carbon absorption. The results are rendered in an interactive map environment, where users can visualize proposed changes and explore the data through an AI-assisted planning interface.
Challenges we ran into
We ran into many merge conflicts, and we had a very fun (& annoying time resolving the bugs)! Integrating datasets, handling coordinate systems, and making everything align correctly within Mapbox required very careful debugging.
Accomplishments that we're proud of
For several of us, it was our
first time using Claude Code
, and we learned how to build an idea from scratch in a very short amount of time! We learned a ton about
Mapbox
,
3D building rendering
, and how to use raw spatial/public data to create a clean, user-friendly design.
What's next for CityScape
Next, we want to validate CityScape with the people who actually design cities.
We already talked to a civil engineers from the KW Region who confirmed just how powerful this could be.
We plan to talk to even more city planners, civil engineers, and sustainability researchers in the Kitchener–Waterloo region to better understand how tools like this could support real planning tools.
At the same time, we plan to improve our rendering and visual design so that the platform can communicate insights more clearly. By refining the 3D map visuals, improving greenspace overlays, and making the interface more intuitive, we hope to make the impact of proposed changes easier to understand for both technical experts and everyday users!
Tech Stack:
Next.js, TypeScript, Mapbox GL JS, React, Tailwind CSS, Vercel
README excerpt
**CityScape 🌳** Turning raw urban data into actionable greenspace decisions CityScape is an AI-assisted urban planning platform that helps cities visualize, analyze, and act on greenspace opportunities — before a single tree is planted. Inspiration Cities are getting hotter. Urban heat islands, shrinking greenspace, and outdated planning tools are making it harder for city planners to make informed, data-driven decisions about their urban environment. Yet the data already exists. CityScape was built to bridge that gap — taking raw spatial and environmental datasets and transforming them into an interactive, 3D planning environment where the impact of a decision is visible before it's made. Whether you're a civil engineer, a sustainability researcher, or a city planner, understanding your city's greenspace should be intuitive, not buried in spreadsheets. What It Does CityScape analyzes urban surfaces and surfaces actionable insights across multiple dimensions: Greenspace analysis Identify optimal locations for new tree planting Visualize existing greenspace coverage and gaps Environmental impact estimation Carbon absorption metrics per proposed change Urban heat island identification via heatmap overlays 3D urban visualization Interactive Mapbox GL JS map with real building geometry Proposed changes rendered directly onto the city in 3D AI-assisted planning interface Explore data and proposed changes through a conversational planning layer How We Built It Fron