The map design desk Live playground

Make the city your own.

Start with a feeling. Play with the details. Take the map—and the code—with you.

01 Find your feeling

02 Compose the city

Map view

District yearColor theme

Neighborhood definition

Definitions remain independent of district year.

03 Mix your inks

04 Type & finishing touches

SVG title Visible text labels Label font Label weight 550 Label size 12 px Pin radius 6 px

Font and screen sizes apply to the browser map. SVG title applies to export.

05 Places & movement

Five sample city pins Sketch a route across the city

The route is an illustrative sketch, not directions.

Map navigation controls Draw-in animation for SVG

Motion always respects reduced-motion preferences.

Loading geography…

Preparing your canvas…

Original atlas2022

Yours to keep

One city. Infinite expressions.

SVG export uses full-precision geography, the full city extent, and static labels. The browser preview uses display-simplified geography; zoom and screen sizing stay in the browser.

What you see, what you ship

Your map, in code.

Language

v4.3.1 · on npm · explicit data imports, zero runtime dependencies.

Under the hood Resolved layers & data

Availability comes from supplied geography. Effective switches include mode defaults and master label visibility; zoom and collision rules can still hide individual labels.

A small map with a large imagination. Geography stays precise. Neighborhood sources stay distinct. Your design travels as a self-contained SVG or a few lines of JavaScript.

Explore the API reference