// CDN build: `ApexMaps` is a global (see index.html). With a bundler:
//   import ApexMaps from 'apexmaps'

// Export is the current view, exactly as styled: zoom or pan first and the file
// reflects that, not a reset view. exportSVG stays vector and transparent;
// exportPNG rasterizes at the given density against the page background.
// dataURI() hands back a data URI to embed instead of downloading, and
// getSvgString() returns the raw standalone SVG markup.

const data = [
  { name: 'United States of America', value: 63 },
  { name: 'Canada', value: 41 },
  { name: 'Brazil', value: 72 },
  { name: 'United Kingdom', value: 84 },
  { name: 'France', value: 77 },
  { name: 'Germany', value: 69 },
  { name: 'Nigeria', value: 55 },
  { name: 'India', value: 66 },
  { name: 'China', value: 71 },
  { name: 'Japan', value: 80 },
  { name: 'Australia', value: 59 },
  { name: 'Russia', value: 44 },
]

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

map.render()

// Vector download, transparent background.
document.getElementById('dl-svg').addEventListener('click', () => {
  map.exportSVG({ filename: 'apexmaps-demo' })
})
// Raster download; exportPNG resolves a promise once encoded.
document.getElementById('dl-png').addEventListener('click', () => {
  map.exportPNG({ filename: 'apexmaps-demo', scale: 2 }).catch((error) => alert(error.message))
})
// Embed the export instead of downloading it.
document.getElementById('show-uri').addEventListener('click', async () => {
  const { imgURI } = await map.dataURI()
  document.getElementById('preview').innerHTML = `<img alt="PNG export preview" src="${imgURI}" />`
})