// 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.

// Two maps of the same 51 keys. Both declare the same link.group, so a box drawn
// on one selects the matching features on the other and everything unselected
// dims on both. Shift-drag selects, Alt adds, Escape abandons, a box over
// nothing clears. A box tests each feature's label anchor, not its bounding box.

const states = [
  { key: 'CA', value: 82 }, { key: 'OR', value: 44 }, { key: 'WA', value: 61 },
  { key: 'NV', value: 29 }, { key: 'AZ', value: 53 }, { key: 'TX', value: 74 },
  { key: 'CO', value: 47 }, { key: 'NY', value: 88 }, { key: 'FL', value: 66 },
  { key: 'GA', value: 39 }, { key: 'IL', value: 58 }, { key: 'OH', value: 42 },
  { key: 'MA', value: 71 }, { key: 'PA', value: 50 }, { key: 'MI', value: 35 },
  { key: 'NC', value: 46 }, { key: 'VA', value: 63 }, { key: 'WI', value: 31 },
]

// Each map gets its own container, created here if the page has not already.
function slot(id) {
  let el = document.getElementById(id)
  if (!el) {
    el = document.createElement('div')
    el.id = id
    document.body.appendChild(el)
  }
  return el
}

const linked = (id, palette) =>
  new ApexMaps(slot(id), {
    chart: { height: 300 },
    geo: { map: 'us' },
    legend: { show: false },
    // Shift-drag draws a selection box; the anchor of each feature is tested.
    interaction: { selection: { multiple: true, rectangle: true, modifier: 'shift' } },
    // Unselected features step back rather than disappearing.
    states: { muted: { opacity: 0.25 } },
    // The same group name on both maps is what links their selections.
    link: { group: 'us-dashboard', filter: 'bidirectional' },
    series: [{ name: 'Value', joinBy: ['abbr', 'key'], data: states, scale: { palette } }],
  })

const a = linked('a', 'blues')
const b = linked('b', 'oranges')

// selectionChange fires on both maps with the selected ids and the source map.
a.on('selectionChange', ({ ids, source }) => {
  const from = source === a.getInstanceId() ? 'left' : 'right'
  console.log(ids.length ? `${ids.length} selected from the ${from} map` : 'nothing selected')
})

Promise.all([a.render(), b.render()])

// The same selection can be driven from code.
document.getElementById('west').addEventListener('click', () => {
  a.setSelection(['CA', 'OR', 'WA', 'NV', 'AZ'])
})
document.getElementById('clear').addEventListener('click', () => a.clearSelection())