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

// A tile per region, where the colour still leads. The classes here are kinds,
// not amounts (continents), so texture is added to the encoding rather than
// replacing it. Colours are the first six of the built-in `okabeIto` palette,
// written out because a qualitative set must not be interpolated.
const CONTINENTS = [
  { name: 'North America', tile: 'dots', color: '#0072b2' },
  { name: 'South America', tile: 'lines', color: '#009e73', angle: 90 },
  { name: 'Europe', tile: 'diagonal', color: '#cc79a7' },
  { name: 'Africa', tile: 'dots', color: '#e69f00' },
  { name: 'Asia', tile: 'squares', color: '#56b4e9' },
  { name: 'Oceania', tile: 'lines', color: '#d55e00' },
]

// One row per continent, joined on Natural Earth's own `continent` property, so
// a single row colours every country in that continent.
const data = CONTINENTS.map((c, i) => ({ continent: c.name, value: i + 1 }))

const map = new ApexMaps(document.getElementById('map'), {
  chart: { height: 480 },
  geo: {
    map: 'world/countries@110m',
    projection: 'naturalEarth',
    view: { fit: [-180, -58, 180, 84] },
  },
  legend: {
    title: 'Continent',
    // The scale classes numbers; show the name each number stood for.
    formatter: (item, i) => CONTINENTS[i]?.name ?? item.label,
  },
  series: [
    {
      name: 'Continent',
      joinBy: { geo: 'continent', data: 'continent' },
      data,
      // No country borders: the unit is the continent, so the colour change is
      // the border where two meet.
      stroke: { width: 0 },
      scale: {
        // One class per continent, breaks between the integers so each lands in
        // its own. An explicit palette, because a qualitative set is not a ramp.
        type: 'threshold',
        breaks: [1.5, 2.5, 3.5, 4.5, 5.5],
        palette: CONTINENTS.map((c) => c.color),
      },
      // The pattern fill. `size` is the distance from one mark to the next; the
      // per-feature form receives { classIndex } and returns the tile for that
      // class. Tiles: dots, squares, checks, lines, grid, diagonal, crosshatch,
      // and custom with your own path.
      fill: {
        pattern: ({ classIndex }) => ({
          type: CONTINENTS[classIndex]?.tile ?? 'dots',
          angle: CONTINENTS[classIndex]?.angle,
          size: 10,
        }),
      },
    },
  ],
})
map.render()