@rcpch/imd-map 0.1.0

package/dist/index.esm.js

@@ -0,0 +1,1571 @@
+import { Map, AttributionControl, Popup, VectorTileSource, GeoJSONSource } from 'maplibre-gl';
+
+// src/core/createImdMap.ts
+
+// src/core/resolver.ts
+function resolveEffectiveEra(nation, requestedEra) {
+  switch (nation) {
+    case "all":
+      return "2011";
+    case "england":
+      return requestedEra;
+    case "wales":
+    case "scotland":
+    case "northern_ireland":
+      return "2011";
+    default:
+      return "2011";
+  }
+}
+function willEraBeOverridden(nation, requestedEra) {
+  return resolveEffectiveEra(nation, requestedEra) !== requestedEra;
+}
+var ZOOM_TIERS = [
+  { tier: "z0_4", minzoom: 0, maxzoom: 5 },
+  { tier: "z5_7", minzoom: 5, maxzoom: 8 },
+  { tier: "z8_10", minzoom: 8, maxzoom: 24 }
+];
+function resolveFullTableName(effectiveEra, tier) {
+  return `public.uk_master_${effectiveEra}_${tier}`;
+}
+function buildTileUrl(tilesBaseUrl, fullTableName) {
+  const base = tilesBaseUrl.replace(/\/$/, "");
+  return `${base}/${fullTableName}/{z}/{x}/{y}.pbf`;
+}
+function resolveNationFilter(nation) {
+  if (nation === "all") return null;
+  return ["==", ["get", "nation"], nation];
+}
+
+// src/core/state.ts
+function createInitialState(nation = "all", era = "2021") {
+  return {
+    nation,
+    era,
+    effectiveEra: resolveEffectiveEra(nation, era),
+    hasPatients: false,
+    hasLeadCentre: false,
+    overlays: {
+      localAuthority: false,
+      nhser: false,
+      icb: false,
+      lhb: false
+    }
+  };
+}
+function choroplethSourceId(tier) {
+  return `rcpch-imd-${tier}`;
+}
+ZOOM_TIERS.map((t) => choroplethSourceId(t.tier));
+var PATIENTS_SOURCE_ID = "rcpch-imd-patients";
+var LEAD_CENTRE_SOURCE_ID = "rcpch-imd-lead-centre";
+function addOrUpdateChoroplethSources(map, tilesBaseUrl, effectiveEra) {
+  for (const { tier } of ZOOM_TIERS) {
+    const sourceId = choroplethSourceId(tier);
+    const fullTableName = resolveFullTableName(effectiveEra, tier);
+    const tileUrl = buildTileUrl(tilesBaseUrl, fullTableName);
+    const existing = map.getSource(sourceId);
+    if (existing instanceof VectorTileSource) {
+      existing.setTiles([tileUrl]);
+    } else {
+      if (existing) map.removeSource(sourceId);
+      map.addSource(sourceId, {
+        type: "vector",
+        tiles: [tileUrl],
+        minzoom: 0,
+        maxzoom: 14
+      });
+    }
+  }
+}
+function addOrUpdatePatientsSource(map, features) {
+  const data = { type: "FeatureCollection", features };
+  const existing = map.getSource(PATIENTS_SOURCE_ID);
+  if (existing instanceof GeoJSONSource) {
+    existing.setData(data);
+  } else {
+    if (existing) map.removeSource(PATIENTS_SOURCE_ID);
+    map.addSource(PATIENTS_SOURCE_ID, { type: "geojson", data });
+  }
+}
+function addOrUpdateLeadCentreSource(map, feature) {
+  const data = {
+    type: "FeatureCollection",
+    features: feature ? [feature] : []
+  };
+  const existing = map.getSource(LEAD_CENTRE_SOURCE_ID);
+  if (existing instanceof GeoJSONSource) {
+    existing.setData(data);
+  } else {
+    if (existing) map.removeSource(LEAD_CENTRE_SOURCE_ID);
+    map.addSource(LEAD_CENTRE_SOURCE_ID, { type: "geojson", data });
+  }
+}
+
+// src/map/styles.ts
+var RCPCH_DARK_BLUE = "#0d0d58";
+var RCPCH_PINK = "#e00087";
+var RCPCH_LIGHT_BLUE = "#41b6e6";
+var RCPCH_CHARCOAL = "#3d3d3d";
+var DEFAULT_BASE_COLORS_BY_NATION = {
+  england: "#d7191c",
+  wales: "#1a9641",
+  scotland: "#2b83ba",
+  northern_ireland: "#7f7f7f",
+  all: "#d7191c"
+};
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function normalizeHex(hex) {
+  const clean = hex.trim();
+  if (/^#[0-9a-fA-F]{6}$/.test(clean)) return clean;
+  if (/^#[0-9a-fA-F]{3}$/.test(clean)) {
+    const r = clean[1];
+    const g = clean[2];
+    const b = clean[3];
+    return `#${r}${r}${g}${g}${b}${b}`;
+  }
+  return null;
+}
+function hexToRgb(hex) {
+  const normalized = normalizeHex(hex);
+  if (!normalized) return null;
+  const value = parseInt(normalized.slice(1), 16);
+  return {
+    r: value >> 16 & 255,
+    g: value >> 8 & 255,
+    b: value & 255
+  };
+}
+function rgbToHex(r, g, b) {
+  const rr = clamp(Math.round(r), 0, 255).toString(16).padStart(2, "0");
+  const gg = clamp(Math.round(g), 0, 255).toString(16).padStart(2, "0");
+  const bb = clamp(Math.round(b), 0, 255).toString(16).padStart(2, "0");
+  return `#${rr}${gg}${bb}`;
+}
+function rgbToHsl(r, g, b) {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  let h = 0;
+  const l = (max + min) / 2;
+  const d = max - min;
+  if (d !== 0) {
+    switch (max) {
+      case rn:
+        h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6;
+        break;
+      case gn:
+        h = ((bn - rn) / d + 2) / 6;
+        break;
+      default:
+        h = ((rn - gn) / d + 4) / 6;
+        break;
+    }
+  }
+  const s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1));
+  return { h, s, l };
+}
+function hslToRgb(h, s, l) {
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const hp = h * 6;
+  const x = c * (1 - Math.abs(hp % 2 - 1));
+  let r1 = 0;
+  let g1 = 0;
+  let b1 = 0;
+  if (hp >= 0 && hp < 1) {
+    r1 = c;
+    g1 = x;
+    b1 = 0;
+  } else if (hp < 2) {
+    r1 = x;
+    g1 = c;
+    b1 = 0;
+  } else if (hp < 3) {
+    r1 = 0;
+    g1 = c;
+    b1 = x;
+  } else if (hp < 4) {
+    r1 = 0;
+    g1 = x;
+    b1 = c;
+  } else if (hp < 5) {
+    r1 = x;
+    g1 = 0;
+    b1 = c;
+  } else {
+    r1 = c;
+    g1 = 0;
+    b1 = x;
+  }
+  const m = l - c / 2;
+  return {
+    r: (r1 + m) * 255,
+    g: (g1 + m) * 255,
+    b: (b1 + m) * 255
+  };
+}
+function generateDecileRampFromBaseColor(baseHex) {
+  const rgb = hexToRgb(baseHex);
+  if (!rgb) return Array(10).fill("#cccccc");
+  const { h, s, l } = rgbToHsl(rgb.r, rgb.g, rgb.b);
+  const steps = 10;
+  const spread = 0.34;
+  const half = (steps - 1) / 2;
+  return Array.from({ length: steps }, (_, i) => {
+    const normalized = (i - half) / half;
+    const li = clamp(l + normalized * spread, 0.08, 0.92);
+    const { r, g, b } = hslToRgb(h, s, li);
+    return rgbToHex(r, g, b);
+  });
+}
+var DEFAULT_STYLE = {
+  choropleth: {
+    decileColorsByNation: {},
+    baseColorByNation: {
+      england: DEFAULT_BASE_COLORS_BY_NATION.england,
+      wales: DEFAULT_BASE_COLORS_BY_NATION.wales,
+      scotland: DEFAULT_BASE_COLORS_BY_NATION.scotland,
+      northern_ireland: DEFAULT_BASE_COLORS_BY_NATION.northern_ireland
+    },
+    fallbackDecileColors: generateDecileRampFromBaseColor(DEFAULT_BASE_COLORS_BY_NATION.england),
+    fillOpacity: 0.7,
+    borderColor: "#ffffff",
+    borderWidth: 0.5,
+    hoverBorderColor: RCPCH_DARK_BLUE,
+    hoverBorderWidth: 2
+  },
+  boundaries: {
+    localAuthorityColor: RCPCH_DARK_BLUE,
+    localAuthorityWidth: 1,
+    nhserColor: RCPCH_PINK,
+    nhserWidth: 1.5,
+    icbColor: RCPCH_CHARCOAL,
+    icbWidth: 1,
+    lhbColor: RCPCH_LIGHT_BLUE,
+    lhbWidth: 1
+  },
+  patients: {
+    circleColor: RCPCH_DARK_BLUE,
+    circleRadius: 5,
+    circleStrokeColor: "#ffffff",
+    circleStrokeWidth: 1,
+    circleOpacity: 0.8,
+    colorByGroup: {}
+  },
+  leadCentre: {
+    color: RCPCH_PINK,
+    radius: 10,
+    strokeColor: "#ffffff",
+    strokeWidth: 2
+  },
+  tooltip: {
+    backgroundColor: RCPCH_DARK_BLUE,
+    textColor: "#ffffff",
+    borderColor: RCPCH_DARK_BLUE,
+    borderRadius: 4,
+    areaLabel: "Area",
+    decileLabel: "IMD decile",
+    nationLabel: "Nation",
+    patientLabel: "Patient",
+    leadCentreLabel: "Lead centre",
+    patientTooltipText: "{{patientLabel}}",
+    leadCentreTooltipText: "{{leadCentreLabel}}: {{label}}"
+  },
+  legend: {
+    backgroundColor: "#ffffff",
+    textColor: RCPCH_DARK_BLUE,
+    borderColor: "#d8dde6",
+    borderRadius: 8,
+    fontSize: 13,
+    fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif",
+    width: 220,
+    boxShadow: "0 6px 18px rgba(0, 0, 0, 0.12)",
+    toggleOnColor: RCPCH_DARK_BLUE,
+    toggleOffColor: "#6b7280"
+  }
+};
+function mergeStyle(defaults, overrides) {
+  if (!overrides) return defaults;
+  return {
+    choropleth: { ...defaults.choropleth, ...overrides.choropleth },
+    boundaries: { ...defaults.boundaries, ...overrides.boundaries },
+    patients: { ...defaults.patients, ...overrides.patients },
+    leadCentre: { ...defaults.leadCentre, ...overrides.leadCentre },
+    tooltip: { ...defaults.tooltip, ...overrides.tooltip },
+    legend: { ...defaults.legend, ...overrides.legend }
+  };
+}
+function getDecileColors(nation, style) {
+  const byNation = style.choropleth.decileColorsByNation ?? {};
+  const fromExplicitRamp = byNation[nation];
+  if (fromExplicitRamp && fromExplicitRamp.length === 10) return fromExplicitRamp;
+  const baseByNation = style.choropleth.baseColorByNation ?? {};
+  const configuredBase = baseByNation[nation];
+  if (configuredBase) return generateDecileRampFromBaseColor(configuredBase);
+  const defaultBase = DEFAULT_BASE_COLORS_BY_NATION[nation] ?? DEFAULT_BASE_COLORS_BY_NATION.england;
+  return generateDecileRampFromBaseColor(defaultBase) ?? style.choropleth.fallbackDecileColors ?? generateDecileRampFromBaseColor(DEFAULT_BASE_COLORS_BY_NATION.england);
+}
+
+// src/map/layers.ts
+function choroplethFillLayerId(tier) {
+  return `rcpch-imd-fill-${tier}`;
+}
+function choroplethLineLayerId(tier) {
+  return `rcpch-imd-line-${tier}`;
+}
+var ALL_CHOROPLETH_LAYER_IDS = ZOOM_TIERS.flatMap((t) => [
+  choroplethFillLayerId(t.tier),
+  choroplethLineLayerId(t.tier)
+]);
+var PATIENTS_LAYER_ID = "rcpch-imd-patients";
+var LEAD_CENTRE_LAYER_ID = "rcpch-imd-lead-centre";
+function buildDecileColorExpression(colors) {
+  const fallback = colors[0] ?? "#cccccc";
+  return [
+    "step",
+    ["get", "imd_decile"],
+    fallback,
+    2,
+    colors[1] ?? fallback,
+    3,
+    colors[2] ?? fallback,
+    4,
+    colors[3] ?? fallback,
+    5,
+    colors[4] ?? fallback,
+    6,
+    colors[5] ?? fallback,
+    7,
+    colors[6] ?? fallback,
+    8,
+    colors[7] ?? fallback,
+    9,
+    colors[8] ?? fallback,
+    10,
+    colors[9] ?? fallback
+  ];
+}
+function buildColorExpression(nation, style) {
+  if (nation !== "all") {
+    return buildDecileColorExpression(getDecileColors(nation, style));
+  }
+  const perNation = ["england", "wales", "scotland", "northern_ireland"].flatMap((n) => [n, buildDecileColorExpression(getDecileColors(n, style))]);
+  return [
+    "match",
+    ["get", "nation"],
+    ...perNation,
+    // fallback for any unrecognised nation value
+    getDecileColors("england", style)[0] ?? "#cccccc"
+  ];
+}
+function firstSymbolLayerId(map) {
+  for (const layer of map.getStyle().layers ?? []) {
+    if (layer.type === "symbol") return layer.id;
+  }
+  return void 0;
+}
+function buildPatientCircleColorExpression(style) {
+  const fallback = style.patients.circleColor ?? "#0d0d58";
+  const groupMap = style.patients.colorByGroup ?? {};
+  const entries = Object.entries(groupMap).filter(([k, v]) => k && v);
+  if (!entries.length) return fallback;
+  return [
+    "match",
+    ["coalesce", ["to-string", ["get", "group"]], ""],
+    ...entries.flatMap(([group, color]) => [group, color]),
+    fallback
+  ];
+}
+function addChoroplethLayers(map, nation, effectiveEra, style) {
+  removeChoroplethLayers(map);
+  const nationFilter = resolveNationFilter(nation);
+  const filterProps = nationFilter ? { filter: nationFilter } : {};
+  const before = firstSymbolLayerId(map);
+  for (const { tier, minzoom, maxzoom } of ZOOM_TIERS) {
+    const sourceId = choroplethSourceId(tier);
+    const sourceLayer = resolveFullTableName(effectiveEra, tier);
+    const colorExpr = buildColorExpression(nation, style);
+    map.addLayer(
+      {
+        id: choroplethFillLayerId(tier),
+        type: "fill",
+        source: sourceId,
+        "source-layer": sourceLayer,
+        minzoom,
+        maxzoom,
+        ...filterProps,
+        paint: {
+          "fill-color": colorExpr,
+          "fill-opacity": style.choropleth.fillOpacity ?? 0.7
+        }
+      },
+      before
+    );
+    map.addLayer(
+      {
+        id: choroplethLineLayerId(tier),
+        type: "line",
+        source: sourceId,
+        "source-layer": sourceLayer,
+        minzoom,
+        maxzoom,
+        ...filterProps,
+        paint: {
+          "line-color": style.choropleth.borderColor ?? "#ffffff",
+          "line-width": style.choropleth.borderWidth ?? 0.5
+        }
+      },
+      before
+    );
+  }
+}
+function removeChoroplethLayers(map) {
+  for (const id of ALL_CHOROPLETH_LAYER_IDS) {
+    if (map.getLayer(id)) map.removeLayer(id);
+  }
+}
+function updateChoroplethStyle(map, nation, style) {
+  const colorExpr = buildColorExpression(nation, style);
+  for (const { tier } of ZOOM_TIERS) {
+    const fillId = choroplethFillLayerId(tier);
+    const lineId = choroplethLineLayerId(tier);
+    if (!map.getLayer(fillId)) continue;
+    map.setPaintProperty(fillId, "fill-color", colorExpr);
+    map.setPaintProperty(fillId, "fill-opacity", style.choropleth.fillOpacity ?? 0.7);
+    map.setPaintProperty(lineId, "line-color", style.choropleth.borderColor ?? "#ffffff");
+    map.setPaintProperty(lineId, "line-width", style.choropleth.borderWidth ?? 0.5);
+  }
+}
+function updateChoroplethNationFilter(map, nation, effectiveEra) {
+  const nationFilter = resolveNationFilter(nation);
+  for (const { tier } of ZOOM_TIERS) {
+    const fillId = choroplethFillLayerId(tier);
+    const lineId = choroplethLineLayerId(tier);
+    if (!map.getLayer(fillId)) continue;
+    map.setFilter(fillId, nationFilter);
+    map.setFilter(lineId, nationFilter);
+  }
+}
+function addOrUpdatePatientsLayer(map, style) {
+  const p = style.patients;
+  const color = buildPatientCircleColorExpression(style);
+  if (map.getLayer(PATIENTS_LAYER_ID)) {
+    map.setPaintProperty(PATIENTS_LAYER_ID, "circle-color", color);
+    map.setPaintProperty(PATIENTS_LAYER_ID, "circle-radius", p.circleRadius ?? 5);
+    map.setPaintProperty(PATIENTS_LAYER_ID, "circle-stroke-color", p.circleStrokeColor ?? "#ffffff");
+    map.setPaintProperty(PATIENTS_LAYER_ID, "circle-stroke-width", p.circleStrokeWidth ?? 1);
+    map.setPaintProperty(PATIENTS_LAYER_ID, "circle-opacity", p.circleOpacity ?? 0.8);
+  } else {
+    map.addLayer({
+      id: PATIENTS_LAYER_ID,
+      type: "circle",
+      source: PATIENTS_SOURCE_ID,
+      paint: {
+        "circle-color": color,
+        "circle-radius": p.circleRadius ?? 5,
+        "circle-stroke-color": p.circleStrokeColor ?? "#ffffff",
+        "circle-stroke-width": p.circleStrokeWidth ?? 1,
+        "circle-opacity": p.circleOpacity ?? 0.8
+      }
+    });
+  }
+}
+function removePatientsLayer(map) {
+  if (map.getLayer(PATIENTS_LAYER_ID)) map.removeLayer(PATIENTS_LAYER_ID);
+}
+function addOrUpdateLeadCentreLayer(map, style) {
+  const lc = style.leadCentre;
+  if (map.getLayer(LEAD_CENTRE_LAYER_ID)) {
+    map.setPaintProperty(LEAD_CENTRE_LAYER_ID, "circle-color", lc.color ?? "#e00087");
+    map.setPaintProperty(LEAD_CENTRE_LAYER_ID, "circle-radius", lc.radius ?? 10);
+    map.setPaintProperty(LEAD_CENTRE_LAYER_ID, "circle-stroke-color", lc.strokeColor ?? "#ffffff");
+    map.setPaintProperty(LEAD_CENTRE_LAYER_ID, "circle-stroke-width", lc.strokeWidth ?? 2);
+  } else {
+    map.addLayer({
+      id: LEAD_CENTRE_LAYER_ID,
+      type: "circle",
+      source: LEAD_CENTRE_SOURCE_ID,
+      paint: {
+        "circle-color": lc.color ?? "#e00087",
+        "circle-radius": lc.radius ?? 10,
+        "circle-stroke-color": lc.strokeColor ?? "#ffffff",
+        "circle-stroke-width": lc.strokeWidth ?? 2
+      }
+    });
+  }
+}
+function removeLeadCentreLayer(map) {
+  if (map.getLayer(LEAD_CENTRE_LAYER_ID)) map.removeLayer(LEAD_CENTRE_LAYER_ID);
+}
+
+// src/utils/properties.ts
+var KEY_ALIASES = {
+  // Canonical: 'code' (uk_master_*). Also accept lsoa_code for lsoa_tiles_* family.
+  code: ["code", "lsoa_code", "LSOA11CD", "lsoa11cd", "LSOA21CD", "lsoa21cd"],
+  // Canonical: 'area_name' for both table families.
+  area_name: ["area_name", "LSOA11NM", "lsoa11nm", "LSOA21NM", "lsoa21nm", "name"],
+  imd_decile: ["imd_decile", "IMD_Decile", "IMDDecile", "decile", "imd_rank_decile"],
+  imd_rank: ["imd_rank", "IMD_Rank", "rank"],
+  imd_year: ["imd_year", "IMD_Year"],
+  nation: ["nation", "Nation", "country", "Country"],
+  year: ["year", "Year"],
+  // Health / administrative boundary codes
+  la_code: ["la_code", "LAD_code", "lad_code"],
+  la_name: ["la_name", "LAD_name", "lad_name"],
+  nhser_code: ["nhser_code", "NHSER_code"],
+  nhser_name: ["nhser_name", "NHSER_name"],
+  icb_code: ["icb_code", "ICB_code"],
+  icb_name: ["icb_name", "ICB_name"],
+  lhb_code: ["lhb_code", "LHB_code"],
+  lhb_name: ["lhb_name", "LHB_name"]
+};
+function getFeatureProperty(properties, canonicalKey) {
+  if (!properties) return void 0;
+  if (canonicalKey in properties) return properties[canonicalKey];
+  const aliases = KEY_ALIASES[canonicalKey];
+  if (aliases) {
+    for (const alias of aliases) {
+      if (alias in properties) return properties[alias];
+    }
+  }
+  const lowerKey = canonicalKey.toLowerCase();
+  for (const [k, v] of Object.entries(properties)) {
+    if (k.toLowerCase() === lowerKey) return v;
+  }
+  return void 0;
+}
+
+// src/map/popups.ts
+function interpolateTemplate(template, tokens) {
+  return template.replace(/{{\s*([a-zA-Z0-9_]+)\s*}}/g, (_, key) => {
+    const value = tokens[key];
+    return value === null || value === void 0 ? "" : String(value);
+  });
+}
+function buildChoroplethTooltipHtml(properties, style) {
+  const t = style.tooltip;
+  const areaName = getFeatureProperty(properties, "area_name") ?? "Unknown area";
+  const decile = getFeatureProperty(properties, "imd_decile") ?? "\u2013";
+  const nation = getFeatureProperty(properties, "nation") ?? "\u2013";
+  const areaYear = getFeatureProperty(properties, "year") ?? "\u2013";
+  const imdYear = getFeatureProperty(properties, "imd_year") ?? "\u2013";
+  const bg = t.backgroundColor ?? "#0d0d58";
+  const color = t.textColor ?? "#ffffff";
+  const radius = t.borderRadius ?? 4;
+  return `<div style="background:${bg};color:${color};padding:8px 12px;border-radius:${radius}px;font-size:13px;line-height:1.6;font-family:sans-serif;">
+  <strong style="display:block;margin-bottom:2px;">${String(areaName)}</strong>
+  <span>LSOA year: ${String(areaYear)}</span><br/>
+  <span>${t.decileLabel ?? "IMD decile"}: <strong>${String(decile)}</strong></span><br/>
+  <span>IMD year: ${String(imdYear)}</span><br/>
+  <span>${t.nationLabel ?? "Nation"}: ${String(nation)}</span>
+</div>`;
+}
+function buildPatientTooltipHtml(properties, style) {
+  const t = style.tooltip;
+  const id = getFeatureProperty(properties, "id") ?? "";
+  const group = getFeatureProperty(properties, "group") ?? "";
+  const bg = t.backgroundColor ?? "#0d0d58";
+  const color = t.textColor ?? "#ffffff";
+  const radius = t.borderRadius ?? 4;
+  const patientLabel = t.patientLabel ?? "Patient";
+  const template = t.patientTooltipText ?? "{{patientLabel}}";
+  const tokens = {
+    // Spread all feature properties first so named tokens (id, group, etc.)
+    // override any same-named extra field, and extra fields like nhs_number
+    // are available as {{nhs_number}} etc.
+    ...properties ?? {},
+    patientLabel,
+    id,
+    group
+  };
+  const text = interpolateTemplate(template, tokens);
+  return `<div style="background:${bg};color:${color};padding:8px 12px;border-radius:${radius}px;font-size:13px;line-height:1.6;font-family:sans-serif;">
+  <span>${text}</span>
+</div>`;
+}
+function buildLeadCentreTooltipHtml(properties, style) {
+  const t = style.tooltip;
+  const label = getFeatureProperty(properties, "label") ?? "Lead centre";
+  const bg = t.backgroundColor ?? "#0d0d58";
+  const color = t.textColor ?? "#ffffff";
+  const radius = t.borderRadius ?? 4;
+  const leadCentreLabel = t.leadCentreLabel ?? "Lead centre";
+  const text = interpolateTemplate(t.leadCentreTooltipText ?? "{{leadCentreLabel}}: {{label}}", {
+    leadCentreLabel,
+    label
+  });
+  return `<div style="background:${bg};color:${color};padding:8px 12px;border-radius:${radius}px;font-size:13px;line-height:1.6;font-family:sans-serif;">
+  <span>${text}</span>
+</div>`;
+}
+function featureToPayload(feature) {
+  const props = feature.properties ?? {};
+  const decileRaw = getFeatureProperty(props, "imd_decile");
+  return {
+    lsoaCode: String(getFeatureProperty(props, "code") ?? ""),
+    lsoaName: String(getFeatureProperty(props, "area_name") ?? ""),
+    imdDecile: typeof decileRaw === "number" ? decileRaw : void 0,
+    nation: String(getFeatureProperty(props, "nation") ?? ""),
+    rawProperties: props
+  };
+}
+function attachChoroplethInteraction(map, popup, style, options) {
+  const fillLayers = ALL_CHOROPLETH_LAYER_IDS.filter((id) => id.startsWith("rcpch-imd-fill-"));
+  for (const layerId of fillLayers) {
+    map.on("mousemove", layerId, (e) => {
+      const features = map.queryRenderedFeatures(e.point, { layers: [layerId] });
+      if (!features.length) return;
+      map.getCanvas().style.cursor = "pointer";
+      const feature = features[0];
+      popup.setLngLat(e.lngLat).setHTML(buildChoroplethTooltipHtml(feature.properties, style)).addTo(map);
+      options.onAreaHover?.(featureToPayload(feature));
+    });
+    map.on("mouseleave", layerId, () => {
+      map.getCanvas().style.cursor = "";
+      popup.remove();
+    });
+    map.on("click", layerId, (e) => {
+      const features = map.queryRenderedFeatures(e.point, { layers: [layerId] });
+      if (!features.length) return;
+      options.onAreaClick?.(featureToPayload(features[0]));
+    });
+  }
+}
+function attachPatientInteraction(map, popup, style) {
+  map.on("mousemove", PATIENTS_LAYER_ID, (e) => {
+    const features = map.queryRenderedFeatures(e.point, { layers: [PATIENTS_LAYER_ID] });
+    if (!features.length) return;
+    const feature = features[0];
+    map.getCanvas().style.cursor = "pointer";
+    popup.setLngLat(e.lngLat).setHTML(buildPatientTooltipHtml(feature.properties, style)).addTo(map);
+  });
+  map.on("mouseleave", PATIENTS_LAYER_ID, () => {
+    map.getCanvas().style.cursor = "";
+    popup.remove();
+  });
+}
+function attachLeadCentreInteraction(map, popup, style) {
+  map.on("mousemove", LEAD_CENTRE_LAYER_ID, (e) => {
+    const features = map.queryRenderedFeatures(e.point, { layers: [LEAD_CENTRE_LAYER_ID] });
+    if (!features.length) return;
+    const feature = features[0];
+    map.getCanvas().style.cursor = "pointer";
+    popup.setLngLat(e.lngLat).setHTML(buildLeadCentreTooltipHtml(feature.properties, style)).addTo(map);
+  });
+  map.on("mouseleave", LEAD_CENTRE_LAYER_ID, () => {
+    map.getCanvas().style.cursor = "";
+    popup.remove();
+  });
+}
+
+// src/utils/validation.ts
+function validateLatLon(lat, lon) {
+  const errors = [];
+  if (typeof lat !== "number" || isNaN(lat) || lat < -90 || lat > 90) {
+    errors.push(`Invalid latitude: ${String(lat)}. Must be a number between -90 and 90.`);
+  }
+  if (typeof lon !== "number" || isNaN(lon) || lon < -180 || lon > 180) {
+    errors.push(`Invalid longitude: ${String(lon)}. Must be a number between -180 and 180.`);
+  }
+  return { valid: errors.length === 0, errors };
+}
+var UK_BOUNDS = { minLat: 49.5, maxLat: 61.5, minLon: -8.7, maxLon: 2.1 };
+function isWithinUK(lat, lon) {
+  return lat >= UK_BOUNDS.minLat && lat <= UK_BOUNDS.maxLat && lon >= UK_BOUNDS.minLon && lon <= UK_BOUNDS.maxLon;
+}
+function validatePatientPoint(record) {
+  if (!record || typeof record !== "object") {
+    return { point: null, errors: ["Record is not an object."] };
+  }
+  const r = record;
+  const lat = r.lat ?? r.latitude ?? r.LAT;
+  const lon = r.lon ?? r.lng ?? r.longitude ?? r.LON;
+  const { valid, errors } = validateLatLon(lat, lon);
+  if (!valid) return { point: null, errors };
+  if (!isWithinUK(lat, lon)) {
+    const msg = `Point (${String(lat)}, ${String(lon)}) is outside UK bounds and will be skipped.`;
+    return { point: null, errors: [msg] };
+  }
+  const reservedKeys = /* @__PURE__ */ new Set(["lat", "lon", "id", "weight", "group", "latitude", "longitude", "lng", "LAT", "LON"]);
+  const point = {
+    lat,
+    lon,
+    id: r.id !== void 0 ? String(r.id) : void 0,
+    weight: typeof r.weight === "number" ? r.weight : void 0,
+    group: typeof r.group === "string" ? r.group : void 0,
+    properties: Object.fromEntries(
+      Object.entries(r).filter(([k]) => !reservedKeys.has(k))
+    )
+  };
+  return { point, errors: [] };
+}
+
+// src/adapters/patientInput.ts
+function isGeoJsonFeatureCollection(data) {
+  return typeof data === "object" && data !== null && data.type === "FeatureCollection" && Array.isArray(data.features);
+}
+function isGeoJsonFeature(data) {
+  return typeof data === "object" && data !== null && data.type === "Feature";
+}
+function normalizePatientInput(data, options) {
+  const features = [];
+  const warnings = [];
+  const strict = options?.strict === true;
+  let records;
+  if (isGeoJsonFeatureCollection(data)) {
+    records = data.features.map((f) => ({
+      lat: f.geometry.coordinates[1],
+      lon: f.geometry.coordinates[0],
+      ...f.properties
+    }));
+  } else if (Array.isArray(data)) {
+    records = data.map(
+      (item) => isGeoJsonFeature(item) ? { lat: item.geometry.coordinates[1], lon: item.geometry.coordinates[0], ...item.properties } : item
+    );
+  } else {
+    if (strict) {
+      throw new Error("[rcpch-imd-map] PatientInput must be an array or GeoJSON FeatureCollection.");
+    }
+    warnings.push({ code: "INVALID_INPUT", message: "PatientInput must be an array or GeoJSON FeatureCollection." });
+    return { features, warnings };
+  }
+  for (let i = 0; i < records.length; i++) {
+    const { point, errors } = validatePatientPoint(records[i]);
+    if (!point) {
+      if (strict) {
+        throw new Error(
+          `[rcpch-imd-map] Patient record at index ${i} is invalid: ${errors.join("; ")}`
+        );
+      }
+      warnings.push({
+        code: "INVALID_PATIENT_POINT",
+        message: `Patient record at index ${i} is invalid and will be skipped: ${errors.join("; ")}`,
+        details: { index: i, errors }
+      });
+      continue;
+    }
+    for (const err of errors) {
+      warnings.push({ code: "PATIENT_POINT_WARNING", message: err, details: { index: i } });
+    }
+    features.push({
+      type: "Feature",
+      geometry: { type: "Point", coordinates: [point.lon, point.lat] },
+      properties: {
+        id: point.id ?? `patient-${i}`,
+        weight: point.weight ?? 1,
+        group: point.group ?? null,
+        ...point.properties
+      }
+    });
+  }
+  return { features, warnings };
+}
+
+// src/overlays/leadCentre.ts
+function normalizeLeadCentreInput(data) {
+  if (!data || typeof data !== "object") return null;
+  let lat;
+  let lon;
+  let label = "Lead centre";
+  if (data.type === "Feature" && data.geometry?.type === "Point") {
+    [lon, lat] = data.geometry.coordinates;
+    label = data.properties?.label ?? label;
+  } else {
+    const d = data;
+    lat = d.lat ?? d.latitude;
+    lon = d.lon ?? d.lng ?? d.longitude;
+    label = d.label ?? label;
+  }
+  const { valid } = validateLatLon(lat, lon);
+  if (!valid) return null;
+  return {
+    type: "Feature",
+    geometry: { type: "Point", coordinates: [lon, lat] },
+    properties: { label }
+  };
+}
+var LOCAL_AUTHORITY_SOURCE_ID = "rcpch-imd-la-overlay";
+var LOCAL_AUTHORITY_LAYER_ID = "rcpch-imd-la-overlay-line";
+var LOCAL_AUTHORITY_FULL_TABLE_NAME = "public.la_tiles";
+var LOCAL_AUTHORITY_SOURCE_LAYER = "public.la_tiles";
+function addOrUpdateLocalAuthorityOverlay(map, tilesBaseUrl, style) {
+  const tileUrl = buildTileUrl(tilesBaseUrl, LOCAL_AUTHORITY_FULL_TABLE_NAME);
+  const existing = map.getSource(LOCAL_AUTHORITY_SOURCE_ID);
+  if (existing instanceof VectorTileSource) {
+    existing.setTiles([tileUrl]);
+  } else {
+    if (existing) map.removeSource(LOCAL_AUTHORITY_SOURCE_ID);
+    map.addSource(LOCAL_AUTHORITY_SOURCE_ID, {
+      type: "vector",
+      tiles: [tileUrl],
+      minzoom: 0,
+      maxzoom: 14
+    });
+  }
+  if (map.getLayer(LOCAL_AUTHORITY_LAYER_ID)) {
+    map.setPaintProperty(
+      LOCAL_AUTHORITY_LAYER_ID,
+      "line-color",
+      style.boundaries.localAuthorityColor ?? "#0d0d58"
+    );
+    map.setPaintProperty(
+      LOCAL_AUTHORITY_LAYER_ID,
+      "line-width",
+      style.boundaries.localAuthorityWidth ?? 1
+    );
+    map.setLayoutProperty(LOCAL_AUTHORITY_LAYER_ID, "visibility", "visible");
+    return;
+  }
+  map.addLayer({
+    id: LOCAL_AUTHORITY_LAYER_ID,
+    type: "line",
+    source: LOCAL_AUTHORITY_SOURCE_ID,
+    "source-layer": LOCAL_AUTHORITY_SOURCE_LAYER,
+    paint: {
+      "line-color": style.boundaries.localAuthorityColor ?? "#0d0d58",
+      "line-width": style.boundaries.localAuthorityWidth ?? 1
+    },
+    layout: {
+      visibility: "visible"
+    }
+  });
+}
+function hideLocalAuthorityOverlay(map) {
+  if (map.getLayer(LOCAL_AUTHORITY_LAYER_ID)) {
+    map.setLayoutProperty(LOCAL_AUTHORITY_LAYER_ID, "visibility", "none");
+  }
+}
+var NHSER_SOURCE_ID = "rcpch-imd-nhser-overlay";
+var NHSER_LAYER_ID = "rcpch-imd-nhser-overlay-line";
+var ICB_SOURCE_ID = "rcpch-imd-icb-overlay";
+var ICB_LAYER_ID = "rcpch-imd-icb-overlay-line";
+var LHB_SOURCE_ID = "rcpch-imd-lhb-overlay";
+var LHB_LAYER_ID = "rcpch-imd-lhb-overlay-line";
+var NHSER_FULL_TABLE_NAME = "public.nhser_tiles_2021";
+var NHSER_SOURCE_LAYER = "public.nhser_tiles_2021";
+var ICB_FULL_TABLE_NAME = "public.icb_tiles_2023";
+var ICB_SOURCE_LAYER = "public.icb_tiles_2023";
+var LHB_FULL_TABLE_NAME = "public.lhb_tiles_2022";
+var LHB_SOURCE_LAYER = "public.lhb_tiles_2022";
+function addOrUpdateBoundaryOverlay(map, tilesBaseUrl, input) {
+  const tileUrl = buildTileUrl(tilesBaseUrl, input.fullTableName);
+  const existing = map.getSource(input.sourceId);
+  if (existing instanceof VectorTileSource) {
+    existing.setTiles([tileUrl]);
+  } else {
+    if (existing) map.removeSource(input.sourceId);
+    map.addSource(input.sourceId, {
+      type: "vector",
+      tiles: [tileUrl],
+      minzoom: 0,
+      maxzoom: 14
+    });
+  }
+  if (map.getLayer(input.layerId)) {
+    map.setPaintProperty(input.layerId, "line-color", input.lineColor);
+    map.setPaintProperty(input.layerId, "line-width", input.lineWidth);
+    map.setLayoutProperty(input.layerId, "visibility", "visible");
+    return;
+  }
+  map.addLayer({
+    id: input.layerId,
+    type: "line",
+    source: input.sourceId,
+    "source-layer": input.sourceLayer,
+    paint: {
+      "line-color": input.lineColor,
+      "line-width": input.lineWidth
+    },
+    layout: {
+      visibility: "visible"
+    }
+  });
+}
+function addOrUpdateNhserOverlay(map, tilesBaseUrl, style) {
+  addOrUpdateBoundaryOverlay(map, tilesBaseUrl, {
+    sourceId: NHSER_SOURCE_ID,
+    layerId: NHSER_LAYER_ID,
+    fullTableName: NHSER_FULL_TABLE_NAME,
+    sourceLayer: NHSER_SOURCE_LAYER,
+    lineColor: style.boundaries.nhserColor ?? "#e00087",
+    lineWidth: style.boundaries.nhserWidth ?? 1.5
+  });
+}
+function addOrUpdateIcbOverlay(map, tilesBaseUrl, style) {
+  addOrUpdateBoundaryOverlay(map, tilesBaseUrl, {
+    sourceId: ICB_SOURCE_ID,
+    layerId: ICB_LAYER_ID,
+    fullTableName: ICB_FULL_TABLE_NAME,
+    sourceLayer: ICB_SOURCE_LAYER,
+    lineColor: style.boundaries.icbColor ?? "#57c7f2",
+    lineWidth: style.boundaries.icbWidth ?? 1
+  });
+}
+function addOrUpdateLhbOverlay(map, tilesBaseUrl, style) {
+  addOrUpdateBoundaryOverlay(map, tilesBaseUrl, {
+    sourceId: LHB_SOURCE_ID,
+    layerId: LHB_LAYER_ID,
+    fullTableName: LHB_FULL_TABLE_NAME,
+    sourceLayer: LHB_SOURCE_LAYER,
+    lineColor: style.boundaries.lhbColor ?? "#57c7f2",
+    lineWidth: style.boundaries.lhbWidth ?? 1
+  });
+}
+function hideOverlay(map, layerId) {
+  if (map.getLayer(layerId)) {
+    map.setLayoutProperty(layerId, "visibility", "none");
+  }
+}
+function hideNhserOverlay(map) {
+  hideOverlay(map, NHSER_LAYER_ID);
+}
+function hideIcbOverlay(map) {
+  hideOverlay(map, ICB_LAYER_ID);
+}
+function hideLhbOverlay(map) {
+  hideOverlay(map, LHB_LAYER_ID);
+}
+
+// src/map/legend.ts
+function getLegendRows(state, visibility) {
+  const nation = state.nation;
+  const isNhserEligible = nation === "all" || nation === "england";
+  const isIcbEligible = nation === "all" || nation === "england";
+  const isLhbEligible = nation === "all" || nation === "wales";
+  const rows = [
+    {
+      key: "nhser",
+      label: "NHS England regions",
+      isVisible: visibility.nhser,
+      isEnabled: isNhserEligible,
+      isActive: state.overlays.nhser,
+      disabledNote: "England only"
+    },
+    {
+      key: "icb",
+      label: "ICBs",
+      isVisible: visibility.icb,
+      isEnabled: isIcbEligible,
+      isActive: state.overlays.icb,
+      disabledNote: "England only"
+    },
+    {
+      key: "localAuthority",
+      label: "Local authorities",
+      isVisible: visibility.localAuthority,
+      isEnabled: true,
+      isActive: state.overlays.localAuthority
+    },
+    {
+      key: "lhb",
+      label: "Local health boards",
+      isVisible: visibility.lhb,
+      isEnabled: isLhbEligible,
+      isActive: state.overlays.lhb,
+      disabledNote: "Wales only"
+    }
+  ];
+  return rows.filter((row) => row.isVisible);
+}
+function applyLegendPosition(el, position) {
+  el.style.top = "";
+  el.style.right = "";
+  el.style.bottom = "";
+  el.style.left = "";
+  switch (position) {
+    case "top-left":
+      el.style.top = "12px";
+      el.style.left = "12px";
+      break;
+    case "bottom-left":
+      el.style.bottom = "12px";
+      el.style.left = "12px";
+      break;
+    case "bottom-right":
+      el.style.bottom = "12px";
+      el.style.right = "12px";
+      break;
+    case "top-right":
+    default:
+      el.style.top = "12px";
+      el.style.right = "12px";
+      break;
+  }
+}
+function createLegendControl(input) {
+  const containerStyle = window.getComputedStyle(input.container);
+  if (containerStyle.position === "static") {
+    input.container.style.position = "relative";
+  }
+  let currentState = input.state;
+  let currentStyle = input.style;
+  let collapsed = input.collapsed;
+  const root = document.createElement("div");
+  root.setAttribute("data-rcpch-legend", "true");
+  root.style.position = "absolute";
+  root.style.zIndex = "5";
+  root.style.pointerEvents = "auto";
+  applyLegendPosition(root, input.position);
+  const panel = document.createElement("div");
+  const headerBtn = document.createElement("button");
+  const headerTitle = document.createElement("span");
+  const headerIcon = document.createElement("span");
+  const body = document.createElement("div");
+  const keySection = document.createElement("div");
+  headerBtn.type = "button";
+  headerBtn.setAttribute("aria-expanded", String(!collapsed));
+  headerTitle.textContent = input.title;
+  headerIcon.textContent = collapsed ? "+" : "-";
+  headerBtn.appendChild(headerTitle);
+  headerBtn.appendChild(headerIcon);
+  panel.appendChild(headerBtn);
+  panel.appendChild(body);
+  panel.appendChild(keySection);
+  root.appendChild(panel);
+  input.container.appendChild(root);
+  function applyStyle() {
+    const legend = currentStyle.legend;
+    const backgroundColor = legend?.backgroundColor ?? "#ffffff";
+    const textColor = legend?.textColor ?? "#0d0d58";
+    const borderColor = legend?.borderColor ?? "#d8dde6";
+    const borderRadius = legend?.borderRadius ?? 8;
+    const fontSize = legend?.fontSize ?? 13;
+    const fontFamily = legend?.fontFamily ?? "system-ui, -apple-system, Segoe UI, Roboto, sans-serif";
+    const width = legend?.width ?? 220;
+    const boxShadow = legend?.boxShadow ?? "0 6px 18px rgba(0, 0, 0, 0.12)";
+    panel.style.background = backgroundColor;
+    panel.style.color = textColor;
+    panel.style.border = `1px solid ${borderColor}`;
+    panel.style.borderRadius = `${borderRadius}px`;
+    panel.style.width = `${width}px`;
+    panel.style.boxShadow = boxShadow;
+    panel.style.overflow = "hidden";
+    headerBtn.style.width = "100%";
+    headerBtn.style.border = "0";
+    headerBtn.style.background = "transparent";
+    headerBtn.style.color = textColor;
+    headerBtn.style.display = "flex";
+    headerBtn.style.alignItems = "center";
+    headerBtn.style.justifyContent = "space-between";
+    headerBtn.style.padding = "10px 12px";
+    headerBtn.style.cursor = "pointer";
+    headerBtn.style.fontWeight = "600";
+    headerBtn.style.fontSize = `${fontSize}px`;
+    headerBtn.style.fontFamily = fontFamily;
+    headerBtn.style.textAlign = "left";
+    body.style.padding = "0 12px 10px";
+    body.style.display = collapsed ? "none" : "block";
+    body.style.fontFamily = fontFamily;
+    body.style.fontSize = `${fontSize}px`;
+    keySection.style.padding = "0 12px 10px";
+    keySection.style.display = collapsed ? "none" : "block";
+    keySection.style.fontFamily = fontFamily;
+    keySection.style.fontSize = `${Math.max(fontSize - 1, 11)}px`;
+    keySection.style.borderTop = `1px solid ${borderColor}`;
+  }
+  function renderRows() {
+    body.innerHTML = "";
+    keySection.innerHTML = "";
+    const rows = getLegendRows(currentState, input.visibility);
+    if (!rows.length) {
+      root.style.display = "none";
+      return;
+    }
+    root.style.display = "";
+    for (const row of rows) {
+      const rowBtn = document.createElement("button");
+      const dot = document.createElement("span");
+      const label = document.createElement("span");
+      const textWrap = document.createElement("span");
+      rowBtn.type = "button";
+      rowBtn.style.width = "100%";
+      rowBtn.style.border = "0";
+      rowBtn.style.background = "transparent";
+      rowBtn.style.color = currentStyle.legend?.textColor ?? "#0d0d58";
+      rowBtn.style.display = "flex";
+      rowBtn.style.alignItems = "center";
+      rowBtn.style.gap = "8px";
+      rowBtn.style.padding = "6px 0";
+      rowBtn.style.cursor = row.isEnabled ? "pointer" : "not-allowed";
+      rowBtn.style.textAlign = "left";
+      rowBtn.style.opacity = row.isEnabled ? row.isActive ? "1" : "0.75" : "0.5";
+      dot.style.width = "10px";
+      dot.style.height = "10px";
+      dot.style.borderRadius = "999px";
+      dot.style.flex = "0 0 10px";
+      dot.style.background = row.isActive ? currentStyle.legend?.toggleOnColor ?? "#0d0d58" : currentStyle.legend?.toggleOffColor ?? "#6b7280";
+      textWrap.style.display = "flex";
+      textWrap.style.flexDirection = "column";
+      textWrap.style.gap = "1px";
+      label.textContent = row.label;
+      textWrap.appendChild(label);
+      if (!row.isEnabled && row.disabledNote) {
+        const note = document.createElement("span");
+        note.textContent = row.disabledNote;
+        note.style.fontSize = "11px";
+        note.style.opacity = "0.9";
+        textWrap.appendChild(note);
+      }
+      rowBtn.setAttribute("aria-pressed", String(row.isActive));
+      rowBtn.setAttribute("aria-disabled", String(!row.isEnabled));
+      rowBtn.disabled = !row.isEnabled;
+      rowBtn.setAttribute(
+        "title",
+        !row.isEnabled && row.disabledNote ? `${row.label} (${row.disabledNote})` : row.isActive ? `Hide ${row.label}` : `Show ${row.label}`
+      );
+      rowBtn.addEventListener("click", () => {
+        if (!row.isEnabled) return;
+        input.onToggle(row.key, !row.isActive);
+      });
+      rowBtn.appendChild(dot);
+      rowBtn.appendChild(textWrap);
+      body.appendChild(rowBtn);
+    }
+    renderKeySection(rows);
+  }
+  function renderKeySection(rows) {
+    const keyTitle = document.createElement("div");
+    keyTitle.textContent = "Key";
+    keyTitle.style.paddingTop = "8px";
+    keyTitle.style.paddingBottom = "6px";
+    keyTitle.style.fontWeight = "600";
+    keySection.appendChild(keyTitle);
+    for (const row of rows) {
+      const line = document.createElement("div");
+      const swatch = document.createElement("span");
+      const label = document.createElement("span");
+      line.style.display = "flex";
+      line.style.alignItems = "center";
+      line.style.gap = "8px";
+      line.style.padding = "2px 0";
+      swatch.style.display = "inline-block";
+      swatch.style.width = "18px";
+      swatch.style.height = "0";
+      swatch.style.borderTopWidth = `${Math.max(
+        resolveBoundaryWidth(row.key, currentStyle),
+        2
+      )}px`;
+      swatch.style.borderTopStyle = "solid";
+      swatch.style.borderTopColor = resolveBoundaryColor(row.key, currentStyle);
+      label.textContent = row.label;
+      line.appendChild(swatch);
+      line.appendChild(label);
+      keySection.appendChild(line);
+    }
+    const scale = document.createElement("div");
+    scale.style.paddingTop = "8px";
+    const scaleLabel = document.createElement("div");
+    scaleLabel.textContent = "IMD decile (1 most deprived, 10 least deprived)";
+    scaleLabel.style.paddingBottom = "4px";
+    keySection.appendChild(scaleLabel);
+    const ramp = document.createElement("div");
+    ramp.style.display = "grid";
+    ramp.style.gridTemplateColumns = "repeat(10, minmax(0, 1fr))";
+    ramp.style.gap = "2px";
+    const colors = getDecileColors(currentState.nation, currentStyle);
+    for (let i = 0; i < 10; i++) {
+      const chip = document.createElement("span");
+      chip.style.height = "8px";
+      chip.style.background = colors[i] ?? colors[0] ?? "#cccccc";
+      chip.style.display = "inline-block";
+      chip.title = `Decile ${i + 1}`;
+      ramp.appendChild(chip);
+    }
+    const scaleTicks = document.createElement("div");
+    scaleTicks.style.display = "flex";
+    scaleTicks.style.justifyContent = "space-between";
+    scaleTicks.style.paddingTop = "2px";
+    scaleTicks.textContent = "1";
+    const rightTick = document.createElement("span");
+    rightTick.textContent = "10";
+    scaleTicks.appendChild(rightTick);
+    scale.appendChild(ramp);
+    scale.appendChild(scaleTicks);
+    keySection.appendChild(scale);
+  }
+  function resolveBoundaryColor(key, style) {
+    if (key === "localAuthority") return style.boundaries.localAuthorityColor ?? "#0d0d58";
+    if (key === "nhser") return style.boundaries.nhserColor ?? "#e00087";
+    if (key === "icb") return style.boundaries.icbColor ?? "#57c7f2";
+    return style.boundaries.lhbColor ?? "#57c7f2";
+  }
+  function resolveBoundaryWidth(key, style) {
+    if (key === "localAuthority") return style.boundaries.localAuthorityWidth ?? 1;
+    if (key === "nhser") return style.boundaries.nhserWidth ?? 1.5;
+    if (key === "icb") return style.boundaries.icbWidth ?? 1;
+    return style.boundaries.lhbWidth ?? 1;
+  }
+  headerBtn.addEventListener("click", () => {
+    collapsed = !collapsed;
+    headerBtn.setAttribute("aria-expanded", String(!collapsed));
+    headerIcon.textContent = collapsed ? "+" : "-";
+    body.style.display = collapsed ? "none" : "block";
+    keySection.style.display = collapsed ? "none" : "block";
+  });
+  applyStyle();
+  renderRows();
+  return {
+    update(nextState, nextStyle) {
+      currentState = nextState;
+      currentStyle = nextStyle;
+      applyStyle();
+      renderRows();
+    },
+    destroy() {
+      root.remove();
+    }
+  };
+}
+var logger = {
+  debug(message, ...args) {
+  },
+  info(message, ...args) {
+    console.info(`[rcpch-imd-map] ${message}`, ...args);
+  },
+  warn(message, ...args) {
+    console.warn(`[rcpch-imd-map] ${message}`, ...args);
+  },
+  error(message, ...args) {
+    console.error(`[rcpch-imd-map] ${message}`, ...args);
+  }
+};
+
+// src/core/createImdMap.ts
+var UK_CENTER = [-2.5, 54];
+var UK_ZOOM = 5;
+function createImdMap(options) {
+  const containerEl = typeof options.container === "string" ? document.getElementById(options.container) : options.container;
+  if (!containerEl) {
+    throw new Error(
+      `[rcpch-imd-map] Container not found: "${String(options.container)}". Ensure the element exists in the DOM before calling createImdMap.`
+    );
+  }
+  const tilesBaseUrl = options.tilesBaseUrl ?? "";
+  if (!tilesBaseUrl) {
+    logger.warn("No tilesBaseUrl provided. Choropleth tiles will not load.");
+  }
+  let resolvedStyle = mergeStyle(DEFAULT_STYLE, options.style);
+  let state = createInitialState(options.initialNation ?? "all", options.initialEra ?? "2021");
+  if (options.enableLocalAuthorityOverlay) {
+    state = { ...state, overlays: { ...state.overlays, localAuthority: true } };
+  }
+  if (options.enableHealthOverlays) {
+    state = {
+      ...state,
+      overlays: {
+        ...state.overlays,
+        nhser: true,
+        icb: true,
+        lhb: true
+      }
+    };
+  }
+  const showLegend = options.showLegend ?? true;
+  const legendPosition = options.legendPosition ?? "top-right";
+  const legendCollapsed = options.legendCollapsed ?? false;
+  const legendTitle = options.legendTitle ?? "Map layers";
+  const legendVisibility = {
+    localAuthority: options.showLegendLocalAuthority ?? true,
+    nhser: options.showLegendNhser ?? true,
+    icb: options.showLegendIcb ?? true,
+    lhb: options.showLegendLhb ?? true
+  };
+  if (options.initialNation && options.initialEra && willEraBeOverridden(options.initialNation, options.initialEra)) {
+    const warning = {
+      code: "ERA_OVERRIDE",
+      message: `Era '${options.initialEra}' is not supported for nation '${options.initialNation}'. Effective era will be '${state.effectiveEra}'.`
+    };
+    logger.warn(warning.message);
+    options.onWarning?.(warning);
+  }
+  const map = new Map({
+    container: containerEl,
+    style: options.mapStyleUrl ?? "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
+    center: options.center ?? UK_CENTER,
+    zoom: options.zoom ?? UK_ZOOM,
+    attributionControl: false
+  });
+  map.addControl(new AttributionControl({ compact: true }));
+  const popup = new Popup({ closeButton: false, closeOnClick: false });
+  let mapLoaded = false;
+  let pendingPatientFeatures = null;
+  let pendingLeadCentreFeature = null;
+  let pendingFitToData = null;
+  let patientInteractionAttached = false;
+  let leadCentreInteractionAttached = false;
+  let storedLeadCentreCoord = null;
+  let storedPatientCoords = [];
+  function getFitCoords() {
+    return [
+      ...storedLeadCentreCoord ? [storedLeadCentreCoord] : [],
+      ...storedPatientCoords
+    ];
+  }
+  function applyFitToData(zoom, padding) {
+    const coords = getFitCoords();
+    if (!coords.length) {
+      logger.warn("No patient or lead centre data to fit to.");
+      return;
+    }
+    if (coords.length === 1) {
+      const [lon, lat] = coords[0];
+      map.flyTo({ center: [lon, lat], zoom: zoom ?? 6 });
+      return;
+    }
+    let minLon = coords[0][0];
+    let minLat = coords[0][1];
+    let maxLon = coords[0][0];
+    let maxLat = coords[0][1];
+    for (const [lon, lat] of coords) {
+      if (lon < minLon) minLon = lon;
+      if (lat < minLat) minLat = lat;
+      if (lon > maxLon) maxLon = lon;
+      if (lat > maxLat) maxLat = lat;
+    }
+    map.fitBounds(
+      [
+        [minLon, minLat],
+        [maxLon, maxLat]
+      ],
+      {
+        padding: padding ?? 50,
+        maxZoom: zoom
+      }
+    );
+  }
+  function applyOverlayVisibility() {
+    if (!mapLoaded || !tilesBaseUrl) return;
+    const nation = state.nation;
+    const canShowNhser = nation === "all" || nation === "england";
+    const canShowIcb = nation === "all" || nation === "england";
+    const canShowLhb = nation === "all" || nation === "wales";
+    if (state.overlays.localAuthority) {
+      addOrUpdateLocalAuthorityOverlay(map, tilesBaseUrl, resolvedStyle);
+    } else {
+      hideLocalAuthorityOverlay(map);
+    }
+    if (state.overlays.nhser && canShowNhser) {
+      addOrUpdateNhserOverlay(map, tilesBaseUrl, resolvedStyle);
+    } else {
+      hideNhserOverlay(map);
+    }
+    if (state.overlays.icb && canShowIcb) {
+      addOrUpdateIcbOverlay(map, tilesBaseUrl, resolvedStyle);
+    } else {
+      hideIcbOverlay(map);
+    }
+    if (state.overlays.lhb && canShowLhb) {
+      addOrUpdateLhbOverlay(map, tilesBaseUrl, resolvedStyle);
+    } else {
+      hideLhbOverlay(map);
+    }
+  }
+  function setOverlayVisibilityState(input) {
+    state = { ...state, overlays: { ...state.overlays, ...input } };
+    applyOverlayVisibility();
+    legendController?.update(state, resolvedStyle);
+  }
+  let legendController = null;
+  if (showLegend) {
+    legendController = createLegendControl({
+      container: containerEl,
+      position: legendPosition,
+      title: legendTitle,
+      collapsed: legendCollapsed,
+      style: resolvedStyle,
+      state,
+      visibility: legendVisibility,
+      onToggle: (key, nextValue) => {
+        if (key === "localAuthority") {
+          setOverlayVisibilityState({ localAuthority: nextValue });
+        } else if (key === "nhser") {
+          setOverlayVisibilityState({ nhser: nextValue });
+        } else if (key === "icb") {
+          setOverlayVisibilityState({ icb: nextValue });
+        } else if (key === "lhb") {
+          setOverlayVisibilityState({ lhb: nextValue });
+        }
+      }
+    });
+  }
+  logger.debug(`tilesBaseUrl resolved to: "${tilesBaseUrl}"`);
+  map.on("load", () => {
+    mapLoaded = true;
+    if (tilesBaseUrl) {
+      addOrUpdateChoroplethSources(map, tilesBaseUrl, state.effectiveEra);
+      addChoroplethLayers(map, state.nation, state.effectiveEra, resolvedStyle);
+    }
+    applyOverlayVisibility();
+    attachChoroplethInteraction(map, popup, resolvedStyle, options);
+    if (pendingPatientFeatures) {
+      storedPatientCoords = pendingPatientFeatures.map((f) => f.geometry.coordinates);
+      addOrUpdatePatientsSource(map, pendingPatientFeatures);
+      addOrUpdatePatientsLayer(map, resolvedStyle);
+      if (!patientInteractionAttached) {
+        attachPatientInteraction(map, popup, resolvedStyle);
+        patientInteractionAttached = true;
+      }
+      state = { ...state, hasPatients: true };
+      pendingPatientFeatures = null;
+    }
+    if (pendingLeadCentreFeature) {
+      storedLeadCentreCoord = pendingLeadCentreFeature.geometry.coordinates;
+      addOrUpdateLeadCentreSource(map, pendingLeadCentreFeature);
+      addOrUpdateLeadCentreLayer(map, resolvedStyle);
+      if (!leadCentreInteractionAttached) {
+        attachLeadCentreInteraction(map, popup, resolvedStyle);
+        leadCentreInteractionAttached = true;
+      }
+      state = { ...state, hasLeadCentre: true };
+      pendingLeadCentreFeature = null;
+    }
+    if (pendingFitToData) {
+      const { zoom, padding } = pendingFitToData;
+      map.once("idle", () => {
+        applyFitToData(zoom, padding);
+      });
+      pendingFitToData = null;
+    }
+  });
+  function applyViewChange(newNation, newEra) {
+    const newEffectiveEra = resolveEffectiveEra(newNation, newEra);
+    if (willEraBeOverridden(newNation, newEra)) {
+      const warning = {
+        code: "ERA_OVERRIDE",
+        message: `Era '${newEra}' overridden to '${newEffectiveEra}' for nation '${newNation}'.`
+      };
+      logger.warn(warning.message);
+      options.onWarning?.(warning);
+    }
+    const eraChanged = newEffectiveEra !== state.effectiveEra;
+    const nationChanged = newNation !== state.nation;
+    state = { ...state, nation: newNation, era: newEra, effectiveEra: newEffectiveEra };
+    if (mapLoaded && tilesBaseUrl) {
+      if (eraChanged) {
+        removeChoroplethLayers(map);
+        addOrUpdateChoroplethSources(map, tilesBaseUrl, newEffectiveEra);
+        addChoroplethLayers(map, newNation, newEffectiveEra, resolvedStyle);
+      } else if (nationChanged) {
+        updateChoroplethNationFilter(map, newNation);
+      }
+    }
+    options.onViewChange?.({ nation: newNation, era: newEra, effectiveEra: newEffectiveEra });
+  }
+  const instance = {
+    setView({ nation, era } = {}) {
+      applyViewChange(nation ?? state.nation, era ?? state.era);
+    },
+    setNation(nation) {
+      applyViewChange(nation, state.era);
+    },
+    setEra(era) {
+      applyViewChange(state.nation, era);
+    },
+    setStyle(newStyle) {
+      resolvedStyle = mergeStyle(DEFAULT_STYLE, newStyle);
+      if (mapLoaded) {
+        updateChoroplethStyle(map, state.nation, resolvedStyle);
+        applyOverlayVisibility();
+        if (state.hasPatients) {
+          addOrUpdatePatientsLayer(map, resolvedStyle);
+        }
+        if (state.hasLeadCentre) {
+          addOrUpdateLeadCentreLayer(map, resolvedStyle);
+        }
+        legendController?.update(state, resolvedStyle);
+      }
+    },
+    setOverlayVisibility(input) {
+      setOverlayVisibilityState(input);
+    },
+    setPatients(data, patientOptions) {
+      const { features, warnings } = normalizePatientInput(data, {
+        strict: patientOptions?.strict
+      });
+      storedPatientCoords = features.map(
+        (f) => f.geometry.coordinates
+      );
+      for (const w of warnings) {
+        logger.warn(w.message);
+        options.onWarning?.(w);
+      }
+      if (!mapLoaded) {
+        pendingPatientFeatures = features;
+        return;
+      }
+      addOrUpdatePatientsSource(map, features);
+      addOrUpdatePatientsLayer(map, resolvedStyle);
+      if (!patientInteractionAttached) {
+        attachPatientInteraction(map, popup, resolvedStyle);
+        patientInteractionAttached = true;
+      }
+      state = { ...state, hasPatients: true };
+    },
+    clearPatients() {
+      pendingPatientFeatures = null;
+      storedPatientCoords = [];
+      if (!mapLoaded) return;
+      removePatientsLayer(map);
+      if (map.getSource(PATIENTS_SOURCE_ID)) map.removeSource(PATIENTS_SOURCE_ID);
+      state = { ...state, hasPatients: false };
+    },
+    setLeadCentre(data, _options) {
+      const feature = normalizeLeadCentreInput(data);
+      if (!feature) {
+        const warning = { code: "INVALID_LEAD_CENTRE", message: "Lead centre data could not be resolved to valid coordinates." };
+        logger.warn(warning.message);
+        options.onWarning?.(warning);
+        return;
+      }
+      if (!mapLoaded) {
+        pendingLeadCentreFeature = feature;
+        return;
+      }
+      storedLeadCentreCoord = feature.geometry.coordinates;
+      addOrUpdateLeadCentreSource(map, feature);
+      addOrUpdateLeadCentreLayer(map, resolvedStyle);
+      if (!leadCentreInteractionAttached) {
+        attachLeadCentreInteraction(map, popup, resolvedStyle);
+        leadCentreInteractionAttached = true;
+      }
+      state = { ...state, hasLeadCentre: true };
+    },
+    clearLeadCentre() {
+      pendingLeadCentreFeature = null;
+      storedLeadCentreCoord = null;
+      if (!mapLoaded) return;
+      removeLeadCentreLayer(map);
+      if (map.getSource(LEAD_CENTRE_SOURCE_ID)) map.removeSource(LEAD_CENTRE_SOURCE_ID);
+      state = { ...state, hasLeadCentre: false };
+    },
+    getState() {
+      return { ...state };
+    },
+    resize() {
+      map.resize();
+    },
+    fitToData(fitOptions) {
+      const zoom = fitOptions?.zoom;
+      const padding = fitOptions?.padding;
+      if (!mapLoaded) {
+        pendingFitToData = { zoom, padding };
+        return;
+      }
+      applyFitToData(zoom, padding);
+    },
+    destroy() {
+      popup.remove();
+      legendController?.destroy();
+      map.remove();
+    }
+  };
+  return instance;
+}
+
+export { createImdMap };
+//# sourceMappingURL=index.esm.js.map
+//# sourceMappingURL=index.esm.js.map