Story Map Journal Customization

1460
4
06-27-2017 12:29 PM
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
4 Replies
RupertEssinger
Frequent Contributor

Here are a couple of other approaches to Story Map Journal cover page / splash page addition via customization:
https://storymaps.arcgis.com/en/gallery/#s=0&q=cover%20page&md=storymaps-format:customized_storymaps... 

0 Kudos
NolwennLE_POULAIN
New Contributor

Yeah thanks Rupert it's nice of you but the problem is not on the splash plage it's working so Ok but the legends/credits I've put on my main image I want them to disappear when the main page change due to an action and this doesn't work

0 Kudos
StephenSylvia
Esri Regular Contributor

It looks like you are only listening to the "story-load-section" events which only fires when the section changes and not when the main stage changes. For that you'll want to use the "story-perform-action-media" lifecycle event to know when a main stage action is called. Here's some more documentation about the lifecycle methods: GitHub - Esri/storymap-journal: The Story Map Journal is ideal when you want to combine narrative te....

0 Kudos
BrandonPrice
Occasional Contributor

Hi Nolwenn,

I am trying to do the same thing in a storymap series. I want to have buttons on the tabs with maps only.

Thanks,
Brandon

0 Kudos