Map Folio

Projects · Map Folio in Studio

Map Folio demonstrates layered SVG cartography with D3 using retained Bali OpenStreetMap snapshots from 2022. Toggle forest, rivers and water bodies, rotate the transverse Mercator projection, and change the graticule labels. The map recomputes from the same attached geometry; changing its appearance does not refresh the data.

The renderer draws geographic layers in order, then places callout labels and graticule annotations. Water patterns and shared land, forest and lake colors separate features without a detailed basemap. The technique draws on Nicolas Lambert’s Bertin.js.

Projection and layer controls

Layers

drawLabels

Uses @mapbox/polylabel to compute label positions.

drawSymbols

Markings

Helpers

CSS Helpers

Patterns

These can be moved to a separate notebook.

Sample datasets

Imports

Source and reuse

The attached snapshots represent a retained OSM extract, not a current or complete land-cover inventory. Credit OpenStreetMap contributors and inspect source attributes before deriving counts or areas. The original source record retains attachment identities and checksums.

The published map’s reusable view and offline HTML retain controls and geometry. An exported edition does not acquire newer observations. See the Projects directory for its editable Studio record.

Download the interactive HTML edition · Importable map module

The retained export uses the same 2022 snapshots. Create an isolated interactive view from the module:

import {createView} from "https://opengeo.tools/map-folio/_import/exports/map-folio.58a6b454.js";
const frame = await createView({document, height:700});
document.body.append(frame);