CityPlot

Study

Working question: when does map data become a drawing?

The thing is a city-map generator that turns OpenStreetMap data into SVG layers for plotting. Streets, buildings, water, parks, and railways become material for line work.

The current page describes the generator. The study note still needs the visual and physical lessons: what map features work on paper, what needs editing, and how scale changes the result.

CityPlot generates SVG city maps from OpenStreetMap data. The output scales cleanly and works with pen plotters, laser cutters, and CNC machines.

Source: github.com/utrost/CityPlot · License: AGPL-3.0 · App: simiono.com/cityplot/

How it works

OpenStreetMap already stores streets as lines, buildings as polygons, and rivers as paths. CityPlot takes that vector data and writes SVG directly.

• Fetch: query the Overpass API for map features within a radius.
• Project: transform lat/lon coordinates into metric space.
• Clip: cut geometries to the target area, either rectangular or circular.
• Render: write SVG paths, grouped by layer.

The output is measured in millimeters. A 420×297 mm SVG maps 1:1 to A3 paper. Scale it up for a poster or down for engraving; the lines stay sharp.

Layers

Every feature type gets its own SVG group. That matters for plotting. A multi-pen plotter can switch colors between layers, and a single-pen setup can pause between groups.

Layer examples:

• Primary streets: motorways, trunk roads, primary roads.
• Secondary streets: secondary and tertiary roads.
• Minor streets: residential, pedestrian, and living streets.
• Water: rivers, canals, streams, and filled water areas.
• Buildings: building footprints.
• Parks: parks and green spaces.
• Railways: rail lines, usually dashed.

For a 100 km radius map, you probably want only primary streets, water, and green space. For a neighborhood portrait, you want more detail.

Styles

The current presets are simple:

• default: colored layers for water, parks, buildings, and streets
• minimal: streets and water only, black strokes
• buildings: building footprints as the main feature
• mono: everything in black for single-pen plotting

Browser and CLI

The browser version runs client-side. It queries Overpass directly, projects coordinates in JavaScript, and generates the SVG in the browser. No server, no account.

There is also a Python CLI for batch processing and offline use. It uses osmnx and Shapely for UTM projection and geometry clipping.

What makes a good map

Dense old towns usually plot well because the street patterns are irregular. Grid cities produce a different kind of image: cleaner, stricter, sometimes almost too regular. Sparse suburbs tend to look empty unless the buildings carry the composition.

Water helps. Parks help. A city without either needs enough street or building density to hold the page.

Plotter connection

CityPlot belongs to the same toolchain as the other line-based projects:

• Generative Art for algorithmic patterns
• Primitive for geometric image approximation
• Gantry for preparing and plotting SVGs

The shared constraint is simple: the result has to become lines a pen can draw.

See also: From Pixel to Pen, Gantry, PPCT, Generative Art, Primitive, SVGToolBox, VHS