// 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 picture per region, clipped to its own outline. The feature's border does
// the clipping and the image is pinned to the ground, so it scales with the
// state as you zoom. Assign each region the scene it is known for.
const IMAGE_OF = {
  AZ: 'https://picsum.photos/seed/desert/300/200', // saguaro and mesa
  UT: 'https://picsum.photos/seed/desert/300/200',
  CO: 'https://picsum.photos/seed/peaks/300/200', // snow peaks
  MT: 'https://picsum.photos/seed/peaks/300/200',
  KS: 'https://picsum.photos/seed/plains/300/200', // wheat under a big sky
  NE: 'https://picsum.photos/seed/plains/300/200',
  OR: 'https://picsum.photos/seed/conifer/300/200', // conifers
  ME: 'https://picsum.photos/seed/conifer/300/200',
  LA: 'https://picsum.photos/seed/bayou/300/200', // cypress and still water
  NY: 'https://picsum.photos/seed/skyline/300/200', // a skyline
  FL: 'https://picsum.photos/seed/tropics/300/200', // palms
}

// One row per state, keyed so the fill's `src` callback can look up its picture.
const data = Object.keys(IMAGE_OF).map((key) => ({ key, value: 1 }))

const map = new ApexMaps(document.getElementById('map'), {
  chart: { height: 520 },
  geo: { map: 'us' },
  legend: { show: false },
  // A photograph is a busy backdrop, so the halo behind labels is real work here.
  dataLabels: {
    enabled: true,
    minFeatureArea: 700,
    style: { fontWeight: 700, halo: true, haloWidth: 3 },
  },
  series: [
    {
      name: 'Landscape',
      joinBy: { data: 'key' },
      data,
      stroke: { color: '#ffffff', width: 1 },
      scale: { palette: 'greys' },
      // The image fill. `src` runs once per feature: return a URL to give each
      // region its own picture, or null to decline (that feature keeps its flat
      // scale colour). `fit`: 'cover' crops to fill, 'contain' fits it all in,
      // 'fill' stretches. `background` shows under a 'contain' fit and while
      // loading.
      fill: {
        image: {
          src: ({ key }) => IMAGE_OF[key] ?? null,
          fit: 'cover',
          background: '#eef1f6',
        },
      },
    },
  ],
})
map.render()