execute a function in another file

[roialgavish]

Hello,

I am trying to add buttons that will change the tour point layer in the storytelling templates. To do so I am trying to add a button that will send a parameter and activate a function in another js file. (I am not sure for a 100% that this is the right way, but I do think that this may be the way).

I am trying that this button:

<button onclick="myFunction()">button check</button>;            

<script>

function myFunction() {

          require(["storymaps/maptour/core/MainView"],function(MainView){

               MainView.webmapLoaded();

          });

};

</script>

will go to the mainView js file and activate the webmapLoded function.

The webmapLoaded function is written like this:

this.webmapLoaded = function()

{function code};

And it is sitting inside a:

return function MainView()

{function code}

I know this may be a basic knowledge that I am missing, I am trying to teach myself programing and JavaScript.

And I thank you very much for your help.

[GregoryL_Azou · Accepted solution]

Hi Roi,

You are in the good direction but you can't use MainView like this.

Instead in index.html, replace the following lines

else
  Core.init(new MainView());

With

else {
  window.mainView = new MainView();
  Core.init(window.mainView);
}

This store a reference to mainView in an object that you can manipulate later in your function

function myFunction() {
  window.mainView.webmapLoaded();
};

This will reload the data. Then I guess you have to pass your parameter to specify the layer to be used.

[roialgavish]

Hi Gregory,

Again thanks allot, it worked grate.

One more thing is there a way to change the layout in the developer mode to be integrated? The developer mode ignores this config option.

[GregoryL_Azou]

Hi,

Great, glad to hear.

All options in index.html are disabled in development mode when you are using a webmap id.

If you were using an app id, that configuration would be respected. It is best practice to use an app id, for that just build a tour in ArcGIS Online by sharing your webmap, set the layout setting to integrated and use that app id.

The options in index.html will be active when you 'build' the application to optimize it for deployment, see https://github.com/Esri/map-tour-storytelling-template-js#how-to-build-application-from-the-source-c...

No matter if you use webmap or app id, make sure to do that so you get the best performance.