geo-morpher 0.1.0

package/examples/browser/main.js

@@ -0,0 +1,225 @@
+import L from "npm:leaflet";
+import {
+  GeoMorpher,
+  createLeafletMorphLayers,
+  createLeafletGlyphLayer,
+} from "../../src/index.js";
+
+const formatStat = (value) => value.toLocaleString(undefined, {
+  maximumFractionDigits: 0,
+});
+
+const statusEl = document.getElementById("status");
+const slider = document.getElementById("morphFactor");
+const factorValue = document.getElementById("factorValue");
+const regularCountEl = document.getElementById("count-regular");
+const cartogramCountEl = document.getElementById("count-cartogram");
+const basemapToggle = document.getElementById("basemapBlurToggle");
+const glyphLegendEl = document.getElementById("glyphLegend");
+
+async function fetchJSON(fileName) {
+  const url = new URL(`../../data/${fileName}`, import.meta.url);
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch ${fileName}: ${response.status}`);
+  }
+  return response.json();
+}
+
+async function bootstrap() {
+  try {
+    statusEl.textContent = "Loading data…";
+
+    const [regularGeoJSON, cartogramGeoJSON] = await Promise.all([
+      fetchJSON("oxford_lsoas_regular.json"),
+      fetchJSON("oxford_lsoas_cartogram.json"),
+    ]);
+
+    const aggregations = {
+      population: "sum",
+      households: "sum",
+    };
+
+    const sampleData = regularGeoJSON.features.map((feature) => ({
+      lsoa: feature.properties.code,
+      population: Number(feature.properties.population ?? 0),
+      households: Number(feature.properties.households ?? 0),
+    }));
+
+    const morpher = new GeoMorpher({
+      regularGeoJSON,
+      cartogramGeoJSON,
+      data: sampleData,
+      aggregations,
+    });
+
+    await morpher.prepare();
+
+    const map = L.map("map", { preferCanvas: true });
+    map.setView([51.752, -1.2577], 12);
+
+    const glyphPane = map.createPane("glyphs");
+    glyphPane.style.zIndex = 650;
+    glyphPane.style.pointerEvents = "none";
+
+    const basemapLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+      maxZoom: 18,
+      attribution:
+        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    }).addTo(map);
+
+    const initialFactor = Number(slider.value);
+    factorValue.textContent = initialFactor.toFixed(2);
+    let currentMorphFactor = initialFactor;
+    let basemapEffectEnabled = basemapToggle ? basemapToggle.checked : true;
+
+    const categories = [
+      { key: "population", label: "Population", color: "#4e79a7" },
+      { key: "households", label: "Households", color: "#f28e2c" },
+    ];
+
+    if (glyphLegendEl) {
+      glyphLegendEl.innerHTML = "";
+      for (const { key, label, color } of categories) {
+        const item = document.createElement("li");
+        item.className = "legend-item";
+        item.innerHTML = `
+          <span class="legend-swatch" style="background: ${color}"></span>
+          <span>${label} <small style="color: #94a3b8; font-size: 0.8rem;">(${key})</small></span>
+        `;
+        glyphLegendEl.appendChild(item);
+      }
+    }
+
+    const createPieChartSVG = (slices, { size = 56, stroke = "white" } = {}) => {
+      const radius = size / 2;
+      const center = radius;
+
+      const total = slices.reduce((sum, slice) => sum + Math.max(0, slice.value), 0);
+      if (!Number.isFinite(total) || total <= 0) {
+        return `<svg width="${size}" height="${size}"></svg>`;
+      }
+
+      let currentAngle = -Math.PI / 2;
+      const segments = slices
+        .filter((slice) => Number.isFinite(slice.value) && slice.value > 0)
+        .map((slice) => {
+          const angle = (slice.value / total) * Math.PI * 2;
+          const endAngle = currentAngle + angle;
+          const largeArc = angle > Math.PI ? 1 : 0;
+          const startX = center + radius * Math.cos(currentAngle);
+          const startY = center + radius * Math.sin(currentAngle);
+          const endX = center + radius * Math.cos(endAngle);
+          const endY = center + radius * Math.sin(endAngle);
+          const path = [
+            `M ${center} ${center}`,
+            `L ${startX.toFixed(2)} ${startY.toFixed(2)}`,
+            `A ${radius} ${radius} 0 ${largeArc} 1 ${endX.toFixed(2)} ${endY.toFixed(2)}`,
+            "Z",
+          ].join(" ");
+          currentAngle = endAngle;
+          return `<path d="${path}" fill="${slice.color}" stroke="${stroke}" stroke-width="1"></path>`;
+        });
+
+      const content = segments.join("");
+      return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">${content}</svg>`;
+    };
+
+    const { group, regularLayer, tweenLayer, cartogramLayer, updateMorphFactor } =
+      await createLeafletMorphLayers({
+        morpher,
+        L,
+        morphFactor: initialFactor,
+        regularStyle: () => ({ color: "#1f77b4", weight: 1, fillOpacity: 0.15 }),
+        cartogramStyle: () => ({ color: "#ff7f0e", weight: 1, fillOpacity: 0.15 }),
+        tweenStyle: () => ({ color: "#22c55e", weight: 2, fillOpacity: 0 }),
+        onEachFeature: (feature, layer) => {
+          layer.bindPopup(`LSOA ${feature.properties.code}`);
+        },
+        basemapLayer,
+        basemapEffect: {
+          blurRange: [0, 14],
+          opacityRange: [1, 0.05],
+          grayscaleRange: [0, 1],
+          isEnabled: () => basemapEffectEnabled,
+        },
+      });
+
+    group.addTo(map);
+
+    const glyphControls = await createLeafletGlyphLayer({
+      morpher,
+      L,
+      map,
+      geometry: "interpolated",
+      morphFactor: initialFactor,
+      pane: "glyphs",
+      drawGlyph: ({ data, feature }) => {
+        const properties = data?.data?.properties ?? feature.properties ?? {};
+        const slices = categories
+          .map(({ key, color }) => ({
+            key,
+            color,
+            value: Number(properties?.[key] ?? 0),
+          }))
+          .filter((slice) => slice.value > 0);
+
+        if (slices.length === 0) {
+          return null;
+        }
+
+        return {
+          html: createPieChartSVG(slices, { size: 52 }),
+          className: "pie-chart-marker",
+          iconSize: [52, 52],
+          iconAnchor: [26, 26],
+        };
+      },
+    });
+
+    const glyphLayer = glyphControls.layer;
+
+    const overlays = {
+      "Regular geography": regularLayer,
+      "Tween morph": tweenLayer,
+      "Cartogram geography": cartogramLayer,
+      "Pie glyphs": glyphLayer,
+    };
+
+    L.control.layers(null, overlays, {
+      collapsed: window.matchMedia("(max-width: 768px)").matches,
+    }).addTo(map);
+
+    map.fitBounds(regularLayer.getBounds(), { padding: [20, 20] });
+
+    regularCountEl.textContent = formatStat(
+      morpher.getRegularFeatureCollection().features.length
+    );
+    cartogramCountEl.textContent = formatStat(
+      morpher.getCartogramFeatureCollection().features.length
+    );
+
+    slider.addEventListener("input", (event) => {
+      const value = Number(event.target.value);
+      factorValue.textContent = value.toFixed(2);
+      currentMorphFactor = value;
+      updateMorphFactor(value);
+      glyphControls.updateGlyphs({ morphFactor: value });
+    });
+
+    if (basemapToggle) {
+      basemapToggle.addEventListener("change", (event) => {
+        basemapEffectEnabled = event.target.checked;
+        updateMorphFactor(currentMorphFactor);
+        glyphControls.updateGlyphs({ morphFactor: currentMorphFactor });
+      });
+    }
+
+    statusEl.textContent = "Ready";
+  } catch (error) {
+    console.error(error);
+    statusEl.textContent = "Something went wrong";
+  }
+}
+
+bootstrap();

