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.
interesting with the alcatraz island - I notice its invented some houses, and turned a cruise ship into a rock. I appreciate the difficulty and getting a lora to understand it - despite this the finished project is beautiful
I also feel that codex hasn't done a very good job of explaining some of the concepts in the dev blog, they drift into the word-soupy at times. I forget who it was who I saw mentioning it here on HN, but I've been having a lot of success with getting models to (re)write technical explanations in https://en.wikipedia.org/wiki/Simplified_Technical_English
> I'm stoked for the golden era of side-projects!
Love that attitude. Me too!
glad you liked it!
I had to leave out a ton of details in the training process. But at every step, codex/cc built me a dev tool to navigate the complexity. That was such a unique side project experience.
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...
from his dev blog: "All map math happens in a single fixed ... plane... The intended effect was a classic Sim City view of the city. "
It's vibe coded. LLM's have a hard time understanding elevation and isometric display.
It’s vibe coded but it’s not slop. There’s a lot of human input here. So either the author overlooked the elevation issue or it was a deliberate decision, but in any case you can’t just pin this on “LLMs don’t understand isometric 3D”.
>ghibli-style pixel-art
I suppose that explains the yellow filter and the mixels
Unwanted sound! Not cool.
woahhh, these are so beautiful!
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/
This is amazing, it got everything I could think of but not all, where’s little nightmares, silent hill, naruto, men in black, for a starter. But it’s neat regardless!
i remember seein men in black here
This is incredibly beautiful.
A few months back I tried to build a my own version of Google Earth rendered in voxels. Basically building from the terrain heightmaps scans available in open public data. Making it smooth and tessellation to work was incredible amount of work even for a simple vexed renderer
https://codetiger.in/earth/
Nice, but not sure I agree with your use of voxels. It appears more like pixelated height map, not the use of 3d pixels. From what I see every position on the globe can only have a single elevation
Each pixel is a cube drawn at a certain height based on the terrain height map data. It’s not a volumetric render, I agree.
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!
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.
I'm currently playing with something a bit similar and I was wondering about the fair use aspect.
What's the consensus on sharing the stylized assets created by diffusion models based on reference photos from e.g. Google Earth? Can the final output be shared as public domain or do Google, Airbus, et al. still hold some rights over them?
The same "fair use" as when Google trained its model on everyone else's photos.
Would be extra awesome if there was a navigation app that used this map
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. (pls give me the pixels)
Spurious lakes are an interesting issue I looked into a bit. 2 types of cases ended up becoming lakes:
1. "shadows"
2. flat green areas
I think a better data distribution should eliminate this. Also, my "water detector" was not too good and could be improved.
I wrote about a few of these things here: https://sf.isopolis.city/dev.html
This is really cool, it gives me SimCity 2000 vibes. I like that I can click on neighborhoods and regions and get more information about them!
Very cool! Yesterday my wife and I watched Inside Out, and seeing the San Francisco setting felt very familiar (last year, 2025). Last year, in 2025, my wife and I went to San Francisco for our honeymoon. This website also showed me many familiar places.
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?
yeah, there are a ton of issues especially around water. I've documented a bunch of them here: https://sf.isopolis.city/dev.html
I tried out a few ideas, but i think better training data around water will help a LOT.
Fantastic project! Sim-city over San Francisco.
Amazing! I was sad I couldn't zoom in more tho
oooof, I can actually allow more zoom (was just embarrassed at bad pixels)
Reminds me "transport tycoon", very cool!
THIS IS SICK!
The BGM, the SFX, the visual are all perfect.
My favorite is the banner plane, this is really really SF
Sorry but that is not pixel art.
I am not a fan of this.
Like the new york one, its just...unpolished. I dare to say slop. I am sure the author put some effort into it, BUT its just not there for me. The wiggly lines, the blurry designs and just everything. With something is pixelart or appears to be, I expected it to be pixel perfect, not just some random picture that looks like pixelart on the first glance.
The idea feels neat, but the execution needs so much more touch and polish. Maybe even handcrafting to be impressive.
Super cool! Can you talk a bit about how you built it?
It would be nice to have a Google or Apple maps version of this. I would also love to see this while driving.
time to push the boundaries of your creation
well done! The opening music made me lol
Crazy to me that people engage with this. This is not pixelart or any art really, it's just a weird blurry mess. Looks terrible.