Story Map customization

NolwennLE_POULAIN — Tue, 27 Jun 2017 13:41:15 GMT

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: 'Welcome on board!',
content: '<center>Here you can find all information about ship traffic and its impact on marine mammals in Canadian seas.Begin the story to understand the issue and see what have been done and could be done to protect marine mammals. <img src="https://c1.staticflickr.com/1/330/19577290930_4f8d8d5fbb_b.jpg" width="450px" height= "300px" alt="Jumping Killer Whales" />Jumping Killer Whales</center>',
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

Re: Story Map customization

AdrianWelsh — Tue, 27 Jun 2017 19:04:38 GMT

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-aaca-d7d68e944dcd&searchIndex=0‌ space instead of the GeoNet Help space.

Re: Story Map customization

NolwennLE_POULAIN — Tue, 27 Jun 2017 19:27:35 GMT

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

topic Story Map customization in ArcGIS StoryMaps Questions

Story Map customization

Re: Story Map customization

Re: Story Map customization