Isopolis – Isometric Pixel Map of San Francisco Built with Google 3D Tiles and AI‑Generated Art
Overview
Isopolis presents a playful, isometric pixel‑art view of San Francisco that combines map data with AI‑generated textures. The site loads a scrollable map rendered at roughly 3.13 m per pixel, labeled LVL 5/7, and offers four guided tours: SF 101 (8 stops), Ship It SF (7 stops), TPOT Tour (5 stops) and Hike‑a‑thon (10 stops). It lists 177 places out of a total of 583, ranging from landmarks such as the Golden Gate Bridge and Salesforce Tower to neighborhoods like Hayes Valley and the Mission. Users can contribute new entries through a community form that requires a name, map pin, type, event date and time, and optional notes; each submission is queued for human review before appearing on the map. The page credits the creator nuwandavek and links to a technical report at https://sf.isopolis.city/dev.html. Published Time: Sun, 02 Aug 2026 23:47:05 GMT.
Technical Approach
The map is built by streaming Google Photorealistic 3D Tiles into a three.js scene, then using AI‑generated ground‑truth pairs to create a consistent Ghibli‑style pixel‑art look. According to a comment by lawrencechen, the source data is Google Photorealistic 3D Tiles; the earlier isometric.nyc project explored and rejected the use of 3D building data. A Claude Code‑written scraper streams the tiles and feeds them to three.js for rendering. To obtain the visual style, ground‑truth pairs are generated using Google’s Nano Banana model, producing Ghibli‑style pixel‑art images that are then curated. Achieving a consistent style required extensive manual trial and error, and Claude Code was later extended with a feature to let the creator select and approve the best images.
Community Reaction
Commenters praised the project’s charm and nostalgic feel while noting visual quirks such as mis‑rendered roads as lakes and limited zoom.
"Behind the scenes stuff: https://sf.isopolis.city/dev.html > The source is Google Photorealistic 3D Tiles. Isometric.nyc explored and rejected the use of 3d building data. It is pretty insane that US gov has free LIDAR data for every city in the US available to the public. I spent <30mins exploring this and stuck to google 3d images. Claude Code whipped up a scraper to stream the 3D Tiles and render with three.js. This gives the best "real" texture base for the model to learn from. Anything else would involve a LOT of manual work to get the inputs right. > Now that we have the 3D tiles, we need to generate the ground truth pairs for training! Similar to isometric.nyc, I generated a few ghibli-style pixel-art images using Google's Nano Banana. SF terrain is very interesting. There are quite a few distinct features like skyscrapers in FiDi, the hills in the southeast, 2 iconic bridges, lots of coastline, piers, parks, suburban grids and lots of water. I generated a ton of images and curated from them. Getting consistent style was a challenge. There was a LOT of manual trial and error. But as usual, Claude Code added this feature to the dev app that allowed me to select the best images and approve them." — @lawrencechen "I'm reminded of the wonderful https://cannoneyed.com/projects/isometric-nyc project, also previously discussed here: https://news.ycombinator.com/item?id=46721802 This could be a great anecdotal benchmark for agent/model progress. I wonder how much easier things have gotten with the latest Codex/Claude vs. when isometric.nyc was made." — @wxw "Those who know game dev know making good isometric maps can be deceptively difficult. You grabbed that bull by the horns and did so beautifully. Well done!" — @jtfrench "Incredible. It's easy to just go on browsing and exploring. The massive, scrollable pixel art aspect reminds me a little of Floor796: https://floor796.com/" — @murphyslab "Really cool. I can see some issues, like Starr King park turned into a lake for some reason, but it’s so much fun to look at. Do you have any way to patch errors and discontinuities at the tile boundaries?" — @montag "Just one little thing: East of Buena Vista Park, you have a lake, it is actually the road which goes around the park. Also, I would love to zoom in more." — @flomo "A few AI anomalies, like several roads turning into rivers and lakes. There are also a few massive square ponds in the Tenderloin that I am pretty sure do not exist lol But I like the idea." — @cyanregiment
Limitations and Future Work
Users reported missing street names, transit lines, and difficulty zooming in, and suggested additions like a navigation app or bulldozer tool.
"Nice! But for a city renowned for its steep streets, this looks suspiciously flat :) Ok, you could say it's only a 3D rendering of a 2D map, and it probably has to be this way for practical reasons, to avoid hills obscuring objects behind them, because you can't rotate the map as far as I can see, but not seeing actual height represented in a 3D view still takes some getting used to. Also, there are neighbourhoods and landmarks, but not actual street names as far as I can see? Not to mention transit stops/lines and other fancy stuff one could add..." — @rob74 "Amazing! I was sad I couldn't zoom in more tho" — @harrisonpage "Would be extra awesome if there was a navigation app that used this map" — @qurren "Wow, very impressive! But where is the bulldozer tool? I have some landscaping to do." — @bjourne These remarks point to opportunities for adding vector overlays such as street labels and public‑transport routes, increasing zoom levels, and providing editing tools for community‑driven corrections.