Building Center City Philadelphia From Open Data

The 1200 block of Spruce Street in Washington Square West, in the game.

Philadelphia Fiefdom's map is Center City Philadelphia, from Vine Street to South Street and from the Schuylkill to the Delaware. It's laid out from OpenStreetMap and the City of Philadelphia's open data, so the one-way streets, lanes, bike lanes and parking are where they are on the real streets. You can walk it, drive it and cause trouble in it, one continuous city with no loading screens.

I wanted a game where you can actually find your corner. This post is about how the map gets built, and what it takes to turn real map data into a pixel art city.

Where does the map come from?

All of it comes from public, open data:

OpenStreetMap (opens in a new tab) for the streets: where they run, which way is one-way, how many lanes, where the bike lanes and parking are.
The City of Philadelphia's open data (through OpenDataPhilly (opens in a new tab)): building footprints and property parcels, plus the street details. That includes Parks & Recreation's 2025 street tree inventory, street poles, storm inlets, fire hydrants, signalized intersections, the bike network, sidewalk cafés and Indego bike-share stations. I only use the parcels' shapes; owner names are never kept.
The city's 2022 LiDAR survey (through PASDA (opens in a new tab)) for building heights. Each building's roof height becomes a number of stories, calibrated against real rowhomes: about 25 feet for two stories, 34 for three, 43 for four.

Trees are a good example of how literal this gets. The city's inventory lists 10,294 street trees inside the map. The game plants 6,154 of them where they really stand, each as its listed species, aged by its trunk's measured width. Most of the rest, about 3,300, aren't beside a street the game draws yet. Another 640 or so would land on top of something already on the sidewalk, so they're skipped.

Summer: The same block of Spruce Street in summer and in autumn. Each street tree is its listed species, and turns on its own. — The same block of Spruce Street in summer and in autumn. Each street tree is its listed species, and turns on its own.

Autumn: The same block of Spruce Street in summer and in autumn. Each street tree is its listed species, and turns on its own. — The same block of Spruce Street in summer and in autumn. Each street tree is its listed species, and turns on its own.

How do you fit a real grid onto pixel art?

Pixel art draws a few line angles cleanly, and the cleanest views are at multiples of 45° (the last post explains why). So every street in the game runs at a multiple of 45°.

Center City makes this easier than most cities would. William Penn's grid is already square, just turned about 9.5° off north. The whole map is turned to match, with its center at Broad and Market, right under City Hall tower. The grid streets then run straight across the screen, and the diagonals snap to 45°.

The in-game map of Washington Square West: the square street grid, the subway and PATCO lines, and the parks.

Designing it street by street

Raw map data isn't a game level, so I go through the city an area at a time:

A tool drafts every street from the data: its direction, its lanes each way, bus and bike lanes, parking on each side, its surface.
I edit each area's design by hand, checking it against what's really there, and fix anything that won't work in the game.
The city gets built from those designs, and two checks run on every build. One compares the built streets back against OpenStreetMap: one-ways, lane counts, parking and bike lanes. The other makes sure no traffic lane runs into a building or stops at a dead end. Both have to come back clean.

Anything strange gets written down in a running list of city oddities rather than quietly smoothed over.

The first block I designed in full was the 1200 block of Washington Square West: 12th to 13th, Spruce to Pine. Its rowhomes, bays, bike lanes and flex posts were built from the real footprints and heights. That block set the rules for everything after it.

How big is it?

Vine to South and river to river is a little over two miles across and about a mile deep. In the game that's 13,860 chunks, streamed in around you as you move, so the whole thing is one continuous city with no loading screens between neighborhoods.

Quick answers

Is Philadelphia Fiefdom set in the real Philadelphia? Yes. The map is Center City, laid out from OpenStreetMap and the City's open data.

Can I find my street? If it's between Vine and South, river to river, yes. The streets follow the real layout. Buildings take their footprints and heights from city data.

Will more of the city be added? That's the plan. The map tools work for any part of Philadelphia; each new area gets the same street-by-street pass.

If you know these streets

If you live here and something's wrong (a one-way that goes the other way, a missing bike lane, a tree that's been gone for years), tell me on Discord (opens in a new tab). Every fix makes it more Philly.

Philadelphia Fiefdom is an online sandbox you play with friends. Join the playtest list to walk these streets early. And if you missed them, the first two posts cover how the city stays pixel art and how the camera turns, and the next one is about the one shader that draws the whole city.

Map data © OpenStreetMap (opens in a new tab) contributors, under the Open Database License. City data courtesy of the City of Philadelphia via OpenDataPhilly. LiDAR via PASDA.