{
  const sp  = encodeURIComponent(selected_species);
  const img = DOM.element("img");
  img.src = `data/species_figs/${sp}_polar.png`;
  img.style.cssText = "max-width:100%;max-height:100%;object-fit:contain;";
  img.onerror = () => {
    const msg = DOM.element("p");
    msg.textContent = "Polar figure not yet built \u2014 run the build step.";
    msg.style.cssText = "color:#999;font-size:12px;text-align:center;margin-top:2em;";
    img.replaceWith(msg);
  };
  return img;
}

species_range_map = {
  // Outer wrapper holds the fixed pixel height so that the CSS rule
  // ".leaflet-container { height: 100% }" resolves to 280px, not 0
  // (the OJS .observablehq parent has no explicit height).
  const outer = DOM.element("div");
  outer.style.cssText = "width:100%;height:280px;";
  const container = DOM.element("div");
  container.style.cssText = "width:100%;height:100%;";
  outer.appendChild(container);
  // Yield first so the wrapper is in the DOM before Leaflet initialises
  yield outer;

  // IUCN terms of use prohibit redistribution of reptile and amphibian range data.
  const RESTRICTED_ORDERS = new Set([
    "SQUAMATA","TESTUDINES","CROCODYLIA","RHYNCHOCEPHALIA", // reptiles
    "ANURA","CAUDATA","GYMNOPHIONA"                         // amphibians
  ]);
  const spMeta = transpose(species_meta_data).filter(row => row.Species === selected_species)[0];
  if (RESTRICTED_ORDERS.has(spMeta?.Order)) {
    const msg = DOM.element("p");
    msg.innerHTML = `Sorry, the IUCN data use agreement does not permit showing the range of this species &mdash; see <a href="https://www.iucnredlist.org/terms/terms-of-use" target="_blank" rel="noopener">IUCN terms of use (§ No Reposting or Redistribution)</a>.`;
    msg.style.cssText = "color:#666;font-size:13px;text-align:center;margin-top:3em;padding:0 1.5em;line-height:1.5;";
    container.appendChild(msg);
    return;
  }

  // Use the Leaflet already loaded by the R leaflet package (site_libs/leaflet-1.3.1).
  // Loading a separate CDN copy would overwrite window.L and break the Hotspot
  // Explorer's addProviderTiles call.
  const L = window.L;

  const sp = encodeURIComponent(selected_species);
  let mapData;
  try {
    const resp = await fetch(`data/species_maps/${sp}_map.json`);
    if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
    mapData = await resp.json();
  } catch(e) {
    const msg = DOM.element("p");
    msg.textContent = "Range map not yet built \u2014 run the build step.";
    msg.style.cssText = "color:#999;font-size:12px;text-align:center;margin-top:2em;";
    container.appendChild(msg);
    return;
  }

  const map = L.map(container, { preferCanvas: true });
  L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", {
    attribution: "\u00a9 OpenStreetMap, \u00a9 CARTO",
    maxZoom: 19
  }).addTo(map);

  const renderer = L.canvas({ padding: 0.5 });
  const bounds = [];

  // Colour: 1 variable = blue, 8 variables = red
  const varColor = (v) => {
    const t = Math.min((v - 1) / 7, 1);
    const r = Math.round(t * 215 + (1 - t) * 49);
    const g = Math.round((1 - t) * 115);
    const b = Math.round((1 - t) * 178 + t * 39);
    return `rgb(${r},${g},${b})`;
  };

  for (const [c, v] of mapData) {
    const col = (c - 1) % rast_ncols + 1;
    const row = Math.floor((c - 1) / rast_ncols) + 1;
    const lon = rast_xmin + (col - 0.5) * rast_xres;
    const lat = rast_ymax - (row - 0.5) * rast_yres;
    const half_x = rast_xres / 2;
    const half_y = rast_yres / 2;
    L.rectangle(
      [[lat - half_y, lon - half_x], [lat + half_y, lon + half_x]],
      { fillColor: varColor(v), color: "none", weight: 0, fillOpacity: 0.75, renderer }
    ).addTo(map);
    bounds.push([lat, lon]);
  }

  if (bounds.length)
    map.fitBounds(L.latLngBounds(bounds), { padding: [10, 10], maxZoom: 5 });

  // Add minimap using the same plugin bundled by the R leaflet package.
  if (!window.L?.Control?.MiniMap) {
    if (!document.querySelector('link[href*="Control.MiniMap"]')) {
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = 'site_libs/leaflet-minimap-3.3.1/Control.MiniMap.min.css';
      document.head.appendChild(link);
    }
    await new Promise((resolve, reject) => {
      const s = document.createElement('script');
      s.src = 'site_libs/leaflet-minimap-3.3.1/Control.MiniMap.min.js';
      s.onload = resolve; s.onerror = reject;
      document.head.appendChild(s);
    });
  }
  new L.Control.MiniMap(
    L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", { maxZoom: 19 }),
    { toggleDisplay: true, position: "topright", minimized: false }
  ).addTo(map);

  invalidation.then(() => map.remove());
}