package/examples/browser/maplibre/index.html

@@ -0,0 +1,283 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>GeoMorpher · MapLibre Demo</title>
+    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5.8.0/dist/maplibre-gl.css" />
+    <style>
+        :root {
+            color-scheme: light;
+        }
+
+        body {
+            margin: 0;
+            font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+            background: #f8fafc;
+            color: #1f2933;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+
+        header {
+            padding: 1rem 1.5rem;
+            background: white;
+            border-bottom: 1px solid #e2e8f0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            gap: 1rem;
+        }
+
+        header h1 {
+            margin: 0;
+            font-size: 1.25rem;
+        }
+
+        main {
+            flex: 1;
+            display: grid;
+            gap: 1.5rem;
+            padding: 1.5rem;
+            grid-template-columns: minmax(260px, 340px) 1fr;
+        }
+
+        @media (max-width: 960px) {
+            main {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        .panel {
+            background: white;
+            border-radius: 1rem;
+            box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
+            padding: 1.5rem;
+            display: flex;
+            flex-direction: column;
+            gap: 1.25rem;
+        }
+
+        .panel h2 {
+            margin: 0;
+            font-size: 1.1rem;
+        }
+
+        .stat-group {
+            display: grid;
+            gap: 0.75rem;
+        }
+
+        .legend {
+            display: grid;
+            gap: 0.6rem;
+        }
+
+        .legend h3 {
+            margin: 0;
+            font-size: 0.95rem;
+        }
+
+        .legend-item {
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+            font-size: 0.9rem;
+            color: #475569;
+        }
+
+        .legend-swatch {
+            width: 0.9rem;
+            height: 0.9rem;
+            border-radius: 999px;
+            box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.15);
+        }
+
+        .stat {
+            display: flex;
+            justify-content: space-between;
+            font-size: 0.95rem;
+            color: #475569;
+        }
+
+        .stat strong {
+            color: #0f172a;
+            font-weight: 600;
+        }
+
+        .slider {
+            display: grid;
+            gap: 0.5rem;
+        }
+
+        .slider label {
+            font-weight: 600;
+            font-size: 0.95rem;
+        }
+
+        input[type="range"] {
+            width: 100%;
+            accent-color: #4c1d95;
+        }
+
+        .toggle {
+            display: grid;
+            gap: 0.4rem;
+        }
+
+        .toggle label {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-weight: 600;
+            font-size: 0.95rem;
+        }
+
+        .toggle input[type="checkbox"] {
+            accent-color: #4c1d95;
+            width: 1.2rem;
+            height: 1.2rem;
+        }
+
+        .toggle p {
+            margin: 0;
+            color: #64748b;
+            font-size: 0.85rem;
+            line-height: 1.4;
+        }
+
+        .layer-toggles {
+            display: grid;
+            gap: 0.35rem;
+        }
+
+        .layer-toggles label {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-weight: 500;
+            font-size: 0.9rem;
+            color: #334155;
+        }
+
+        code {
+            background: #f1f5f9;
+            border-radius: 0.375rem;
+            padding: 0.125rem 0.375rem;
+        }
+
+        #map {
+            width: 100%;
+            min-height: 70vh;
+            border-radius: 1rem;
+            border: 1px solid #e2e8f0;
+            overflow: hidden;
+        }
+
+        .pie-chart-marker {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 999px;
+            background: rgba(255, 255, 255, 0.75);
+            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
+            pointer-events: none;
+        }
+
+        footer {
+            padding: 0.75rem 1.5rem 1.5rem;
+            font-size: 0.85rem;
+            color: #64748b;
+        }
+    </style>
+    <script type="importmap">
+    {
+      "imports": {
+        "maplibre-gl": "https://esm.sh/maplibre-gl@5.8.0?bundle",
+        "@turf/turf": "https://esm.sh/@turf/turf@6.5.0?bundle",
+    "@turf/helpers": "https://esm.sh/@turf/helpers@6.5.0?bundle",
+        "flubber": "https://esm.sh/flubber@0.4.2?bundle",
+        "lodash/cloneDeep.js": "https://esm.sh/lodash@4.17.21/cloneDeep?bundle",
+        "lodash/keyBy.js": "https://esm.sh/lodash@4.17.21/keyBy?bundle",
+        "lodash/mapValues.js": "https://esm.sh/lodash@4.17.21/mapValues?bundle",
+        "lodash/isEmpty.js": "https://esm.sh/lodash@4.17.21/isEmpty?bundle"
+      }
+    }
+  </script>
+</head>
+
+<body>
+    <header>
+        <h1>GeoMorpher · MapLibre Demo</h1>
+        <span id="status">Loading…</span>
+    </header>
+    <main>
+        <section class="panel">
+            <div>
+                <h2>Controls</h2>
+                <p style="margin-top: 0.35rem; margin-bottom: 1rem; color: #64748b;">
+                    Morph between the regular LSOA geometry and its population-weighted cartogram using MapLibre GL for
+                    rendering.
+                </p>
+            </div>
+            <div class="slider">
+                <label for="morphFactor">
+                    Morph factor: <strong id="factorValue">0.00</strong>
+                </label>
+                <input id="morphFactor" type="range" min="0" max="1" step="0.05" value="0" />
+            </div>
+            <div class="toggle">
+                <label for="basemapEffectToggle">
+                    <input id="basemapEffectToggle" type="checkbox" checked />
+                    Fade basemap in cartogram view
+                </label>
+                <p>
+                    Adjusts raster opacity and brightness via MapLibre paint properties as the morph factor approaches
+                    the cartogram.
+                </p>
+            </div>
+            <div>
+                <h3 style="margin: 0 0 0.35rem; font-size: 0.95rem;">Layer visibility</h3>
+                <div class="layer-toggles">
+                    <label><input id="toggle-regular" type="checkbox" checked /> Regular geography</label>
+                    <label><input id="toggle-interpolated" type="checkbox" checked /> Tween morph</label>
+                    <label><input id="toggle-cartogram" type="checkbox" checked /> Cartogram geography</label>
+                    <label><input id="toggle-glyphs" type="checkbox" checked /> Pie glyphs</label>
+                </div>
+            </div>
+            <div class="legend">
+                <h3>Pie glyph categories</h3>
+                <ul id="glyphLegend" style="list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem;"></ul>
+                <p style="margin: 0; font-size: 0.85rem; color: #64748b;">
+                    Glyphs are rendered with <code>maplibregl.Marker</code> elements and follow the tweened geography.
+                </p>
+            </div>
+            <div class="stat-group">
+                <div class="stat">
+                    <span>Regular features</span>
+                    <strong id="count-regular">–</strong>
+                </div>
+                <div class="stat">
+                    <span>Cartogram features</span>
+                    <strong id="count-cartogram">–</strong>
+                </div>
+                <div class="stat">
+                    <span>Aggregated properties</span>
+                    <strong><code>population</code>, <code>households</code></strong>
+                </div>
+            </div>
+        </section>
+        <section class="panel" style="padding: 0; overflow: hidden;">
+            <div id="map"></div>
+        </section>
+    </main>
+    <footer>
+        Data sourced from <code>data/oxford_lsoas_regular.json</code> and <code>data/oxford_lsoas_cartogram.json</code>.
+        Tiles by OpenStreetMap.
+    </footer>
+    <script type="module" src="./main.js"></script>
+</body>
+
+</html>