TabContainer ArcGIS API for JavaScript

Question

I am a novice programmer, but I know enough to be dangerous. Here's my issue and hopefully someone knows the answer.

I am developing an application with 4 tabs on the left and a map from 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 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....

Does someone have any idea how to do this?

Answer 1

I have worked with the ArcGIS JavaScript API with the dojo framework and with arcgis-server previously, but I mainly worked with a single map. As far as JavaScript goes there are many ways to do this, unfortunately knowing what I know about the ArcGIS JS API I think based on a quick thought, while not efficient is to use another JS framework to remove the div dealing with the map entirely once you listen for the onclick event and then unfortunately load it again based on a click event. Either that or possibly implementing some kind of hide div for the map so that whichever one is clicked on takes the top-most z-index. Again, probably not the best solution.