AnsweredAssumed Answered

Story Map Journal Customization

Question asked by nolwenn6707 on Jun 27, 2017
Latest reply on Nov 17, 2017 by brandon.price

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

Outcomes