Six maps, six defaults
Live, not screenshots. Every preview below is a real instance drawing real geometry out of the built-in registry, with nothing configured but the data.
Encode the data
The decisions that decide what a choropleth actually says.
- Choropleth defaults What you get with no styling passed at all
- Classification Quantile, Jenks, equal interval, threshold: four conclusions
- Palettes All 17, sampled in OkLab, with the automatic diverging choice
- Counts versus rates The most common way to publish a misleading choropleth
- Basemap only Geometry with no series still renders
- Pattern fills Texture that survives a photocopy, spaced so the colour still leads
- Image fills A landscape per state, clipped to its own outline
Marks beyond the fill
Points, connections and routes, each with the encoding it deserves.
- Bubbles Proportional symbols, square-root scaled, nested-circle legend
- Markers and clustering Seven generated shapes, categorical colour, distance-based clusters
- Arcs Great circles on a night map, cut at the antimeridian
- Lines and routes A path drawn through the places it passes, not derived from endpoints
Frame the world
Projection, camera and the editorial layer that says why you published it.
Wire it to a product
The parts that turn a graphic into an interface.
- Drilldown States into counties, scoped to the state you clicked
- Box selection and linked maps Shift-drag to brush, and brush two maps at once
- Join diagnostics Why the map is grey, answered in one line
- The geometry registry 26 packs with recommended keys, projections, views and provenance
- Extension points registerMap, registerProjection, registerPalette, setGeoSource
- Export Download the current view as SVG or PNG, or embed it as a data URI
- Accessibility Keyboard navigation, generated description, data table
At scale
What a dense map costs in your own browser.
Geometry comes from the built-in registry, served out of geo/ in this repository
by ApexMaps.setGeoSource('https://cdn.jsdelivr.net/npm/apexmaps-geo/'), so nothing needs downloading first. Run
npm run check:examples to load every page and fail on a demo that errors or
draws nothing. Data marked illustrative is generated: it is a smooth field over the globe,
deterministic on every load, and it is never presented as a measurement.