@rcpch/imd-map 0.1.0 → 0.1.2

package/README.md

@@ -271,6 +271,10 @@ createImdMap({
       nationLabel: 'Nation',
       patientLabel: 'Patient',
       leadCentreLabel: 'Lead centre',
+      areaTooltipText:
+        '<strong>{{areaName}}</strong><br/>' +
+        '<span>{{decileLabel}}: {{imdDecile}}</span><br/>' +
+        '<span>{{nationLabel}}: {{nation}}</span>',
       patientTooltipText: '{{patientLabel}}',
       leadCentreTooltipText: '{{leadCentreLabel}}: {{label}}',
     },
@@ -280,7 +284,7 @@ createImdMap({
 
 ### Tooltip templates
 
-`patientTooltipText` and `leadCentreTooltipText` support `{{token}}` interpolation.
+`areaTooltipText`, `patientTooltipText`, and `leadCentreTooltipText` support `{{token}}` interpolation.
 
 If you are writing inline JavaScript inside a Django template, Django will try to
 evaluate `{{...}}` first. Use one of these patterns so the map library still
@@ -321,6 +325,29 @@ patientTooltipText: 'Group: {{group}}'
 | `{{leadCentreLabel}}` | The `leadCentreLabel` style option (default `"Lead centre"`) |
 | `{{label}}` | The `label` field from `setLeadCentre({ label, lat, lon })` |
 
+**Area tokens** (`areaTooltipText`):
+
+| Token | Value |
+|---|---|
+| `{{areaCode}}` | Area code from tile `code` |
+| `{{areaName}}` | Area name from tile `area_name` |
+| `{{areaType}}` | Area type from tile `area_type` (fallback `LSOA`) |
+| `{{nation}}` | Nation from tile `nation` |
+| `{{imdDecile}}` | IMD decile from tile `imd_decile` |
+| `{{imdYear}}` | IMD publication year from tile `imd_year` |
+| `{{boundaryYear}}` | Boundary year from tile `year` |
+| `{{laCode}}` | Local authority code from tile `la_code` |
+| `{{laName}}` | Local authority name from tile `la_name` |
+| `{{laYear}}` | Local authority year from tile `la_year` |
+| `{{nhserCode}}` | NHS England region code from tile `nhser_code` |
+| `{{nhserName}}` | NHS England region name from tile `nhser_name` |
+| `{{icbCode}}` | ICB code from tile `icb_code` |
+| `{{icbName}}` | ICB name from tile `icb_name` |
+| `{{lhbCode}}` | Local health board code from tile `lhb_code` |
+| `{{lhbName}}` | Local health board name from tile `lhb_name` |
+| `{{decileLabel}}` | The `decileLabel` style option |
+| `{{nationLabel}}` | The `nationLabel` style option |
+
 Style can also be updated at runtime:
 
 ```js
@@ -353,11 +380,34 @@ map.setStyle({ tooltip: { areaLabel: 'Local area' } });
 | `center` | `[lon, lat]` | UK center | Initial map center |
 | `zoom` | `number` | `5` | Initial zoom level |
 | `style` | `MapStyleOptions` | RCPCH defaults | Visual style overrides |
+| `areaTooltipMode` | `'default' \| 'template' \| 'none'` | `'default'` | Built-in area tooltip, template tooltip, or no built-in area popup |
 | `onViewChange` | `function` | — | Called when nation or era changes |
-| `onAreaHover` | `function` | — | Called on choropleth feature hover |
+| `onAreaHover` | `function` | — | Called on choropleth feature hover (includes pointer `lngLat`) |
 | `onAreaClick` | `function` | — | Called on choropleth feature click |
 | `onWarning` | `function` | — | Called for non-fatal issues |
 
+### Area tooltip mode
+
+```js
+createImdMap({
+  container: 'map',
+  tilesBaseUrl: '...',
+  areaTooltipMode: 'template',
+  style: {
+    tooltip: {
+      areaTooltipText:
+        '<strong>{{areaName}}</strong><br/>' +
+        '<span>{{decileLabel}}: {{imdDecile}}</span><br/>' +
+        '<span>{{nationLabel}}: {{nation}}</span>',
+    },
+  },
+});
+```
+
+- `default`: current built-in area tooltip rows.
+- `template`: render `style.tooltip.areaTooltipText` with token interpolation.
+- `none`: no built-in area popup; `onAreaHover`/`onAreaClick` still fire for fully external tooltips.
+
 ### Instance methods
 
 | Method | Description |

package/dist/index.d.ts

@@ -58,6 +58,11 @@ interface TooltipStyleOptions {
     patientLabel?: string;
     /** Label used in lead-centre hover tooltip. Default: "Lead centre". */
     leadCentreLabel?: string;
+    /**
+     * Area tooltip content template.
+     * Supports token interpolation, e.g. "{{areaName}}", "{{imdDecile}}", "{{nation}}".
+     */
+    areaTooltipText?: string;
     /**
      * Patient tooltip content template.
      * Supports token interpolation, e.g. "{{patientLabel}}" or "{{id}}".
@@ -105,10 +110,28 @@ interface ImdMapState {
     };
 }
 interface AreaHoverPayload {
+    areaCode: string | undefined;
+    areaName: string | undefined;
+    areaType: string | undefined;
+    nation: string | undefined;
+    imdDecile: number | undefined;
+    imdYear: number | undefined;
+    boundaryYear: number | undefined;
+    laCode: string | undefined;
+    laName: string | undefined;
+    laYear: number | undefined;
+    nhserCode: string | undefined;
+    nhserName: string | undefined;
+    icbCode: string | undefined;
+    icbName: string | undefined;
+    lhbCode: string | undefined;
+    lhbName: string | undefined;
+    lngLat: {
+        lng: number;
+        lat: number;
+    };
     lsoaCode: string | undefined;
     lsoaName: string | undefined;
-    imdDecile: number | undefined;
-    nation: string | undefined;
     rawProperties: Record<string, unknown>;
 }
 type AreaClickPayload = AreaHoverPayload;
@@ -179,6 +202,13 @@ interface CreateImdMapOptions {
     center?: [number, number];
     zoom?: number;
     style?: MapStyleOptions;
+    /**
+     * Area tooltip rendering mode.
+     * - default: built-in tooltip content
+     * - template: uses style.tooltip.areaTooltipText token interpolation
+     * - none: disables built-in area popup (callbacks still fire)
+     */
+    areaTooltipMode?: 'default' | 'template' | 'none';
     onViewChange?: (view: {
         nation: Nation;
         era: Era;

package/dist/index.esm.js

@@ -23,7 +23,8 @@ function willEraBeOverridden(nation, 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 }
+  { tier: "z8_10", minzoom: 8, maxzoom: 11 },
+  { tier: "z11_14", minzoom: 11, maxzoom: 24 }
 ];
 function resolveFullTableName(effectiveEra, tier) {
   return `public.uk_master_${effectiveEra}_${tier}`;
@@ -272,6 +273,7 @@ var DEFAULT_STYLE = {
     nationLabel: "Nation",
     patientLabel: "Patient",
     leadCentreLabel: "Lead centre",
+    areaTooltipText: '<strong style="display:block;margin-bottom:2px;">{{areaName}}</strong><span>LSOA year: {{boundaryYear}}</span><br/><span>{{decileLabel}}: <strong>{{imdDecile}}</strong></span><br/><span>IMD year: {{imdYear}}</span><br/><span>{{nationLabel}}: {{nation}}</span>',
     patientTooltipText: "{{patientLabel}}",
     leadCentreTooltipText: "{{leadCentreLabel}}: {{label}}"
   },
@@ -564,6 +566,61 @@ function buildChoroplethTooltipHtml(properties, style) {
   <span>${t.nationLabel ?? "Nation"}: ${String(nation)}</span>
 </div>`;
 }
+function buildChoroplethTooltipHtmlFromTemplate(properties, style) {
+  const t = style.tooltip;
+  const bg = t.backgroundColor ?? "#0d0d58";
+  const color = t.textColor ?? "#ffffff";
+  const radius = t.borderRadius ?? 4;
+  const areaCode = getFeatureProperty(properties, "code");
+  const areaName = getFeatureProperty(properties, "area_name") ?? "Unknown area";
+  const areaType = getFeatureProperty(properties, "area_type") ?? "LSOA";
+  const nation = getFeatureProperty(properties, "nation") ?? "\u2013";
+  const imdDecile = getFeatureProperty(properties, "imd_decile") ?? "\u2013";
+  const imdYear = getFeatureProperty(properties, "imd_year") ?? "\u2013";
+  const boundaryYear = getFeatureProperty(properties, "year") ?? "\u2013";
+  const laCode = getFeatureProperty(properties, "la_code") ?? "";
+  const laName = getFeatureProperty(properties, "la_name") ?? "";
+  const laYear = getFeatureProperty(properties, "la_year") ?? "";
+  const nhserCode = getFeatureProperty(properties, "nhser_code") ?? "";
+  const nhserName = getFeatureProperty(properties, "nhser_name") ?? "";
+  const icbCode = getFeatureProperty(properties, "icb_code") ?? "";
+  const icbName = getFeatureProperty(properties, "icb_name") ?? "";
+  const lhbCode = getFeatureProperty(properties, "lhb_code") ?? "";
+  const lhbName = getFeatureProperty(properties, "lhb_name") ?? "";
+  const template = t.areaTooltipText ?? "<strong>{{areaName}}</strong><br/><span>{{decileLabel}}: {{imdDecile}}</span>";
+  const text = interpolateTemplate(template, {
+    ...properties ?? {},
+    areaCode,
+    areaName,
+    areaType,
+    nation,
+    imdDecile,
+    imdYear,
+    boundaryYear,
+    laCode,
+    laName,
+    laYear,
+    nhserCode,
+    nhserName,
+    icbCode,
+    icbName,
+    lhbCode,
+    lhbName,
+    decileLabel: t.decileLabel ?? "IMD decile",
+    nationLabel: t.nationLabel ?? "Nation"
+  });
+  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 toOptionalNumber(value) {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string" && value.trim() !== "") {
+    const parsed = Number(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return void 0;
+}
 function buildPatientTooltipHtml(properties, style) {
   const t = style.tooltip;
   const id = getFeatureProperty(properties, "id") ?? "";
@@ -602,14 +659,44 @@ function buildLeadCentreTooltipHtml(properties, style) {
   <span>${text}</span>
 </div>`;
 }
-function featureToPayload(feature) {
+function featureToPayload(feature, lngLat) {
   const props = feature.properties ?? {};
-  const decileRaw = getFeatureProperty(props, "imd_decile");
+  const areaCode = getFeatureProperty(props, "code");
+  const areaName = getFeatureProperty(props, "area_name");
+  const areaType = getFeatureProperty(props, "area_type");
+  const nation = getFeatureProperty(props, "nation");
+  const imdDecile = toOptionalNumber(getFeatureProperty(props, "imd_decile"));
+  const imdYear = toOptionalNumber(getFeatureProperty(props, "imd_year"));
+  const boundaryYear = toOptionalNumber(getFeatureProperty(props, "year"));
+  const laCode = getFeatureProperty(props, "la_code");
+  const laName = getFeatureProperty(props, "la_name");
+  const laYear = toOptionalNumber(getFeatureProperty(props, "la_year"));
+  const nhserCode = getFeatureProperty(props, "nhser_code");
+  const nhserName = getFeatureProperty(props, "nhser_name");
+  const icbCode = getFeatureProperty(props, "icb_code");
+  const icbName = getFeatureProperty(props, "icb_name");
+  const lhbCode = getFeatureProperty(props, "lhb_code");
+  const lhbName = getFeatureProperty(props, "lhb_name");
   return {
-    lsoaCode: String(getFeatureProperty(props, "code") ?? ""),
-    lsoaName: String(getFeatureProperty(props, "area_name") ?? ""),
-    imdDecile: typeof decileRaw === "number" ? decileRaw : void 0,
-    nation: String(getFeatureProperty(props, "nation") ?? ""),
+    areaCode: areaCode === void 0 || areaCode === null ? void 0 : String(areaCode),
+    areaName: areaName === void 0 || areaName === null ? void 0 : String(areaName),
+    areaType: areaType === void 0 || areaType === null ? void 0 : String(areaType),
+    nation: nation === void 0 || nation === null ? void 0 : String(nation),
+    imdDecile,
+    imdYear,
+    boundaryYear,
+    laCode: laCode === void 0 || laCode === null ? void 0 : String(laCode),
+    laName: laName === void 0 || laName === null ? void 0 : String(laName),
+    laYear,
+    nhserCode: nhserCode === void 0 || nhserCode === null ? void 0 : String(nhserCode),
+    nhserName: nhserName === void 0 || nhserName === null ? void 0 : String(nhserName),
+    icbCode: icbCode === void 0 || icbCode === null ? void 0 : String(icbCode),
+    icbName: icbName === void 0 || icbName === null ? void 0 : String(icbName),
+    lhbCode: lhbCode === void 0 || lhbCode === null ? void 0 : String(lhbCode),
+    lhbName: lhbName === void 0 || lhbName === null ? void 0 : String(lhbName),
+    lngLat,
+    lsoaCode: areaCode === void 0 || areaCode === null ? void 0 : String(areaCode),
+    lsoaName: areaName === void 0 || areaName === null ? void 0 : String(areaName),
     rawProperties: props
   };
 }
@@ -621,8 +708,15 @@ function attachChoroplethInteraction(map, popup, style, options) {
       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));
+      const areaTooltipMode = options.areaTooltipMode ?? "default";
+      if (areaTooltipMode !== "none") {
+        const html = areaTooltipMode === "template" ? buildChoroplethTooltipHtmlFromTemplate(
+          feature.properties,
+          style
+        ) : buildChoroplethTooltipHtml(feature.properties, style);
+        popup.setLngLat(e.lngLat).setHTML(html).addTo(map);
+      }
+      options.onAreaHover?.(featureToPayload(feature, { lng: e.lngLat.lng, lat: e.lngLat.lat }));
     });
     map.on("mouseleave", layerId, () => {
       map.getCanvas().style.cursor = "";
@@ -631,7 +725,7 @@ function attachChoroplethInteraction(map, popup, style, options) {
     map.on("click", layerId, (e) => {
       const features = map.queryRenderedFeatures(e.point, { layers: [layerId] });
       if (!features.length) return;
-      options.onAreaClick?.(featureToPayload(features[0]));
+      options.onAreaClick?.(featureToPayload(features[0], { lng: e.lngLat.lng, lat: e.lngLat.lat }));
     });
   }
 }