geo-morpher 0.1.2 → 0.1.3

package/examples/maplibre/indonesia/main.js

@@ -5,8 +5,8 @@ import {
   createMapLibreCustomGlyphLayer,
   parseCSV,
   WGS84Projection,
-} from "../../../src/index.js";
-import { flattenPositions } from "../../../src/adapters/shared/geometry.js";
+} from "../../src/index.js";
+import { flattenPositions } from "../../src/adapters/shared/geometry.js";
 
 const metrics = [
   {
@@ -90,12 +90,18 @@ const tooltipEl = document.getElementById("tooltip");
 const statusEl = document.getElementById("status");
 const slider = document.getElementById("morphFactor");
 const factorValue = document.getElementById("factorValue");
+const playButton = document.getElementById("play-button");
+const playIcon = document.getElementById("play-icon");
+const pauseIcon = document.getElementById("pause-icon");
 const glyphLegendEl = document.getElementById("glyphLegend");
 const regularToggle = document.getElementById("toggle-regular");
 const interpolatedToggle = document.getElementById("toggle-interpolated");
 const cartogramToggle = document.getElementById("toggle-cartogram");
 const glyphToggle = document.getElementById("toggle-glyphs");
 let hasBootstrapped = false;
+let isPlaying = false;
+let animationFrameId = null;
+let animationDirection = 1; // 1 for forward, -1 for backward
 
 // comparison mode state --------------------------------------------------
 // when a province/glyph is clicked we compute an outline drawing function
@@ -374,7 +380,9 @@ async function bootstrap() {
   hasBootstrapped = true;
 
   try {
-    statusEl.textContent = "Loading data…";
+    if (statusEl) {
+      statusEl.textContent = "Loading data…";
+    }
 
     const [regularGeoJSON, cartogramCSV, literacyCSV] = await Promise.all([
       fetchJSON("indonesia/indonesia_provice_boundary.geojson"),
@@ -551,17 +559,19 @@ async function bootstrap() {
         if (features.length > 0) {
           const feature = features[0];
           
-          if (hoveredStateId !== null) {
+          if (hoveredStateId !== null && hoveredStateId !== undefined) {
             map.setFeatureState(
               { source: morphControls.sourceIds.interpolated, id: hoveredStateId },
               { hover: false }
             );
           }
           hoveredStateId = feature.id;
-          map.setFeatureState(
-            { source: morphControls.sourceIds.interpolated, id: hoveredStateId },
-            { hover: true }
-          );
+          if (hoveredStateId !== null && hoveredStateId !== undefined) {
+            map.setFeatureState(
+              { source: morphControls.sourceIds.interpolated, id: hoveredStateId },
+              { hover: true }
+            );
+          }
 
           // Use featureId or properties.id to join with morpher data
           const id = feature.properties.id || feature.properties.ID;
@@ -588,7 +598,7 @@ async function bootstrap() {
         if (map?.getCanvas) {
           map.getCanvas().style.cursor = "";
         }
-        if (hoveredStateId !== null) {
+        if (hoveredStateId !== null && hoveredStateId !== undefined) {
           map.setFeatureState(
             { source: morphControls.sourceIds.interpolated, id: hoveredStateId },
             { hover: false }
@@ -635,11 +645,11 @@ async function bootstrap() {
         map.fitBounds(bounds, { padding: 48, linear: true, duration: 0 });
       }
 
-      slider.addEventListener("input", (event) => {
-        const value = Number(event.target.value);
+      const updateUIForFactor = (value) => {
+        slider.value = value;
         factorValue.textContent = value.toFixed(2);
         morphControls.updateMorphFactor(value);
-        
+
         // Update OSM opacity
         map.setPaintProperty("osm", "raster-opacity", 0.2 * (1 - value));
 
@@ -652,13 +662,70 @@ async function bootstrap() {
         if (!glyphToggle || glyphToggle.checked) {
           glyphControls.updateGlyphs({ morphFactor: value });
         }
+      };
+
+      slider.addEventListener("input", (event) => {
+        const value = Number(event.target.value);
+        if (isPlaying) {
+          stopAnimation();
+        }
+        updateUIForFactor(value);
       });
 
-      statusEl.textContent = "Ready";
+      const animate = () => {
+        if (!isPlaying) return;
+
+        let currentValue = Number(slider.value);
+        const step = 0.005;
+
+        currentValue += step * animationDirection;
+
+        if (currentValue >= 1) {
+          currentValue = 1;
+          animationDirection = -1;
+        } else if (currentValue <= 0) {
+          currentValue = 0;
+          animationDirection = 1;
+        }
+
+        updateUIForFactor(currentValue);
+        animationFrameId = requestAnimationFrame(animate);
+      };
+
+      const startAnimation = () => {
+        isPlaying = true;
+        playIcon.style.display = "none";
+        pauseIcon.style.display = "block";
+        animate();
+      };
+
+      const stopAnimation = () => {
+        isPlaying = false;
+        playIcon.style.display = "block";
+        pauseIcon.style.display = "none";
+        if (animationFrameId) {
+          cancelAnimationFrame(animationFrameId);
+          animationFrameId = null;
+        }
+      };
+
+      playButton.addEventListener("click", () => {
+        if (isPlaying) {
+          stopAnimation();
+        } else {
+          startAnimation();
+        }
+      });
+
+      if (statusEl) {
+        statusEl.textContent = "Ready";
+      }
     });
   } catch (error) {
     console.error(error);
-    if (statusEl) statusEl.textContent = "Something went wrong";
+    if (statusEl) {
+      statusEl.textContent = "Something went wrong";
+    }
     hasBootstrapped = false;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "geo-morpher",
-    "version": "0.1.2",
+    "version": "0.1.3",
     "description": "GeoJSON morphing utilities with MapLibre-first adapter and Leaflet compatibility",
     "type": "module",
     "main": "src/index.js",