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

// A raw count map mostly redraws population: the biggest countries look the
// darkest simply because more people live there. `normalizeBy` divides each
// value by another field on the same row, so the map shows the rate instead
// of the headcount, and the legend retitles itself to say so.
const data = [
  { code: 'CHN', value: 2824, population: 1412 },
  { code: 'IND', value: 1408, population: 1408 },
  { code: 'USA', value: 999, population: 333 },
  { code: 'BRA', value: 428, population: 214 },
  { code: 'RUS', value: 143, population: 143 },
  { code: 'JPN', value: 375, population: 125 },
  { code: 'DEU', value: 252, population: 84 },
  { code: 'FRA', value: 204, population: 68 },
  { code: 'GBR', value: 201, population: 67 },
  { code: 'ITA', value: 118, population: 59 },
  { code: 'CAN', value: 152, population: 38 },
  { code: 'AUS', value: 104, population: 26 },
]

const map = new ApexMaps(document.getElementById('map'), {
  chart: { height: 420 },
  geo: { map: 'world/countries@110m' },
  // Dev-mode diagnostics flag large un-normalised integers as a likely count map.
  debug: { enabled: true },
  series: [
    {
      name: 'Cases',
      // Join the geometry's `iso_a3` field to each row's `code`.
      joinBy: ['iso_a3', 'code'],
      data,
      scale: { palette: 'reds', classes: 5 },
      // Divide `value` by `population`; the legend becomes "Cases (per population)".
      normalizeBy: 'population',
    },
  ],
})

map.render()