Show HN: Isometric SF – A pixel-art map of the SF Bay Area
75 points by juscha1 3 hours ago | 27 comments
Technical Write-up: https://www.justinchavez.com/blog/isometric-sf-how/

Hi HN! Showcasing this fun project. I took 1300 square miles of the SF Bay Area from Google Photorealistic 3D Tiles and transformed them into a cohesive pixel map. It's really fun to explore and stumble upon various famous landmarks like Apple Park, Palace of Fine Arts, or UC Berkeley.

The technicals involve using Nano Banana 2 to train a Qwen-Image-Edit 2511 LoRA which is used to prototype the style and generation methods. For final map I used Qwen to train a Klein 4B LoRA which reproduced the style at 1/4 of the cost. More details in the blog post.

Let me know what you think! I really enjoyed this process of fine-tuning smaller open source models.

If I did the map with Nano Banana 2 it would have cost around 7k USD!

Credit for the idea goes to Isometric NYC.


drayfield 2 minutes ago
Sorry to be a downer, but this looks really bad to me. It completely lacks the sumptuous precision of real pixel art.
reply
30minAdayHN 11 minutes ago
This is so beautiful! Something soothing and ultra clean about it. Maybe all the maps should have this rendered version as default.
reply
mlmonkey 2 hours ago
OP didn't mention it (or maybe I missed it), but the underlying imagery comes from the Google 3D photorealistic tiles API: https://developers.google.com/maps/documentation/tile/3d-til...

They offer a generous 1000 API calls per month for free, in case anyone is interested in replicating this.

reply
kenferry 3 hours ago
…not actually pixel art though, no?
reply
simlevesque 19 minutes ago
Search for "pixel art" in HN's search and you'll see most of the last submissions are the same fake pixel art.

"pixel art" NYC: https://news.ycombinator.com/item?id=46721802

"pixel art" Rio: https://news.ycombinator.com/item?id=50448289

"pixel art" London: https://news.ycombinator.com/item?id=50163735

"pixel art" Valencia: https://news.ycombinator.com/item?id=50441518

"pixel art" world: https://news.ycombinator.com/item?id=49674973

There's almost a hundred of them and I'm not exagerating:

> https://isometriccities.com/ Since Isometric NYC, makers around the world have been rebuilding their hometowns as giant SimCity-style maps. We collect every one of them. 98 maps

reply
shrinks99 2 hours ago
Yeah. I'm surprised this technique hasn't yet caught on among people doing generative visuals with "pixel art" aesthetics: https://github.com/Hugo-Dz/spritefusion-pixel-snapper
reply
vunderba 2 hours ago
I mention this a lot: the two basic post-processing steps you have to do, at a minimum, to give genai images even a semblance of pixel art are palette reduction and square grid alignment.

Unfortunately, the definition of "pixel art" like "vibe coding" has been diluted to the point of almost being meaningless.

If you have a project like this with tens of thousands of tiles, you have to run them all through square grid alignment. That process tries to pick an optimal square grid and then reduce the image to a discrete set of pixels, with each square resolved to a single color.

It's similar to what you do when you shrink an image using nearest-neighbor scaling. As a result, you mitigate a lot of the irritating high-frequency noise and fringing that occur in these higher-resolution pixel art images from generative AIs.

Applying it to a project with tens of thousands of images still requires a lot of manual intervention. This is what makes separates good pixel art from bad pixel art: even at a low resolution of 16x16 or 32x32, it's still recognizable.

Try taking any of the 512x512 tiles from this particular isometric city project (or any of the other dozen variants) and feed'em into Spritefusion and you'll quickly see what I mean.

https://imgpb.com/ePXki

reply
larodi 2 hours ago
Why does anyone need to publish anything like this snapper, the person doing pixelart, if he understands pixelart, should know to do it himself! this is the third map published here in apparent diffusionart which is absolutely not a pixelart. besides for buildings - pixelart artists would choose repeating stuff that diffusion models would never be able to reproduce, at least for the FP errors that pile while it happens.
reply
blobbers 8 minutes ago
Just wanted to say... this is beautiful!
reply
va3ndf 16 minutes ago
This is my favorite one yet! I used to live in SoMa and this captured my apartment and the nearby Caltrain wonderfully!
reply
packeted 22 minutes ago
Found my house in East Bay and it looks accurate, cool.
reply
gojomo 40 minutes ago
Is there any way to rotate the perspective, as in Google Maps with 2-finger gestures (touchscreens) or shift-drags (mice/etc)?

(I couldn't find it, if it already exists.)

reply
juscha1 27 minutes ago
Not at the moment. It's captured at a fixed angle.
reply
leugim 2 hours ago
How much it cost you paint per km2 after training the model? I did (and publish here) https://www.tinyvalencia.com and got to 0.4$ per km2 after training the model (for 15$ or so).
reply
juscha1 2 hours ago
It cost around $0.09 per km2 after training the model
reply
dnlzro 2 hours ago
I've been seeing a lot of these kinds of projects make the rounds on Twitter lately. Yours is just as good as the best of them, so great job making it more efficient without loss of quality!

But... I'm always disappointed when I zoom in and see that it's not actually pixel art, and it's full of the kinds of artifacts that are typical of any AI-generated imagery :(

reply
cmdoptesc 2 hours ago
Hi Justin, great writeup!

I really appreciate your human-written documentation because it's nice to read your thought process instead of LLM marketing soundbites.

re: orientation. I know it's creator's choice, but for me, it's either north or west towards the ocean. East makes me want to hold shift to rotate. :)

Thanks for making and sharing this!

reply
juscha1 2 hours ago
Thank you! I tried to get Fable to take a stab at writing the technicals in the original reflection post, but I really didn't like it and sought to rewrite it myself. Took a week longer, but I'm way happier with the result.

Technicals written by Fable at the end of this post: https://www.justinchavez.com/blog/isometric-sf/

reply
modeless 2 hours ago
This style seems achievable while retaining 3D rendering if the tiles are preprocessed in 3D instead of 2D and some clever shaders are used.
reply
JeremyHerrman 34 minutes ago
unfortunate that google explicitly forbids 3D model generation from their map data
reply
modeless 25 minutes ago
I'm pretty sure that re-rendering the tiles to 2D and rehosting them on your own website is also forbidden. So no difference there.
reply
jeffbee 2 hours ago
Not bad. I feel like instead of using an image-mode model, it would be better to use a code model that generates the scene. Reason I think this is that the image generators aren't respecting the rules of "pixel art". Straight lines and flat planes are straight and flat in pixel art. These images are wavy and irregular.
reply
NeuraCryption 3 hours ago
This is amazing and is 1:1 global map. Did you use google maps API to build this or UE5?
reply
juscha1 2 hours ago
I used the Google 3D Photorealistic Tiles API then rendered the tiles in three.js to capture them at the angle I wanted
reply
leugim 2 hours ago
Google 3D tiles.
reply
yboris 3 hours ago
Impressive! And the aesthetics look great!
reply