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

// The same data, three ways of flattening the globe. A projection can be a
// plain name; switching it reprojects the geometry once and refits the view.
// Equal Earth is the default because Web Mercator overstates high-latitude
// area by an order of magnitude on a world thematic map.
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: 'Russia', value: 44 },
  { name: 'China', value: 71 },
  { name: 'India', value: 66 },
  { name: 'Australia', value: 59 },
]

// Render one map per projection so the distortions sit side by side.
const projections = ['equalEarth', 'mercator', 'orthographic']

projections.forEach((projection) => {
  const el = document.createElement('div')
  document.getElementById('map').appendChild(el)

  const map = new ApexMaps(el, {
    chart: { height: 320 },
    geo: {
      map: 'world/countries@110m',
      sphere: { show: true },
      // A projection is a name here. It can also be a spec object, e.g.
      // { name: 'conicEqualArea', rotate: [-100, 0], parallels: [50, 70] }
      projection,
      graticule: { show: true },
    },
    legend: { show: false },
    series: [{ name: 'Index score', joinBy: 'name', data, scale: { palette: 'viridis' } }],
  })

  map.render().then(() => {
    // On an orthographic, dragging turns the sphere instead of panning it.
    map.on('rotateEnd', ({ rotate }) => {
      console.log(`${map.viewport.projectionName} rotated to ${Math.round(rotate[0])}°`)
    })
  })
})