topic Re: Help on story map customization in Classic Esri Story Maps Questions

Help on story map customization

NolwennLE_POULAIN — Thu, 15 Jun 2017 17:53:54 GMT

Hi everyone,

I'm trying to customize my story map and I'm meeting some troubles..

I've dowload the code on GitHub and I would like to put some legend on the images that are on the main stage

I've tried this :

console.log("Map Journal is initializing");

// The application is ready
topic.subscribe("tpl-ready", function(){
/*
* Custom Javascript to be executed when the application is ready goes here
*/
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 = "South Resident Killer Whales, NL";
break;
case 1:
mainStageTitle.innerHTML = "Beluga, BC";
break;
default:
mainStageTitle.innerHTML = "Marine Mammals";
}
});

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

</script>

but anytime an error occured and say(index):340 Uncaught ReferenceError: require is not defined

I don't understant because I've follow some examples which were doing the same..

If someone could help me

Thanks,

Nolwenn

Re: Help on story map customization

StephenSylvia — Fri, 16 Jun 2017 14:28:54 GMT

The "require" method that is not defined because that method comes from the dojo framework. If you add this code to the index.html file, you are running it before dojo has been loaded. A few releases ago, we had to move where dojo was being loaded. You can now add this custom code to the "custom-scripts" file that gets loaded after dojo is available: storymap-journal/custom-scripts.js at master · Esri/storymap-journal · GitHub.

Re: Help on story map customization

NolwennLE_POULAIN — Fri, 16 Jun 2017 16:21:58 GMT

Ok so I've put everything on the custom scripts like you said

There is no longer any error but nothing works..

I've even try with an example find on this blog to be sure but nothing

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
*/

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&w=400&q=80&cs=tinysrgb" alt="Photo of parks" />',
style: 'width: 430px; height: 436px;'
});

splashPage.show();

});
});

Re: Help on story map customization

StephenSylvia — Fri, 16 Jun 2017 17:20:25 GMT

Can you share a link to your app so I can help you debug?

Re: Help on story map customization

NolwennLE_POULAIN — Fri, 16 Jun 2017 17:27:17 GMT

This is the link of my application and it's files

Internship - Google Drive

Re: Help on story map customization

StephenSylvia — Fri, 16 Jun 2017 18:31:48 GMT

Nolwenn, are you running the app from a web server? I just downloaded the code from your google drive and installed it my web server. You app was private so I just switched out the appid and everything worked as I would expected. The splash dialog also popped up as soon as the app was loaded as well.

Re: Help on story map customization

NolwennLE_POULAIN — Fri, 16 Jun 2017 19:08:18 GMT

oh yeah sorry I forgot to share the story..

I'm running the app on wamp server is it wrong ?

Re: Help on story map customization

StephenSylvia — Fri, 16 Jun 2017 19:51:06 GMT

A wamp server should work; I'm running it off apache as well. Can you post a screenshot of what you see when you load the app, including the url?

Re: Help on story map customization

NolwennLE_POULAIN — Fri, 16 Jun 2017 19:57:48 GMT

Re: Help on story map customization

StephenSylvia — Fri, 16 Jun 2017 20:03:58 GMT

Just to verify, you have the exact same code on your wamp server as you pasted on GoogleDrive? I'm not sure why you wouldn't see modal example? Can you try hosting it on Surge (a free hosting provider): https://developerscorner.storymaps.arcgis.com/host-your-story-maps-for-free-with-surge-8bddcc4cd580 and posting a link. Don't forget to share it if you can.

Re: Help on story map customization

NolwennLE_POULAIN — Fri, 16 Jun 2017 21:28:12 GMT

Yes it was the exact same code!

You save me it works with surge!!

Ship Trafic Impact on Marine Mammals

I don't understand why it doesn't work on wamp but I will continue with surge it's much better!

Thanks a lot!!

Re: Help on story map customization

NolwennLE_POULAIN — Fri, 16 Jun 2017 21:44:28 GMT

Ship Trafic Impact on Marine Mammals

change!