How to make an isometric pixel-art map of your city

There are now 26 isometric city maps in our directory. Almost all of them use one of three techniques. Here is how each works, what it costs, and how to pick one for your city.

What makes a map “isometric”

An isometric view looks at the city from a fixed diagonal angle with no perspective: a building at the back of the map is drawn the same size as one at the front. In pixel art this is usually “2:1 dimetric” — every tile is twice as wide as it is tall, so diagonal lines step two pixels across for each pixel down. That is the look of SimCity 2000, RollerCoaster Tycoon and Transport Tycoon.

Technique 1: AI-drawn tiles (21 maps)

This is the approach Isometric NYC made famous and the one most maps in the AI-drawn category use.

1. Get reference imagery of your city from an isometric-like angle — oblique aerial imagery or renders of photogrammetry 3D tiles (e.g. a 3D tiles viewer with an orthographic camera rotated 45°).
2. Cut it into a grid of tiles with some overlap, so neighbouring tiles share context.
3. Translate each tile into pixel art with an image model — either an image-editing model prompted with a style reference, or a model fine-tuned on a few hundred hand-picked “photo → pixel art” pairs for consistency.
4. Stitch and fix seams. Generating tiles conditioned on already-finished neighbours keeps roads and rivers continuous across edges.
5. Review by hand. Expect to regenerate a fraction of tiles where the model invents buildings or breaks the grid.

Pros: the most “hand-made” look. Cons: GPU/API cost scales with city area; consistency needs real effort.

Technique 2: rendering open data (3 maps)

Instead of an image model, draw the city from data: building footprints and heights from OpenStreetMap (or a national cadastre), extruded into blocks and projected isometrically. You control every pixel through code, so the style is perfectly consistent and the whole city can be re-rendered in minutes.

• Download data for your area from an OSM extract (Geofabrik) or the Overpass API.
• Project lon/lat to a local metric grid, then to isometric screen space: x = (e − n)·cos30°, y = (e + n)·sin30° − h.
• Sort by depth and paint roofs and two visible walls with three shades of a colour.
• Add water, parks and roads as flat polygons underneath.

Pros: cheap, reproducible, and accurate. Cons: looks more like a diagram unless you invest in textures and landmark sprites. Browse open-data maps for examples.

Technique 3: 3D diorama (2 maps)

Build a real-time 3D scene (Three.js, Babylon.js or a game engine) from the same open data and look at it through an orthographic camera. You get rotation, day/night cycles and animation for free — at the cost of a heavier page. See the 3D diorama maps.

Shipping a giant zoomable map

A whole city at pixel-art resolution is often hundreds of thousands of pixels wide. Don’t ship one image — ship a tile pyramid:

• Generate a deep-zoom pyramid (DZI) or XYZ tiles with vips dzsave.
• Serve them from a CDN or object storage (Cloudflare R2, S3) — tiles are immutable, so cache them forever.
• View them with OpenSeadragon, Leaflet (CRS.Simple) or deck.gl.
• Use image-rendering: pixelated so zoomed-in pixels stay crisp.

Launching it

• Pick a short, memorable domain — many makers use the tiny<city> or isometric<city> pattern.
• Add a good Open Graph image: a zoomed-in crop of the most recognisable landmark.
• Post a short screen recording of zooming in. That is what spreads.
• Submit it to Isometric Cities and add our “Featured on” badge.