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

// Proportional-symbol bubbles. Each row carries its own `lon`/`lat`, and the
// bubble's AREA (not its radius) scales with `value`, so a metro twice the size
// draws twice the ink. That is what `size.scale: 'sqrt'` buys you.
const metros = [
  { name: 'Tokyo', lon: 139.69, lat: 35.69, value: 37400068 },
  { name: 'Delhi', lon: 77.21, lat: 28.61, value: 28514000 },
  { name: 'Shanghai', lon: 121.47, lat: 31.23, value: 25582000 },
  { name: 'São Paulo', lon: -46.63, lat: -23.55, value: 21650000 },
  { name: 'Mexico City', lon: -99.13, lat: 19.43, value: 21581000 },
  { name: 'Cairo', lon: 31.24, lat: 30.04, value: 20076000 },
  { name: 'Mumbai', lon: 72.88, lat: 19.08, value: 19980000 },
  { name: 'Beijing', lon: 116.41, lat: 39.9, value: 19618000 },
  { name: 'New York', lon: -74.01, lat: 40.71, value: 18819000 },
  { name: 'Buenos Aires', lon: -58.38, lat: -34.6, value: 14967000 },
  { name: 'Lagos', lon: 3.38, lat: 6.52, value: 13904000 },
  { name: 'Moscow', lon: 37.62, lat: 55.75, value: 12410000 },
  { name: 'Paris', lon: 2.35, lat: 48.86, value: 10901000 },
  { name: 'London', lon: -0.13, lat: 51.51, value: 9046000 },
]

const map = new ApexMaps(document.getElementById('map'), {
  chart: { height: 520 },
  geo: {
    // Land, not countries: borders under a symbol map are texture the reader has
    // to look past to compare circles.
    map: 'world/land@110m',
    fill: '#e8ecf2',
    view: { fit: [-180, -58, 180, 84], padding: 14 },
    sphere: { show: true, fill: '#f7f9fc', stroke: 'transparent' },
  },
  series: [
    {
      type: 'bubble',
      name: 'Metro population',
      data: metros,
      // 'sqrt' scales area by value; 'linear' would scale the radius and overstate
      // every comparison. `range` is the min/max radius in pixels.
      size: { scale: 'sqrt', range: [4, 34] },
      color: '#d0303f',
      opacity: 0.62, // overlap has to stay readable
      stroke: { color: '#ffffff', width: 1 },
    },
  ],
  legend: { title: 'Metro population', align: 'start' },
  tooltip: {
    formatter: ({ name, value }) =>
      `<div style="font-weight:640;margin-bottom:2px">${name}</div>` +
      `<div style="font-weight:600">${value.toLocaleString()}</div>`,
  },
})

map.render()