Add single check box to handle layer visibility?

3700
7
Jump to solution
04-01-2015 07:26 AM
MicahTaylor
Occasional Contributor III

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!

1 Solution

Accepted Solutions
MicahTaylor
Occasional Contributor III

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!

View solution in original post

7 Replies
GregoryL_Azou
Regular Contributor II

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
Occasional Contributor III

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>

Reply
0 Kudos
GregoryL_Azou
Regular Contributor II

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

Good luck!

MicahTaylor
Occasional Contributor III

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)

webmapID.JPG

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

DevEvents.JPG

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.

Reply
0 Kudos
MicahTaylor
Occasional Contributor III

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

Reply
0 Kudos
GregoryL_Azou
Regular Contributor II

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
Occasional Contributor III

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!

View solution in original post