{"id":26,"date":"2026-02-17T15:42:47","date_gmt":"2026-02-17T15:42:47","guid":{"rendered":"https:\/\/digiheritage.co.uk\/IHT\/?page_id=26"},"modified":"2026-04-02T16:20:21","modified_gmt":"2026-04-02T16:20:21","slug":"storymap-interactive-js","status":"publish","type":"page","link":"https:\/\/digiheritage.co.uk\/IHT\/index.php\/storymap-interactive-js\/","title":{"rendered":"StoryMap &#8211; interactive JS"},"content":{"rendered":"<link rel=\"stylesheet\" href=\"https:\/\/cdn.knightlab.com\/libs\/storymapjs\/latest\/css\/storymap.css\">\r\n<script src=\"https:\/\/cdn.knightlab.com\/libs\/storymapjs\/latest\/js\/storymap-min.js\"><\/script>\r\n\r\n\r\n\r\n<div class=\"wp-block-group storymap-breakout has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\r\n\r\n<div class=\"storymap-container\">\r\n\r\n    <!-- MOBILE DROPDOWN -->\r\n    <div class=\"mobile-menu-wrapper\">\r\n        <select id=\"storymap-mobile-menu\"><\/select>\r\n    <\/div>\r\n\r\n    <!-- MAP -->\r\n    <div id=\"storymap\" style=\"height: 640px\"><\/div>\r\n\r\n    <!-- DESKTOP SIDEBAR MENU -->\r\n    <aside id=\"storymap-menu\">\r\n        <!-- Menu items go here -->\r\n    <\/aside>\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<script>\r\n\/\/document.addEventListener(\"DOMContentLoaded\", function() {\r\ndocument.addEventListener('DOMContentLoaded', async () => {\r\n    var options = {\r\n        language: 'en',\r\n        calculate_zoom: true\r\n    };\r\n\r\n    \/\/ Load JSON manually (for the map and menu)\r\n    const response = await fetch('\/IHT\/storymapjs\/published.json');\r\n    const data = await response.json();\r\n\r\n    \/\/ Create the StoryMap\r\n    window.smInstance = new VCO.StoryMap('storymap', data, options);\r\n    console.log(\"storymap instance:\", window.smInstance);\r\n\r\n    \/\/ Build the menu (from the same JSON)\r\n    const slides = data.storymap.slides;\r\n    const menu = document.getElementById('storymap-menu');\r\n    const mobileMenu = document.getElementById('storymap-mobile-menu');\r\n    slides.forEach((slide, index) => {\r\n        if (index === 0) return; \/\/ skip the intro\/slide 1\r\n        const btn = document.createElement('button');\r\n        btn.textContent = slide.text.headline || `Slide ${index+1}`;\r\n        btn.addEventListener('click', () => {\r\n            const slider = window.smInstance._storyslider;\r\n            if (slider && typeof slider.goTo === \"function\") {\r\n                slider.goTo(index);\r\n            } else {\r\n                console.error(\"StoryMap slider not ready\");\r\n            }\r\n        });\r\n        menu.appendChild(btn);\r\n\r\n        const opt = document.createElement('option');\r\n        opt.value = index\r\n        opt.textContent = slide.text.headline || `Slide ${index+1}`;\r\n        mobileMenu.appendChild(opt);\r\n\r\n    });\r\n\r\n    \/\/ On dropdown change\r\n    mobileMenu.addEventListener('change', () => {\r\n        const index = Number(mobileMenu.value);\r\n        if (!isNaN(index)) {\r\n            window.smInstance._storyslider.goTo(index);\r\n        }\r\n    });\r\n\r\n    \/\/Keep map updated and formatted\r\n    window.onresize = function() {\r\n        window.smInstance.updateDisplay();\r\n    };\r\n});\r\n<\/script>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-26","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/digiheritage.co.uk\/IHT\/index.php\/wp-json\/wp\/v2\/pages\/26","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digiheritage.co.uk\/IHT\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digiheritage.co.uk\/IHT\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digiheritage.co.uk\/IHT\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digiheritage.co.uk\/IHT\/index.php\/wp-json\/wp\/v2\/comments?post=26"}],"version-history":[{"count":33,"href":"https:\/\/digiheritage.co.uk\/IHT\/index.php\/wp-json\/wp\/v2\/pages\/26\/revisions"}],"predecessor-version":[{"id":148,"href":"https:\/\/digiheritage.co.uk\/IHT\/index.php\/wp-json\/wp\/v2\/pages\/26\/revisions\/148"}],"wp:attachment":[{"href":"https:\/\/digiheritage.co.uk\/IHT\/index.php\/wp-json\/wp\/v2\/media?parent=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}