From 78f7e9520271b7040b74a5958d592cf7ce6a378e Mon Sep 17 00:00:00 2001
From: Rework-Digital <liam@reworkdigital.com.au>
Date: Mon, 9 Feb 2026 18:14:33 +1100
Subject: [PATCH 1/2] Implement Map Story widget loading functionality

Added loadMapStoryWidget function to load the Map Story widget script dynamically, with handling for Mapbox token and data container attributes.
---
 assets/js/component.loader.js | 41 +++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/assets/js/component.loader.js b/assets/js/component.loader.js
index 0a8c558..98105ad 100644
--- a/assets/js/component.loader.js
+++ b/assets/js/component.loader.js
@@ -38,6 +38,42 @@
         document.head.appendChild(s);
       });
 
+    // --- Map-Story Widget Helper --
+    const loadMapStoryWidget = () =>
+      new Promise((resolve, reject) => {
+      const container = document.querySelector("#map-story");
+      if (!container) return resolve();
+
+      const src =
+        "https://static.solcast.com/2025-global-interactive-story/js/map-story-widget.iife.js";
+
+      // Prevent double-injection
+      if (document.querySelector(`script[src="${src}"]`)) {
+        return resolve();
+      }
+
+      const mapboxToken = container.getAttribute("component-data-mapbox-token");
+      const dataContainer = container.getAttribute("component-data-container");
+
+      const s = document.createElement("script");
+      s.src = src;
+      s.async = true;
+
+      if (dataContainer) {
+        s.setAttribute("data-container", dataContainer);
+      }
+
+      if (mapboxToken) {
+        s.setAttribute("data-mapbox-token", mapboxToken);
+      }
+
+      s.onload = resolve;
+      s.onerror = () => reject(new Error("Failed to load Map Story widget"));
+
+      document.head.appendChild(s);
+    });
+  
+
     // Function to allow loading of External JS
     const loadExternalScript = (src, label) => {
       loadExternalScript.cache ??= new Map();
@@ -267,6 +303,11 @@
     if (has(".embed-graph")) {
       tasks.push(loadModule("component.dw-graph.js", "graph"));
     }
+       
+    // ---------- Map-box Solar Anomaly ----------
+    if (has('[data-script-loader="component.map-box"]')) {
+      tasks.push(loadMapStoryWidget());
+    }
 
     // ---------- Per-page modules ----------
 

From aacca791f526ae834df0517a85af86af9c3ec4a0 Mon Sep 17 00:00:00 2001
From: Rework-Digital <liam@reworkdigital.com.au>
Date: Mon, 9 Feb 2026 18:28:46 +1100
Subject: [PATCH 2/2] Refactor loadMapStoryWidget for caching and error
 handling

Refactor loadMapStoryWidget to cache script loading and improve error handling.
---
 assets/js/component.loader.js | 73 ++++++++++++++++++++++-------------
 1 file changed, 46 insertions(+), 27 deletions(-)

diff --git a/assets/js/component.loader.js b/assets/js/component.loader.js
index 98105ad..9f481aa 100644
--- a/assets/js/component.loader.js
+++ b/assets/js/component.loader.js
@@ -38,41 +38,60 @@
         document.head.appendChild(s);
       });
 
-    // --- Map-Story Widget Helper --
-    const loadMapStoryWidget = () =>
-      new Promise((resolve, reject) => {
-      const container = document.querySelector("#map-story");
-      if (!container) return resolve();
+    // --- Map-Story Widget Helper ---
+    const loadMapStoryWidget = () => {
+      loadMapStoryWidget.cache ??= null;
+      if (loadMapStoryWidget.cache) return loadMapStoryWidget.cache;
 
-      const src =
-        "https://static.solcast.com/2025-global-interactive-story/js/map-story-widget.iife.js";
+      loadMapStoryWidget.cache = new Promise((resolve, reject) => {
+        const container = document.querySelector('[data-script-loader="component.map-box"]');
+        if (!container) return resolve();
 
-      // Prevent double-injection
-      if (document.querySelector(`script[src="${src}"]`)) {
-        return resolve();
-      }
+        const src =
+          "https://static.solcast.com/2025-global-interactive-story/js/map-story-widget.iife.js";
 
-      const mapboxToken = container.getAttribute("component-data-mapbox-token");
-      const dataContainer = container.getAttribute("component-data-container");
+        // Prevent double-injection
+        if (document.querySelector(`script[src="${src}"]`)) {
+          return resolve();
+        }
 
-      const s = document.createElement("script");
-      s.src = src;
-      s.async = true;
+        const mapboxToken = container.getAttribute("component-data-mapbox-token");
 
-      if (dataContainer) {
-        s.setAttribute("data-container", dataContainer);
-      }
+        // Fill in component-data-container from the dynamically set ID
+        if (container.id) {
+          container.setAttribute("component-data-container", `#${container.id}`);
+        }
 
-      if (mapboxToken) {
-        s.setAttribute("data-mapbox-token", mapboxToken);
-      }
+        const dataContainer = container.getAttribute("component-data-container");
+
+        if (!mapboxToken || !dataContainer) {
+          console.warn("[MapStory] Missing mapbox token or container selector", {
+            mapboxToken,
+            dataContainer,
+          });
+        }
+
+        const s = document.createElement("script");
+        s.src = src;
+        s.async = true;
+
+        if (dataContainer) {
+          s.setAttribute("data-container", dataContainer);
+        }
 
-      s.onload = resolve;
-      s.onerror = () => reject(new Error("Failed to load Map Story widget"));
+        if (mapboxToken) {
+          s.setAttribute("data-mapbox-token", mapboxToken);
+        }
+
+        s.onload = resolve;
+        s.onerror = () => reject(new Error("Failed to load Map Story widget"));
+
+        document.head.appendChild(s);
+      });
+
+      return loadMapStoryWidget.cache;
+    };
 
-      document.head.appendChild(s);
-    });
-  
 
     // Function to allow loading of External JS
     const loadExternalScript = (src, label) => {