Skip to content

Implement Map Story widget loading functionality #69

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Rework-Digital wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Implement Map Story widget loading functionality #69

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
78f7e95
Implement Map Story widget loading functionality
Rework-Digital Feb 9, 2026
aacca79
Refactor loadMapStoryWidget for caching and error handling
Rework-Digital Feb 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions assets/js/component.loader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,61 @@
document.head.appendChild(s);
});

// --- Map-Story Widget Helper ---
const loadMapStoryWidget = () => {
loadMapStoryWidget.cache ??= null;
if (loadMapStoryWidget.cache) return loadMapStoryWidget.cache;

loadMapStoryWidget.cache = new Promise((resolve, reject) => {
const container = document.querySelector('[data-script-loader="component.map-box"]');
if (!container) return resolve();

const src =
"https://static.solcast.com/2025-global-interactive-story/js/map-story-widget.iife.js";
Copy link
Contributor

@alex-solcast alex-solcast Feb 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@GF-D6 @Rework-Digital this might work fine, but remember about the strict dynamic directive and how loading scripts needs a nonce:

static/assets/js/gtm.js

Line 25 in 30061c0

j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=


// Prevent double-injection
if (document.querySelector(`script[src="${src}"]`)) {
return resolve();
}

const mapboxToken = container.getAttribute("component-data-mapbox-token");

// Fill in component-data-container from the dynamically set ID
if (container.id) {
container.setAttribute("component-data-container", `#${container.id}`);
}

const dataContainer = container.getAttribute("component-data-container");

if (!mapboxToken || !dataContainer) {
Copy link
Contributor

@GF-D6 GF-D6 Feb 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The widget expects both to be present or it will reject.

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);
}

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;
};


// Function to allow loading of External JS
const loadExternalScript = (src, label) => {
loadExternalScript.cache ??= new Map();
Expand Down Expand Up @@ -267,6 +322,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 ----------

Expand Down