nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

TabContainer event

DougKampe

I am developing an application with 4 tabs on the left and a map served by ArcGIS Online(AGOL) on the right. What I want to do is when tab1 is active (focused), I want the webmap to be webmap1. When the user clicks tab2 I want the webmap to change to webmap2, and so on.

This is seemingly a simple task, but I cannot find enough documentation for a novice like me to understand how to make this happen. Here's a bit of code starting the initial map that works correctly:

var webmap = "e1cff258e4674ab1985e2303106b0cc8"; arcgisUtils.createMap(webmap,"mapDiv").then(function (response){ map = response.map; });

What if want is to make myvariable webmap dependent upon the active tab:

var webmap = (if tab1.active){"e1cff258e4674ab1985e2303106b0cc8"} (else if tab2.active){"3dea9137545e41eb8d4877ac8970294f"} etc. etc. etc....

Can anyone help me with this?
Thanks

Find more posts tagged with

Accepted answers

DougKampe

I found the solution, but it took a lot of research. First, thanks for all who responded.

Here's the code:
                tabContainer.watch("selectedChildWidget", function(name,oval,nval){ //tabContainer is the id of my TabContainer

                if (nval.id == "popTab"){
                    createMap("e1cff258e4674ab1985e2303106b0cc8");
                }
                else if(nval.id == "ageTab"){
                    createMap("3dea9137545e41eb8d4877ac8970294f");
                }
                else if(nval.id =="raceTab"){
                    createMap("b3ab092a57c14fab9c8b9cc697e25eaf");
                }http://forums.arcgis.com/images/icons/icon11.png
                else{createMap("374ea990475d4db0ad0397543c9539af");}
            });

I discovered I didn't need to do the onshow/onclick etc. event because the watch() method already does this. This is actually in the dojo documentation, but not being a seasoned programmer makes it easy to not understand what is being shown in front of you.

Now, when someone clicks on my population tab with the id of (popTab) it will fire my createMap function. The problem I was running before I successfully implemented watch() was every time I hit a tab it redrew the map even if the map was already present.

Thanks again and hopefully someone will find this helpful.
Doug
dkampe@howardcountymd.gov

All comments

kenbuja

Doug,

You should click the check mark on your post to help those who are searching for an answer on this question.

DougKampe

evtguy

This may not be ideal but how about creating four map divs (one for each ArcGIS Online webmap) and then use CSS or the esri.show() / esri.hide() methods to manage which web map is visible? You'll have to sync the map extents, of course, but that can be done using the extent-change event.

BenFousek

The onShow event for the tab itself is what you want. Tab container doesn't have an event to return the "active" tab and/or to let you know that a tab has been changed. It does have myTabs.selectedChildWidget, which is the selected tab (literally the widget).

on(tab1, 'show', function() {
  //do stuff
});

on(tab2, 'show', function() {
  //do stuff
});

//and so on

Then perhaps call a function to handle the web map creation.

on(tab3, 'show', function() {
  switchWebMap('WEB_MAP_ID');
});

switchWebMap function(id) {
  //do stuff
}

Sorry, I don't know much about ago web maps, but hope this helps with your tabs.

Have you been to the dojo Reference Guide and the API Documentation. Most everything you need for developing with dojo.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.