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

// Premium feature: runs with a watermark until licensed. ApexMaps.setLicense(key) clears it.

// Annotations say why you published the map. Three anchoring modes, because
// there are three things authors point at: a coordinate (points), a feature by
// key (features), or an area (a bounding box). Anchors track the geography as
// you pan and zoom while the text keeps its size, and when a feature label would
// collide with an annotation the label yields, never the annotation.

const ANNOTATIONS = {
  points: [
    {
      at: [-77.04, -12.05],
      label: { text: 'Humboldt current\nupwelling', position: 'left' },
      marker: { shape: 'pin', size: 12 },
      connector: true,
    },
    {
      at: [139.7, 35.7],
      label: { text: 'Tokyo', background: 'none' },
      marker: { shape: 'circle', size: 7 },
    },
    {
      at: [31.24, 30.04],
      label: { text: 'Nile delta', position: 'right' },
      marker: { shape: 'diamond', size: 9 },
      connector: { dashArray: '2 2' },
    },
  ],
  features: [
    // The world pack keys on iso_a3, so a feature annotation names the alpha-3 code.
    {
      key: 'IND',
      label: { text: 'Fastest-growing\nof the ten largest', position: 'bottom' },
      outline: true,
    },
    {
      key: 'BRA',
      label: 'Amazon basin',
      outline: { color: '#00E396', width: 2, dashArray: '5 3' },
    },
  ],
  areas: [
    {
      bounds: [-20, 10, 40, 30], // [west, south, east, north]
      label: 'The Sahel',
      fill: '#FEB019',
      fillOpacity: 0.16,
      stroke: { color: '#FEB019', width: 1.5, dashArray: '4 3' },
    },
  ],
}

const data = [
  { name: 'Peru', value: 41 }, { name: 'Japan', value: 80 }, { name: 'Egypt', value: 48 },
  { name: 'India', value: 66 }, { name: 'Brazil', value: 72 }, { name: 'Chad', value: 22 },
  { name: 'Nigeria', value: 55 }, { name: 'France', value: 77 }, { name: 'China', value: 71 },
]

const map = new ApexMaps(document.getElementById('map'), {
  chart: { height: 520 },
  geo: { map: 'world/countries@110m' },
  dataLabels: { enabled: false, minFeatureArea: 400 },
  annotations: ANNOTATIONS,
  series: [
    { type: 'choropleth', name: 'Illustrative index', joinBy: 'name', data, scale: { palette: 'blues', classes: 5 } },
  ],
})

map.render()

// updateOptions swaps the annotations or the labels live; map.labels and
// map.annotations report how many of each survived collision resolution.
let labelsOn = false
document.getElementById('toggle-labels').addEventListener('click', async () => {
  labelsOn = !labelsOn
  await map.updateOptions({ dataLabels: { enabled: labelsOn } })
  console.log(`${map.labels.placedCount} labels placed, ${map.labels.droppedCount} dropped`)
})

let annotationsOn = true
document.getElementById('toggle-annotations').addEventListener('click', async () => {
  annotationsOn = !annotationsOn
  await map.updateOptions({
    annotations: annotationsOn ? ANNOTATIONS : { points: [], features: [], areas: [] },
  })
  console.log(`${map.annotations.count} annotation(s)`)
})