Story Map Journal Customization

NolwennLE_POULAIN — Tue, 27 Jun 2017 19:29:21 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 Journal Customization

RupertEssinger — Wed, 28 Jun 2017 00:03:15 GMT

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-apps:map-journal

Re: Story Map Journal Customization

NolwennLE_POULAIN — Wed, 28 Jun 2017 14:34:54 GMT

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

Re: Story Map Journal Customization

StephenSylvia — Wed, 28 Jun 2017 14:45:33 GMT

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 text with maps and oth….

Re: Story Map Journal Customization

BrandonPrice — Fri, 17 Nov 2017 23:19:19 GMT

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

topic Re: Story Map Journal Customization in Classic Esri Story Maps Questions

Story Map Journal Customization

Re: Story Map Journal Customization

Re: Story Map Journal Customization

Re: Story Map Journal Customization

Re: Story Map Journal Customization