Is there a story map template that allows a Splash page?

AntoineBartholomew · ‎09-30-2016

I would like to incorporate a Splash Page into a story map. How can I do this? Is there a story map template that allows Splash pages?

StephenSylvia · ‎10-05-2016

Antoine,

Yes, the dijit dialog is one of the easier ways to add a simple slash page to your story, however, you do have a few errors in your code. Here's some changes to your code to make it work. Notice how I was also able to write html right in the content attribute to add more then just text. If you're using images, you should add a height and width to the style attribute so the splash page stays centered on the page

require(["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
    */
  
    var splashPage = new Dialog ({
      title: 'Splash Page',
      content: '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam vel in rem rerum saepe quidem est, ratione molestias a harum!</p><br /><img src="https://images.unsplash.com/photo-1469521669194-babb45599def?dpr=1&auto=format&crop=entropy&fit=crop..." alt="Photo of parks" />',
      style: 'width: 430px; height: 436px;'
    });

    splashPage.show();
  });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

There is also a new dojo widget theme that will provide a nicer look if you make these two change:

Change the body class to calcite (map-journal-storytelling-template-js/index.html at master · Esri/map-journal-storytelling-template-j... )

<body class="calcite">‍

And change the theme CSS file in app > main-config.js (map-journal-storytelling-template-js/main-config.js at master · Esri/map-journal-storytelling-templa... )

loadCSS(app.pathJSAPI + "esri/themes/calcite/dijit/calcite.css", true);     ‍

This code will produce:

View solution in original post

DanielShaffer2 · ‎10-04-2016

The Story Map Journal has a built-in splash page as a widget. The widget Icon has a word bubble with "Hi!" in it. Not sure about the other templates. Have not looked. But a reasonable bet at least one more has a splash page built in.

DanielShaffer2 · ‎10-05-2016

Antoine, I'm sorry. I was mistaken. The built-in splash widget is in the basic WebApp Builder template. Sorry for the confusion.

OwenGeo · ‎10-05-2016

Hi Antoine,

Unfortunately, none of our current story map apps have splash pages (Cascade and Crowdsource have cover pages, but I don't think that is what you are looking for).

If you need your story map to have a splash page you can either download the code (GitHub link below) and customize it to add one, or you can embed a story map in an iframe of another web page that has a splash screen.

Esri GitHub | Open Source and Example Projects from the Esri Developer Platform

Would you mind sharing some information about why you'd like to include a splash page so we can use it to consider adding that feature for a future release?

Owen

Owen Evans
Lead Product Engineer | StoryMaps

AntoineBartholomew · ‎10-05-2016

Hello Owen

Thank you for the response.

We are working within the Map Journal template and we are interested in adding a splash page similar to what ESRI has in the web app builder. This is important because we are developing web apps and in this case creating a story map for classified data and we would like to have an initial page so we can call attention to the level of classification for the data within the story map, before the story map data is seen.

From my research on this topic, I was thinking I could create a Modal box within the Map Journal's index.html file...can you confirm that this approach would/could work

The code would be something like this...

require(["dojo/topic", "dijit/Dialog", "dojo/domRedy!"], function(topic, Dialog) {

myDialog = new Dialog ({

title: "My Dialog",

content: "Text Content",

style: "width: 360px"

console.log("My Dialog is initializing");

Or should this code go else where in the indx.html file? I saw this eample here: https://community.esri.com/thread/178244

topic.subscribe("tpl-ready", function(){
/*
* Custom Javascript to be executed when the application is ready goes here
*/

console.log("Map Journal is ready");
});

StephenSylvia · ‎10-05-2016

Antoine,

Yes, the dijit dialog is one of the easier ways to add a simple slash page to your story, however, you do have a few errors in your code. Here's some changes to your code to make it work. Notice how I was also able to write html right in the content attribute to add more then just text. If you're using images, you should add a height and width to the style attribute so the splash page stays centered on the page

require(["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
    */
  
    var splashPage = new Dialog ({
      title: 'Splash Page',
      content: '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam vel in rem rerum saepe quidem est, ratione molestias a harum!</p><br /><img src="https://images.unsplash.com/photo-1469521669194-babb45599def?dpr=1&auto=format&crop=entropy&fit=crop..." alt="Photo of parks" />',
      style: 'width: 430px; height: 436px;'
    });

    splashPage.show();
  });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

There is also a new dojo widget theme that will provide a nicer look if you make these two change:

Change the body class to calcite (map-journal-storytelling-template-js/index.html at master · Esri/map-journal-storytelling-template-j... )

<body class="calcite">‍

And change the theme CSS file in app > main-config.js (map-journal-storytelling-template-js/main-config.js at master · Esri/map-journal-storytelling-templa... )

loadCSS(app.pathJSAPI + "esri/themes/calcite/dijit/calcite.css", true);     ‍

This code will produce:

BrandonPrice · ‎05-10-2017

Can this also apply to the story map series theme? The index.html looks different than than the story journal.

Thanks,

Brandon

AntoineBartholomew · ‎05-12-2017

Thank you for the help @ Stephen Sylvia

AntoineBartholomew · ‎05-12-2017

Thank you for the help @ Stephen Sylvia