Help on story map customization

1748
11
Jump to solution
06-15-2017 10:53 AM
NolwennLE_POULAIN
New Contributor

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 :

<script type="text/javascript">
require(["dojo/topic"], function(topic) {
/*
* Custom Javascript to be executed while the application is initializing goes here
*/

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

0 Kudos
1 Solution

Accepted Solutions
StephenSylvia
Esri Regular Contributor

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.

View solution in original post

0 Kudos
11 Replies
StephenSylvia
Esri Regular Contributor

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.

NolwennLE_POULAIN
New Contributor

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..." alt="Photo of parks" />',
style: 'width: 430px; height: 436px;'
});

splashPage.show();


});
});

0 Kudos
StephenSylvia
Esri Regular Contributor

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

0 Kudos
NolwennLE_POULAIN
New Contributor

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

Internship - Google Drive 

0 Kudos
StephenSylvia
Esri Regular Contributor

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.

0 Kudos
NolwennLE_POULAIN
New Contributor

oh yeah sorry I forgot to share the story..

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

0 Kudos
StephenSylvia
Esri Regular Contributor

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?

0 Kudos
NolwennLE_POULAIN
New Contributor

0 Kudos
StephenSylvia
Esri Regular Contributor

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.

0 Kudos