WMS Canvas example for ALA occurrence map

ala_wms_canvas_example.js

async function generateStaticMapImage(speciesName) {
  const width = 800;
  const height = 700;
  const bbox = "112,-44,154,-9"; // Australia bounding box

  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');

  // 1. URLs
  const basemapUrl = `https://basemaps.cartocdn.com/gl/positron-nolabels/static/${bbox}/${width}x${height}.png`;
  const alaUrl = `https://biocache.ala.org.au/ws/ogc/wms/reflect?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&LAYERS=ALA:occurrences&STYLES=dots&FORMAT=image/png&TRANSPARENT=TRUE&SRS=EPSG:4326&BBOX=${bbox}&WIDTH=${width}&HEIGHT=${height}&q=raw_name:"${encodeURIComponent(speciesName)}"&colourby=0xFF0000`;

  // 2. Load Images
  const loadImage = src => new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = "Anonymous";
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = src;
  });

  const [basemap, alaOverlay] = await Promise.all([
    loadImage(basemapUrl),
    loadImage(alaUrl)
  ]);

  // 3. Draw on Canvas
  ctx.drawImage(basemap, 0, 0, width, height);
  ctx.drawImage(alaOverlay, 0, 0, width, height);

  // 4. Get Data URL / PNG Output
  return canvas.toDataURL('image/png');
}