Philadelphia Relief

✕

About this map

A cinematic relief map of the Philadelphia region — Center City, Port Richmond, Northeast and Northwest Philadelphia, the Main Line, and Delaware, Montgomery, Chester and Bucks Counties, across the river into Camden, Cherry Hill and the Burlington County plain.

Where the data comes from

Elevation

AWS Terrain Tiles (Mapzen terrarium encoding), sampled at zoom 12 and resampled to a 2048 × 2048 grid — about 46 m per sample. The underlying elevation for this region is USGS 3DEP and SRTM.

Aerial imagery

USGS Imagery Only from The National Map, principally USDA National Agriculture Imagery Program orthoimagery in this region. A north-up regional texture is baked over the exact terrain bounds. Inside 24 km, tiles cover the visible ground and progressively refine from district to block, roof and inspection detail. The displayed credit identifies the actual source and delivered sampling; native photographic detail varies by source. Nearby previews load after visible tiles finish refining. All photography is draped directly over the elevation mesh; the regional image stays visible whenever detail is unavailable. U.S. federal map services and data are public domain. Credit: USDA, USGS The National Map: Orthoimagery.

Rivers, roads, rail, boundaries, parks, place names

© OpenStreetMap contributors, ODbL 1.0. Queried once from the public Overpass API at build time and baked into static files — the page makes no third-party requests at runtime.

Landmarks

Hand-curated for this map. Elevations are sampled from the same DEM as the ground.

Buildings

Optional — the aerial image is the default surface, and the 3D buildings & bridges layer restores the extruded model when wanted. — OpenStreetMap footprints in two core detail zones — every building in Center City and University City, and only the notable ones (tall, large or named) across inner Philadelphia and Camden — plus eight suburban zones described below. — carry a measured OSM height, most of it from the City of Philadelphia's LiDAR-derived footprint import; — are estimated from storey counts or building type; — skyline towers with no height in OSM (One Liberty Place, Comcast Center and their neighbours) use public reference heights supplied by this project, plus the City Hall tower as a curated box. Eight suburban zones (King of Prussia, the Main Line, Northeast Philadelphia, Cherry Hill, the airport and Chester, Lower Bucks, Trenton, Wilmington) hold notable buildings only and load as you approach them. Quality defaults to Auto: the map steps its own detail down when the frame rate stays low and back up when there is headroom; pick a level to override it.

Bridges

— Delaware crossings — —. Deck alignment and width come from OpenStreetMap; spans, tower heights and clearances are rounded public reference values, and the towers, cables, trusses and arches are schematic forms built from them, not surveys of the steel.

Landmark models

— landmarks whose form does not read from a flat extrusion (Independence Hall, the Art Museum, Boathouse Row, the two stadiums, Fort Mifflin and the Battleship New Jersey) are drawn as simple solids with dimensions rounded from public references — recognisable silhouettes, not surveys. Click one, or any landmark label, for a card that says what is measured and what is not, with its sources.

Flood hazard and sea level

The Flood hazard layer drapes two public datasets on the relief. FEMA flood zones come from the National Flood Hazard Layer's "Flood Hazard Zones" service (US federal work, public domain): the 1% annual-chance floodplain (zones AE, A, AO, AH), the coastal high-hazard zone VE, and the 0.2% annual-chance shaded zone X, fetched once at build time, clipped to the region, simplified to about 25 m with areas under a hectare dropped. The effective FIRM is the regulatory product; this is a visualisation, not for insurance, permitting or engineering decisions. Sea level rise comes from the NOAA Office for Coastal Management's Sea Level Rise Viewer data (bulk vectors, no key), one scenario per foot above today's mean higher high water; hydrologically disconnected low-lying areas are not shown. NOAA's constraint, quoted: "These data illustrate the scale of potential flooding, not the exact location, and do not account for erosion, subsidence, or future construction." Nothing is fetched at run time.

Simulated time and weather

The Time & weather group is a simulation for the map, not a forecast. In Clock mode the sun stands where it would over Philadelphia on the chosen date and clock time (a standard solar-position calculation, Eastern time with daylight saving by the calendar, accurate to about half a degree); below the horizon the key light fades through civil twilight to a dim night. The weather presets scale haze, sun, sky fill, bloom and water by fixed factors. Neither reads any live data.

Historical views

The Era control (1776, the industrial city of 1900, the 1950s) changes what is mapped, not how it is lit. A building is drawn solid in a past era only when a public date says it was standing: — come from a curated list of dated buildings (published completion years, cited per entry in data/historic-buildings.json) and — from OpenStreetMap's start_date; buildings documented as newer disappear, and the — undated ones are ghosted, because a missing date is not a missing building. Bridges follow their opening years; railways exist from 1834; motorways are hidden before 1950 and ghosted in the 1950s. The 1776 view adds the approximate built-up extent of the town and of Germantown, traced by hand from William Faden's 1777 plan (Library of Congress, public domain) and labelled approximate. What is missing, and why: Philadelphia's assessor records carry a year built for every parcel, but their licence reserves all rights in the database, so they are not redistributed here; OpenStreetMap dates only a few dozen buildings. The relief, rivers and shoreline are always today's.

What this map is not

This is a visualisation, not a survey. Elevations come from a ~30 m public DEM resampled to ~46 m, then vertically exaggerated by whatever the slider says — the default 2× is not a real slope. Buildings and bridges are stretched by the square root of that factor (times the structure-height slider), so a tower stays proportionate to a hill without becoming a needle; bundled footprints are simplified, while close-up extracts retain individual mapped outlines. Heights and roof dimensions without source values are estimates. Readouts are good to a few metres at best. Three source-data seams in the northwest (thin stripes spiking to 900 m in ground that is really ~260 m) were replaced with a local median during the build. Simplified vectors drop detail below roughly 25–140 m in regional layers. Local streets, address numbers and roof shapes appear where mapped; OpenStreetMap coverage varies by area. Do not use any of this for navigation, flood risk, engineering or property decisions.

How it is built

Three.js on WebGL 2. The terrain is one draw call: a georeferenced USGS orthoimage and height field on a grid that is log-warped around the camera target in the vertex shader, so detail concentrates where you are looking without any LOD seams. Hillshade, contours, ambient occlusion and the atmosphere are computed per pixel from the height field. Buildings are one draw call per zone and height tier, packed tallest-first so the density slider is a draw-range prefix; whole tiers frustum-cull as a unit and rise out of the ground as you approach. The browser loads every byte from this origin: a baked regional image first, then a bounded tile mosaic for aerial detail and cached neighborhood extracts for streets and buildings. There is no browser credential, map account or API key.

The diorama follows the real elevation grid, roads and building footprints. Regional relief is enlarged up to 15× and returns to your chosen scale as you zoom in. Tree crowns are illustrative and constrained to mapped OpenStreetMap woodland, including clearings. Individually mapped trees appear near street level. Building colours and roof shapes follow available tags; additional facade finishes, bridge details and the cutaway earth layers are artistic. The cutaway does not represent geological strata. Switch to Classic map in Customize, or use Street inspection for an unobstructed aerial view.

Concept and prompt by Jez. Built collaboratively with Claude via Traycer and GPT‑5.6 for jez237.com. See demos/philadelphia-relief/README.md for the full architecture and provenance notes.