Add single check box to handle layer visibility?

[MicahTaylor]

I have downloaded the template "Storytelling Map Tour 2.2.6" and I was wondering how, and in which script, do I write a code to allow the user to check and uncheck layer visibility.  The web map (sitting in My Content ArcGIS online) contains 2 layers.  1 of flood locations, and 1 of flood imagery.  I want a single check box (on the header somewhere) to allow the user to remove the imagery from view if they wish to do so. I am VERY novice to JS and HTML, but I have managed to customize everything in the index.html code so far. Thanks!

[GregoryL_Azou]

You can customize Map Tour do that quickly by using the MapTour developer extension events and this sample Toggle layer visibility | ArcGIS API for JavaScript.

I recommend you add your code in index.html near the end of the file like this

[MicahTaylor]

Ok , its starting to make a little bit of sense....but do I need to add the "require(["dojo/topic"], function(topic) {....code code code etc..." to the end of my code?  Mine stops with "Core.init(new MainView());"

My code looks like this..

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

                                 var urlParams = Helper.getUrlParams();

                                 var isInBuilderMode = urlParams.edit != null || urlParams.fromScratch != null || urlParams.fromscratch != null || urlParams.fromGallery != null;

                                 if (isInBuilderMode) {

                                     require(["storymaps/builder/Builder", "storymaps/maptour/builder/BuilderView"], function(Builder, BuilderView) {

                                         Core.init(new MainView(), Builder);

                                         Builder.init(Core, new BuilderView());

                                     });

                                 }

                                 else

                                     Core.init(new MainView());

                             });

                             ###Should I put the above mentioned code here?

                         }

                    );

                });

             }

        </script>

    </body>

</html>

[GregoryL_Azou]

Yes, plenty of way to add custom code but adding it there is what we recommend.

Good luck!

[MicahTaylor]

Apparently the instructions in the "Toggle layer visibility | ArcGIS API for JavaScript." use a map service.  However, I have loaded all my points onto a web map from a CSV file and my imagery seperately.  The Story Map Configurable Template references this map by its ID (at the end of the URL).  MyContent section has the following...

1. A web map containing both imagery and points

2.A feature layer of the points

3.A CSV file (from which the points were derived)

Then I added the Developer Events section ...as well as the code to handle checkbox layer visibility from the "Toggle layer visibility" API sample...

My question is....How can I target the imagery layer for the checkbox visibility if I only have an ArcGIS online webmap...and NOT a Map service?  The sample only provides a place to put a URL to a Dynamic Map Service...not just a web map with some layers in it.

Thanks again, and sorry to be so much trouble. I just feel like im very close to having my first real application done (without much code experience) and I hate for this layer visibility check box to be the only thing missing.

[MicahTaylor]

Also, the check box does show up in my Web App, but it doesnt function.

[GregoryL_Azou]

Hi Micah,

You are on the good track but yes the sample does not use webmap. I can't find one that have just what you need but anyway Map Journal is doing some work for you and you can access the loaded map using app.map

Then do as in the sample

find the layer using app.map.getLayer("layer id")

add the checbox

do .setVisible onclick

to get the layers id, look at app.map.layerIds and app.map.graphicsLayerIds

[MicahTaylor · Accepted solution]

IT WORKED!!!...Took me a month , but I figured it out. Thanks so much for your help.

Here is what I did, just for reference...

I added two buttons in the index.html like this....

<button id="imgbtnon">Flood Imagery</button>

<button id="imgbtnoff">Streets</button>

Then I added this underlined code to the bottom of the inex.html like this....

if (isInBuilderMode) {

                                     require(["storymaps/builder/Builder", "storymaps/maptour/builder/BuilderView"], function(Builder, BuilderView) {

                                         Core.init(new MainView(), Builder);

                                         Builder.init(Core, new BuilderView());

                                     });

                                 }

                                 else

                                     Core.init(new MainView());

                                    function addListeners(){

                                         document.getElementById('imgbtnon').onclick = function(){

                                             var DesiredLayer = app.map.getLayer(app.map.layerIds[1]);

                                             DesiredLayer.setVisibility(true);  

                                         }

                                         document.getElementById('imgbtnoff').onclick = function(){

                                             var DesiredLayer = app.map.getLayer(app.map.layerIds[1]);

                                             DesiredLayer.setVisibility(false);  

                                         }

                                     }

                                     window.onload = addListeners;

Works in Story Map Tour!