Street Spirit aims to be a general purpose map style for OpenStreetMap data, suitable
- for use as a locator map,
- to show off what can be done with OpenStreetMap data,
- to be up-to-date with the latest OpenStreetMap data, and
- for using to orient a viewer to a location they are at.
There is no ranking of these goals, and they may require compromises between the different goals.
It does not seek to
- be a suitable style for overlaying complex data on,
- drive OpenStreetMap tagging practices, or
- be a replacement for maps with a specialized topic.
As this style doesn't aim to have data overlayed on it, it can use all the available cartographic space. It does not need to avoid particular colours or symbols, except for icons that look like typical locators pins, as these might be used by locator maps, and would be confusing regardless.
This enables a wider range of colour and saturation than typical general-purpose web maps, more similar to topographic maps and atlases.
We target Maplibre GL JS usage as part of a web-page that is either focused on the map, or has the map as part of a larger page. Usage across desktops, tablets, and phones is supported, with support for high-DPI displays. Smart watches and print are not targeted.
- All icons must be SVG, saved as standards compliant SVG without any proprietary tags. In Inkscape software, you will need to "Save As..." and choose the format Optimized SVG (preferable) or Plain SVG.
- Use a common canvas size, which is usually 15x15 px.
- Align vectors to the pixel grid.
- Make a clean design, so reduced complexity where possible.
Work out colours in the LCH colour space, because RGB and other non-perceptual colourspaces are hard to reason about.
The chroma.js documentation can function as a colour calculator.
Use a consistent hue angle for a class of features. The following hue angles are used in this style
Features | Hue |
---|---|
Water | 240° |
Transit | 280° |
Admin borders | 330° |
Buildings | 100° |
Food | 70° |
Contributing to the style requires some technical knowledge in the following areas
- MapLibre GL style specification, focusing on layers and expressions, including data-driven expressions;
- YAML, in particular appropriate indentation for arrays. MapLibre GL styles tend to feature deeply nested arrays; and
- SQL for writing read-only PostGIS queries if modifying vector tiles.