Story Map customization

526
2
06-27-2017 06:41 AM
NolwennLE_POULAIN
New Contributor

Hi everyone, I'm trying to customize my story map and I would like to have some titles on the image of my main part (it's like legends + credits). I succeed in doing this but when I have an action on the same page which change the content of the main part, I don't want this title anymore (I embeded some applications).

I've tried this but ithe last part doesn't work because they said that my object doesn't have an id However I find this code on a story map which is working properly

define(["dojo/topic","dijit/Dialog"], function(topic,Dialog){

/*
* Custom Javascript to be executed while the application is initializing goes here
*/

// The application is ready
topic.subscribe("tpl-ready", function(){

/*
* Custom Javascript to be executed when the application is ready goes here
*/

// Creation of the Splash Page (Introduction of the web site)
var splashPage = new Dialog ({
title: '<b><font size="6"><p align="center">Welcome on board!</p></font></b>',
content: '<font size="3"><center><p></br>Here you can find all information about <b>ship traffic and its impact on marine mammals </b>in Canadian seas.</br></br><b>Begin the story </b>to understand the issue and see what have been done and could be done to <b>protect marine mammals</b>.</p></font><br/><img src="https://c1.staticflickr.com/1/330/19577290930_4f8d8d5fbb_b.jpg" width="450px" height= "300px" alt="Jumping Killer Whales" /></br></br><font size="2.5" color="#B0C4DE"><p>Jumping Killer Whales</p></center></font>',
style: 'width: 600px; height: 600px;'
});
splashPage.show();

});

// change title text based on section number
topic.subscribe("story-load-section", function(index){
console.log("The section", index, "is being loaded");
var mainStageTitle = document.getElementById("mainStageTitle");
switch(index) {
case 0:
mainStageTitle.innerHTML = "Humpback and calf, off the Revillagigedo Islands, Mexico, Reinhard Dirscher";
break;
case 1:
mainStageTitle.innerHTML = "Vehicles, air pollution and human health, Union of concerned scientists";
break;
case 2:
mainStageTitle.innerHTML = "Preventing ocean pollution";
break;
case 3:
mainStageTitle.innerHTML = "Ship traffic";
break;
case 4:
mainStageTitle.innerHTML = "Ship traffic, exactEarth";
break;
case 5:
mainStageTitle.innerHTML = "Orca Whales, Lauren McWhinnie";
break;
case 6:
mainStageTitle.innerHTML = "Johnstone Strait, East side of Vancouver Island, Leh Smallshaw";
break;
case 7:
mainStageTitle.innerHTML = "Humpback Whales, Lauren McWhinnie";
break;
case 8:
mainStageTitle.innerHTML = "Tanker going through Boundary Pass as seen from Tilly Point, Leh Smallshaw";
break;
default:
mainStageTitle.innerHTML = "Mapping Distribution";
}
});

/// When a main stage action that load a new media or reconfigure the current media is performed
topic.subscribe("story-perform-action-media", function(media){
console.log("A Main Stage action is performed:", media);
console.log("Media ID:", document.media.webmap.id);
var mainStageTitle = document.getElementById("mainStageTitle");

//Section 7 Come on and discover! (index 6)
if (document.media.webmap.id == "0cdeb6acf68e431986537721d0913ec2") {
mainStageTitle.innerHTML = "";
};
if (document.media.webmap.id == "15b4845510c6434a9bdcd0e5174048a6") {
mainStageTitle.innerHTML = "";
};
if (document.media.webmap.id == "f26425e3a7c6498ba5ef11cfb9817f12") {
mainStageTitle.innerHTML = "";
};

});
});

Could someone help me ? My story map is: https://nemes-story.surge.sh

Thanks

Nolwenn

0 Kudos
2 Replies
AdrianWelsh
MVP Notable Contributor

Nolwenn,

That is a very nice story map! In order to get more visibility to this post, it would be best to move it to the https://community.esri.com/community/gis/web-gis/storymaps?sr=search&searchId=e19bc9aa-3841-45c0-aac...‌ space instead of the GeoNet Help space.

0 Kudos
NolwennLE_POULAIN
New Contributor

Oups you're right I've not noticed that thank you!!

0 Kudos