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

// Line series. Unlike an arc, which derives the path between two points, a line
// draws the `path` vertices you supply, in order: a sea lane, a GPS trace, a
// pipeline. Segments still run through the projection, so a route crossing the
// antimeridian is cut at the map edge instead of streaking backwards.
const routes = [
  {
    name: 'Europe – East Asia (sea)',
    value: 100,
    path: [
      [-0.1, 51.5], // London
      [-9.5, 43.5], // off Finisterre
      [-5.6, 36.0], // Gibraltar
      [32.3, 31.3], // Port Said
      [43.5, 12.6], // Bab-el-Mandeb
      [80.3, 6.0], // south of Sri Lanka
      [103.8, 1.3], // Singapore
      [114.2, 22.3], // Hong Kong
      [121.5, 31.2], // Shanghai
    ],
  },
  {
    name: 'Transpacific (sea)',
    value: 78,
    path: [
      [139.7, 35.6], // Tokyo Bay
      [160.0, 43.0],
      [-170.0, 50.0], // crosses the antimeridian
      [-140.0, 45.0],
      [-122.4, 37.8], // San Francisco
    ],
  },
  {
    name: 'Cape route',
    value: 45,
    color: '#FEB019', // per-datum colour overrides the series colour
    path: [
      [-9.2, 38.7], // Lisbon
      [-17.0, 15.0],
      [18.4, -34.4], // Cape of Good Hope
      [40.0, -22.0],
      [55.3, -20.9], // Réunion
      [103.8, 1.3], // Singapore
    ],
  },
  {
    name: 'North Atlantic (sea)',
    value: 62,
    path: [
      [-1.4, 50.9], // Southampton
      [-30.0, 48.0],
      [-52.0, 44.0],
      [-74.0, 40.7], // New York
    ],
  },
]

const map = new ApexMaps(document.getElementById('map'), {
  chart: { height: 480 },
  geo: { map: 'world/countries@110m' },
  series: [
    {
      type: 'line',
      name: 'Trade routes',
      data: routes,
      // `value` drives line width through the same size-scale bubbles use.
      width: { range: [1, 5] },
      // A screen-space dot at each terminus that does not grow when you zoom.
      endpoints: { show: true, radius: 2.5 },
    },
  ],
})

map.render()