What's New in ApexMaps 0.3.0: Pattern Fills, Flow, and a Globe You Can Spin

ApexMaps 0.3.0 shipped on July 31, 2026 with pattern and image fills, flow beads along routes, and an orthographic globe that spins under the pointer. The canvas renderer is removed and two defaults change what an existing map does, so check the table below before upgrading.

Key takeaways

• Pattern and image fills (fill.pattern, fill.image), two separate Premium features.
• flow: true sends beads along an arc or line route, from from toward to.
• An orthographic globe spins under a drag, and flyTo turns it to reach the far side.
• On-screen + / - / reset zoom controls render by default, with a keyboard path.
• Breaking: the canvas renderer is removed; SVG is the only renderer.
• Upgrading is npm install apexmaps@0.3.0.

Which defaults changed?

Change	Release	What you will see	How to reverse or upgrade
Canvas renderer removed (breaking)	0.3.0	Every map draws in SVG, including one with 20,000 or more geometry marks that 'auto' used to promote to canvas. chart.renderer and chart.rendererThreshold are ignored and nothing throws, but a TypeScript options literal that sets either fails to typecheck	Delete both options (below)
Zoom controls on	0.3.0	+, - and reset buttons in the top-right corner of any map with zoom enabled	interaction: { zoom: { controls: false } }
Globe rotation on	0.3.0	A drag on an orthographic map spins the sphere instead of panning it	interaction: { rotate: { enabled: false } }

// 0.2.0
chart: { renderer: 'canvas', rendererThreshold: 20000 }

// 0.3.0: delete both options; SVG is the only renderer
chart: {}

No other option is renamed or removed.

Pattern and image fills

fill.pattern lays a texture over the color the scale already chose, so a map survives print and two classes of a diverging ramp stop reading as one to a reader with a color-vision deficiency.

series: [
  {
    type: 'choropleth',
    data,
    scale: { type: 'quantile', classes: 5 },
    fill: { pattern: { type: 'dots', size: 10 } },
  },
]

Eight tiles are built in (dots, squares, checks, lines, grid, diagonal, crosshatch and custom), and a callback can pick the tile per feature. fill.image clips a picture to each region's outline, with src as a function such as ({ key }) => ... for one image per feature. Try the pattern demo; Pattern & Image Fills covers every option.

Both fills are Premium, each gated on its own, and render with a watermark until a key is set. The accessibility layer and the okabeIto palette are in the Community license, which is free under $2M in annual revenue, budget or funding. See Licensing and pricing.

Flow: which way the traffic moves

An arc says two places are related, not which way anything moves. flow: true on an arc or line series sends beads along each route from from toward to:

{
  type: 'arc',
  data: ROUTES,
  geodesic: true,
  flow: true, // beads, from -> to
}

The beads cost nothing per frame, and panning does not disturb them. Flow adds no new gate: arc and line routes are already a Premium feature. Toggle beads and dashes in the arcs demo, and see Flow: beads that show direction for the options.

A globe you can spin

A drag on an orthographic projection used to pan it, which left the far hemisphere unreachable. Now it spins the sphere, and the camera turns it too.

new ApexMaps(el, {
  geo: { projection: 'orthographic' },
  interaction: { rotate: { enabled: 'auto', inertia: true } },
})

map.rotateTo([-77, 39])                     // absolute [lambda, phi], as a drag would
map.camera.flyTo({ center: [2.35, 48.85] }) // now turns the globe to Paris

The point under the cursor stays under it at any latitude, and a flyTo takes the short way round. Flat projections behave exactly as before. The camera demo flies a globe; see Rotating a globe.

Other changes and fixes

Also new:

• Zoom controls are real, focusable buttons that never land in an exported SVG; the + = - _ 0 keys zoom whether or not they render. See On-screen zoom controls.
• Drilldown (animate: 'zoom', still the default) divides the parent shape into its children instead of cutting. See the transition.
• Legends gain a side column (position: 'left' | 'right'), a hover marker on the gradient bar, and style: 'gradient' for classed scales. See Legends, Labels & Tooltips.

Fixed:

• geodesic: false draws a straight line; it was silently drawing the great circle.
• Legend swatches toggle arc, line, bubble and marker series, not only the choropleth.
• A marker legend toggle re-clusters, so a cluster count no longer includes hidden markers.
• Forced dark mode paints its own background, so text stays readable on a light page.
• A cluster count contrasts with its cluster's fill.
• An export keeps flow beads where the reader saw them.

The full list is in the 0.3.0 GitHub release.

Upgrading

npm install apexmaps@0.3.0

1. Delete chart.renderer and chart.rendererThreshold if you set them.
2. Check the two default changes against maps with zoom enabled or an orthographic projection.
3. Upgrade react-apexmaps, vue-apexmaps or ngx-apexmaps to 0.3.0 alongside the core.

Frequently asked questions