Export

ApexMaps can leave the page as a static file: a transparent SVG, or a PNG rasterized at 2x density against the page background. Export is a free Community feature; no license key is required.

Export SVG

map.exportSVG(options) downloads the current view as a standalone .svg file. It is vector and transparent by default.

map.exportSVG({ filename: 'sales-by-country' })

Export PNG

map.exportPNG(options) rasterizes the current view and downloads it as a .png. It returns a Promise because rasterizing goes through an offscreen <canvas>.

await map.exportPNG({ scale: 2, filename: 'sales-by-country' })

Embed instead of downloading

map.dataURI(options) resolves to { imgURI }, a PNG data URI you can assign directly to an <img src> instead of triggering a download:

const { imgURI } = await map.dataURI()
document.getElementById('preview').innerHTML = `<img alt="Map export preview" src="${imgURI}" />`

Get the raw SVG markup

map.getSvgString(options) returns the exported SVG as a string, synchronously, with no download:

const markup = map.getSvgString()

Options

Option	Applies to	Description
background	SVG and PNG	Painted behind the map. SVG defaults to none (transparent, matching the live chart); PNG defaults to the container's own background, falling back to white.
scale	PNG, dataURI	Pixel-density multiplier. Default 2, which survives print and retina displays.
filename	exportSVG, exportPNG	Without an extension. Defaults to the map id, or apexmaps.

What gets exported

The export is the current view, exactly as styled, not a reset to the initial fit: zoom and pan before exporting if that is the view you want. A dark-mode map exports dark, because computed styles, including CSS custom properties and dark-mode overrides, are inlined onto the exported markup rather than copied from a second stylesheet that could drift out of sync.

The legend and the tooltip are HTML rendered alongside the SVG plot, not inside it, so the export is the map plot itself. Fonts are referenced by name, not embedded; a viewer without the page's font falls back to its own default.

Full example

const map = new ApexMaps(document.getElementById('map'), {
  geo: { map: 'world/countries@110m' },
  series: [{ name: 'Index score', joinBy: 'name', data }],
})

await map.render()

document.getElementById('dl-svg').addEventListener('click', () => {
  map.exportSVG({ filename: 'apexmaps-demo' })
})

document.getElementById('dl-png').addEventListener('click', () => {
  map.exportPNG({ filename: 'apexmaps-demo' }).catch((error) => alert(error.message))
})

Server-side rendering

Export runs through a browser <canvas> and XMLSerializer, so it needs a rendered DOM map. There is no server-side entry point for producing an image without a browser, unlike ApexCharts' apexcharts/ssr.