OpenStreetMap

Loading terrain…

Buenos Aires streets, water, and buildings stream from OpenFreeMap, the same provider used by the maps workbench. Drag to explore. Tile loading requires a network connection; no API key is needed.

Mount street layers

import {
  createGlyphMap, glyphMapGlobe,
  glyphMapOpenFreeMapProvider, glyphMapOpenMapTilesLayers,
} from "@glyphcss/maps";

const osm = glyphMapOpenFreeMapProvider({
  onError: (error, tile) => console.warn(tile, error),
});
const map = createGlyphMap(host, {
  view: { center: [-58.3745, -34.6057], span: 0.016, cols: 100, rows: 48 },
  projection: glyphMapGlobe(), tilt: 55, bearing: 25,
  layers: glyphMapOpenMapTilesLayers(osm, {
    include: ["omt-water", "omt-roads", "omt-buildings"],
  }),
});
// On unmount: map.destroy();

Buildings appear only at street scale. Missing or undecodable tiles resolve empty; onError reports them. Heights use true metres; add terrain for relief under streets and buildings.

Choose layers

Spec id	Draws
omt-landcover, omt-landuse	Coloured polygons by class
omt-water, omt-waterways	Water areas / river lines
omt-roads, omt-aeroways	Roads and rail / airport lines
omt-buildings	Extrusions with facades
omt-boundaries	International borders; excludes maritime and disputed lines
omt-places, omt-peaks	Place / summit labels
omt-parks, omt-water-labels	Named parks / water labels
omt-pois	Dots with rank ≤ 20

glyphMapOpenMapTilesLayers(source, options) accepts:

• include: spec ids in drawing order; omitted means all.
• classes: allowed class values per source layer.
• colors: colour override per spec id, replacing its class palette.
• densities: resolution per spec id; textAnchors: placement per symbol id.
• lineOptions: per line spec id, experimentalGlyphStrategy, simplify, sharedArcs, color, colorProperty, colors.
• roadHierarchy: opt-in live road-class cut by output-cell resolution.

roadHierarchy: true keeps motorway/trunk/primary at every resolution; secondary/rail appear at ≤0.003 longitude degrees per output cell, tertiary/transit at ≤0.0008°, minor at ≤0.00035°, and service/track/path and unknown classes at ≤0.00012°. This uses the live output grid, including density overlays, rather than a fixed view span or the provider’s zoom cap. Walking keeps all classes. At 139 columns, Buenos Aires span 0.3 keeps the main structure, Zürich span 0.06 adds tertiary roads, and Buenos Aires span 0.04 retains minor streets. These are resolution cuts; tile zoom still controls which classes the source supplies.

The /maps card opts into this hierarchy and VW line options, drawn in braille by default (?lines=box opts into the box strategy). Roads use a blue-grey class palette (#dbeafe major through #394d63 paths), distinct from the amber country borders. Only boundaries request shared polygon arcs: roads, waterways and aeroways are explicit routes, whose paths the topology pass deliberately keeps separate. The factory defaults remain unchanged; a uniform colors override replaces a class palette.

Roads exclude tunnels, driveways, parking aisles, and indoor paths. Water drapes lakes on terrain and keeps oceans flat.

When terrain is mounted, pass waterTerrain: true to glyphMapOpenMapTilesLayers to let the complete water row decide land versus sea. Inside loaded tile coverage, dry land uses at least the terrain ramp’s 0 m land colour and stays at or above datum, preserving islands that a coarse DEM misses. Water polygons keep their existing drape; terrain is cut away beneath them, including the ocean. /maps enables this on its Water row; the package default stays off.

The entire requested tile batch must succeed before its coverage and water geometry replace the previous snapshot. While tiles load or fail, the previous snapshot remains; outside that coverage the DEM still decides. A successful tile without water features means land. Failed tiles grant no authority and retry on the next sweep. Static collections and water rows narrowed to selected classes grant no authority through this option. Removing Water restores the DEM. The datum floor for dry land also overrides a negative terrain ceiling.

Provider options

Option	Default
tileUrl	OpenFreeMap planet latest template; replace for self-hosting
minZoom / maxZoom	0 / 14
tileResolution	256
layers	All source layers; narrow decoding with a list
id	"openfreemap"
attribution	OpenStreetMap, OpenMapTiles, OpenFreeMap credits
fetchTile / onError	Browser fetch / no callback

Each mounted layer has its own tile sweep. Share in-flight fetchTile requests by URL when mounting several layers; the workbench and live example already do this.

Self-hosted PMTiles

import { glyphMapPMTilesProvider } from "@glyphcss/maps";
const archive = await glyphMapPMTilesProvider("/data/region.pmtiles");

For Protomaps-schema extracts, use glyphMapPMTilesBufferSource, glyphMapProtomapsExtract, and glyphMapProtomapsLayers. Extracts decode up front and default to maxTiles: 64; larger archives throw. Protomaps uses its own osm-* spec ids and kinds filters; OpenMapTiles omt-* ids do not apply.

Attribution

const credits = map.getAttributions();
// Display name, license, and linked url for every mounted source.

Keep the OpenStreetMap contributors ODbL credit visible. Provider credits follow mounted layers and disappear when removed. The live example displays all three source credits below the map.