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; } } }

Combine basemap layers

JustinFultz

I am trying to combine a imagery layer and a boundaries layer, and I don't want the boundaries layer to show up as an option on the base layers selection bar.

Any ideas?

Find more posts tagged with

Accepted answers

All comments

AYounas

Adi,

All of this code was for older versions of the viewer... In the Flex Viewer now all you have to do to combine two base maps is to give them identical labels in the main config.

from: http://help.arcgis.com/en/webapps/flexviewer/help/index.html#/Main_configuration_file/01m300000018000000/

Hi Robert,

Thanks alot for your detailed answer, actually it was my ignorance, I tried this method which didnt work then I searched on forum and found your code so came up with a question sent earlier. Problem was, order of layers were not right.

One more thing please, I need to replace "more..." button to toggle on and off my one operational layer since I have only one there is no need for more... in my case. Any suggestions on that, please?

RobertScheitlin__GISP

Adi,

All of this code was for older versions of the viewer... In the Flex Viewer now all you have to do to combine two base maps is to give them identical labels in the main config.

Using basemaps and operational layers <basemaps> - List of map services used as a base map in the Viewer. Only one base map can be visible at a time, but a base map can consist of more than one layer. To create hybrid base map, set the name property to be the same on all the layers in the basemaps group that should make up the hybrid base map. When multiple map services are listed in <basemaps>, the Map Switcher widget can be used to enable end users to switch between them. <basemaps> has one child tag that can be repeated multiple times:
<layer> - This is a map service displayed as a layer in the Viewer. See Layer tag topic for information on its attributes.

from: http://help.arcgis.com/en/webapps/flexviewer/help/index.html#/Main_configuration_file/01m300000018000000/

AYounas

Hi Robert,

I tried your code below but on the line "addLayerToMap(configData.basemaps, false);" it says only one argument requires and if I use one argument it wont do anything and places comes in the "more.." list. Any suggestion to fix this please? (I require to join two basemap layers exactly as mentioned by you.)

Thanking you in advance,

Adi

Justin,

Here is what needs to be done for FlexViewer 2.x

MapManager.mxml is the only file to be changed and two functions need to be altered.

This code is developed for combining two basemap layers called "Places" and "Aerial":

            //basemap menu clicked
            private function basemapMenuClicked(event:AppEvent):void
            {
                var id:String = event.data as String;
                var configBasemaps:Array = configData.basemaps;

                if (id)
                {
     var BaseMapChoosen:String = "";
     var lyrNames:Layer = map.getLayer("Places");
                    for (var i:Number = 0; i < configBasemaps.length; i++)
                    {
                        var label:String = configBasemaps.label;
                        var lyr:Layer = map.getLayer(label);
                        if (lyr != null)
                        {
                            if (configBasemaps.id == id)
                            {
                                lyr.visible = true;
        BaseMapChoosen = configBasemaps.label
                            }
                            else
                            {
                                lyr.visible = false;
                            }
       if(lyrNames){
        if(BaseMapChoosen == "Aerial")
        {
         lyrNames.visible = true; 
        }else{
         lyrNames.visible = false;
        }
       }
                        }
                    }
                }
            }

            private function configBasemaps():void
            {
                var i:int = 0;
                for (i = 0; i < configData.basemaps.length; i++)
                {
                    if (i == configData.basemaps.length - 1)
                    {
                        map.addEventListener(MapEvent.LAYER_ADD, layerloadComplete);
                    }
                    addLayerToMap(configData.basemaps, false);
                }
    // remove the excluded basemaps
    var shownBaseMaps:Array = configData.basemaps.slice();
    for (var n:Number = 0; n < shownBaseMaps.length; n++)
    {
     if (shownBaseMaps.label == "Places")
      shownBaseMaps.splice(n, 1);
    }
    configData.basemaps = shownBaseMaps;
            }

JustinFultz

With that easy of an answer, my question now seems a little dumb. Sorry for my complete lack of knowledge regarding this tool. I'm slowly learning though.

Thanks for all of your help! I'm sure you'll hear from me again soon.

RobertScheitlin__GISP

Justin,

Sure, just add then to the MapSwitcherWidget.xml

JustinFultz

Robert,

I have noticed one other small issue with this code. While it does remove the layers from the basemap list, it adds the layer to the operational map list in the "More" dropdown box. Is there an easy way to remove it from that list.

Thanks!

JustinFultz

Perfect!!!

You're the man, Robert!

RobertScheitlin__GISP

Justin,

See if this works.

            private function configBasemaps():void
            {
                var i:int = 0;
                for (i = 0; i < configData.basemaps.length; i++)
                {
                    if (i == configData.basemaps.length - 1)
                    {
                        map.addEventListener(MapEvent.LAYER_ADD, layerloadComplete);
                    }
                    addLayerToMap(configData.basemaps, false);
                }
    // remove the excluded basemaps
    var excludeBaseMaps:Array = ["Footprint Boundaries","Imagery Boundaries"];
    var shownBaseMaps:Array = configData.basemaps.slice();
    for (var n:Number = 0; n < shownBaseMaps.length; n++)
    {      
     for (var j:Number = 0; j < excludeBaseMaps.length; j++)
     {
      if (shownBaseMaps.label == excludeBaseMaps)
      {
       shownBaseMaps.splice(n, 1);
      }
     }
    }
    configData.basemaps = shownBaseMaps;
            }

JustinFultz

I have the following Basemap Layers:
Streetmap, Aerial, Topo, SPP Footprint, Footprint Boundaries, Imagery Boundaries

I don't want to see the boundary layers buttons on the menu.

I successfully made the following pairings by modifying the code you sent, and these are the only pairings I want to see:
Aerial to Imagery Boundaries
SPP Footprint to Footprint Boundaries

I am able to remove one of the boundary layer buttons at a time with:

if (shownBaseMaps.label == "Footprint Boundaries")
      shownBaseMaps.splice(n, 1);

When I add the Imagery Boundaries layer as shown below, the Footprints Boundaries button shows up again, the Footprint Boundary layer isn't visible in the map, and the Imagery Boundary button disapears.

if (shownBaseMaps.label == "Footprint Boundaries"|| shownBaseMaps.label== "Imagery Boundaries")
      shownBaseMaps.splice(n, 1);

Thanks for being patient with me!

RobertScheitlin__GISP

Justin,

I can probably help if I have more exact details. Like the label of each service and the label of the service it is to be paired with and if that is the only layer it should ever appear with etc.

JustinFultz

That is what I assumed would be the answer, but when I do that it adds "Footprint Boundaries" back to the list, removes "Imagery Boundaries", and removes the visibility of Footprint Boundaries in the map.

The reason I need two boundary layers is that I have a dark (Aerial) background and a light background (SPP footprint). ESRI has seperate services created for dark/light backgrounds to improve visibility. Please let me know if you think of something.

Thanks!

RobertScheitlin__GISP

Justin,

Not really sure I understand what you are doing here but maybe the answer you are looking for is

if (shownBaseMaps.label == "Footprint Boundaries" || shownBaseMaps.label == "your other layer")

JustinFultz

Thanks Robert! I'm almost there! I'm sure this last part is something easy, but I am actually using two boundary layers (one for imagery the other for a light background). I have managed to get both layers where I want them by just copying and pasting some of your code, but things get screwy when I try to do the same with the portion of code that would remove the second boundary layer(blue lettering below). Could you help me with that?

Thanks so much for all of your help!!!!

private function basemapMenuClicked(event:AppEvent):void
            {
                var id:String = event.data as String;
                var configBasemaps:Array = configData.basemaps;        
    if(id)
    {
     var BaseMapChoosen:String = "";
     var lyrNames:Layer =map.getLayer("Footprint Boundaries")
    }
     for (var i:Number = 0; i < configBasemaps.length; i++)
     {
      var label:String = configBasemaps.label;
      var lyr:Layer = map.getLayer(label);
      if (lyr != null)
      {
       if (configBasemaps.id == id)
       {
        lyr.visible = true;
               BaseMapChoosen = configBasemaps.label
       }
       else
       {
        lyr.visible = false;
       }
            if(lyrNames){
             if(BaseMapChoosen == "SPP Footprint")
             {
              lyrNames.visible = true;
             }else{
              lyrNames.visible= false;
             }
            }
      }
     }
     if(id)
     {
      var BaseMapChoosen:String = "";
      var lyrNames:Layer =map.getLayer("Imagery Boundaries")
     }
     for (var i:Number = 0; i < configBasemaps.length; i++)
     {
      var label:String = configBasemaps.label;
      var lyr:Layer = map.getLayer(label);
      if (lyr != null)
      {
       if (configBasemaps.id == id)
       {
        lyr.visible = true;
        BaseMapChoosen = configBasemaps.label
       }
       else
       {
        lyr.visible = false;
       }
       if(lyrNames){
        if(BaseMapChoosen == "Aerial")
        {
         lyrNames.visible = true;
        }else{
         lyrNames.visible= false;
        }
       }
      }
     }
   }
   private function configBasemaps():void
   {
    var i:int = 0;
    for (i = 0; i < configData.basemaps.length; i++)
    {
     if (i == configData.basemaps.length - 1)
     {
      map.addEventListener(MapEvent.LAYER_ADD, layerloadComplete);
     }
     addLayerToMap(configData.basemaps, false);
    }
    // remove the excluded basemaps
    var shownBaseMaps:Array = configData.basemaps.slice();
    for (var n:Number = 0; n < shownBaseMaps.length; n++)
    {
     if (shownBaseMaps.label == "Footprint Boundaries")
      shownBaseMaps.splice(n, 1);   }
    
    configData.basemaps = shownBaseMaps;
   }

Screenshot 2026-07-17 112717.png

Screenshot 2026-07-17 113935.png

RobertScheitlin__GISP

            //basemap menu clicked
            private function basemapMenuClicked(event:AppEvent):void
            {
                var id:String = event.data as String;
                var configBasemaps:Array = configData.basemaps;

                if (id)
                {
     var BaseMapChoosen:String = "";
     var lyrNames:Layer = map.getLayer("Places");
                    for (var i:Number = 0; i < configBasemaps.length; i++)
                    {
                        var label:String = configBasemaps.label;
                        var lyr:Layer = map.getLayer(label);
                        if (lyr != null)
                        {
                            if (configBasemaps.id == id)
                            {
                                lyr.visible = true;
        BaseMapChoosen = configBasemaps.label
                            }
                            else
                            {
                                lyr.visible = false;
                            }
       if(lyrNames){
        if(BaseMapChoosen == "Aerial")
        {
         lyrNames.visible = true; 
        }else{
         lyrNames.visible = false;
        }
       }
                        }
                    }
                }
            }

            private function configBasemaps():void
            {
                var i:int = 0;
                for (i = 0; i < configData.basemaps.length; i++)
                {
                    if (i == configData.basemaps.length - 1)
                    {
                        map.addEventListener(MapEvent.LAYER_ADD, layerloadComplete);
                    }
                    addLayerToMap(configData.basemaps, false);
                }
    // remove the excluded basemaps
    var shownBaseMaps:Array = configData.basemaps.slice();
    for (var n:Number = 0; n < shownBaseMaps.length; n++)
    {
     if (shownBaseMaps.label == "Places")
      shownBaseMaps.splice(n, 1);
    }
    configData.basemaps = shownBaseMaps;
            }

JustinFultz

Here is my code. I was able to get the boundaries to overlap the imagery, but when I add this code to the map:basemaps section of the ConfigManager.as, it removes the "Places" layer, and the Aerial and Topo layers are no longer visible when selected.

var configMap:Array = [];      
   var maplayerList:XMLList = configXML.map.basemaps.mapservice;      
   basemapGroup = configXML.map.basemaps.@group;
   if (maplayerList.length() < 1)
   {
    maplayerList = configXML.map.basemaps.layer;
   }
   
   
   for (i = 0; i < maplayerList.length(); i++)
    if(maplayerList.@label != "Places")
    {
   {
    configMap.push(getLayerObject(maplayerList, i, false, bingKey));
   }
    }
   configData.basemaps = configMap;

Any help is appreciated.

jessneuner_0-1623269079431.png

JustinFultz

I have tried all of these suggestions with the out of the box flex viewer and can't get it to work.

How do you know the layer id? Is there a imagery service available that already has state boundaries on it. That would allow me to get around this particular issue.

ThomasSchultz

I just did this same thing in the new viewer, and it's really quite similar to the old one. The changes to MapManager.mxml are identical. However, for ConfigManager.as find the basemaps section and add the conditional that loads services into the menu that do not equal the name of the service you want to exclude. See code:

//================================================
            //map:basemaps
            //================================================
            var configMap:Array = [];
            var mapserviceList:XMLList = configXML.map.basemaps.mapservice;
            basemapGroup = configXML.map.basemaps.@group;
            for (i = 0; i < mapserviceList.length(); i++)
            if(mapserviceList.@label != "Coastal Imagery")
   {
    {
                 configMap.push(getLayerObject(mapserviceList, i, false));
             }
   }
            configData.basemaps = configMap;

JustinFultz

has anyone accomplished this in the new flex viewer app?

JasonLevine

Sorry, I should have mentioned that this was for an older version of the Sample Viewer. The function in the MapManager.mxml would be the same as the one in the new sample viewer, but the configmanager.as files are pretty different.

Look for the map:basemaps area in the configmanager.as. This is where you would tell the map to hide the base maps. Perhaps someone with stronger coding skills can help you with this.

JustinFultz

I am still struggling. What version of the flex viewer app are you using. I don't even have a getBasemapMenuItems function in the conficManager.as file(flex app 2.1 using flash builder 4). Also, how do you know what id # to assign each layer. Is the 1st one in the list 1, and so on?

Sorry I'm so clueless about this stuff.

JasonLevine

There are basically three parts to it; I'll show you a working example from one of my sites. This has the Imagery Streets and Labels layers drawing over the imagery:

1) Add the layers to your config.xml (note the order; the layers you want to draw on top go on the bottom):

 <basemaps menu="menuMap">      
   <mapservice label="Street Map" type="tiled" visible="true" alpha="1" icon="com/esri/solutions/flexviewer/assets/images/icons/i_highway.png">http://10.2.8.73/ArcGIS/rest/services/Base_Map/Streets_Map/MapServer</mapservice&gt;
   <mapservice label="Imagery" type="dynamic" visible="false" alpha="1" icon="com/esri/solutions/flexviewer/assets/images/icons/i_shuttle.png">http://10.2.8.73/ArcGIS/rest/services/Base_Map/Imagery/MapServer</mapservice&gt;         
   <mapservice label="Imagery Streets" type="tiled" visible="false" alpha=".5" icon="com/esri/solutions/flexviewer/assets/images/icons/i_shuttle.png">http://10.2.8.73/ArcGIS/rest/services/Base_Map/Imagery_Street_Map/MapServer</mapservice&gt;             
   <mapservice label="Labels" type="tiled" visible="false" alpha="1" icon="com/esri/solutions/flexviewer/assets/images/icons/i_shuttle.png">http://10.2.8.73/ArcGIS/rest/services/Base_Map/Labels/MapServer</mapservice&gt;             
 </basemaps>

2) tweak the basemapMenuClicked function in the mapmanager.mxml:

private function basemapMenuClicked(event:AppEvent):void
      {
       var id:String = event.data as String;
       var configBasemaps:Array = configData.configBasemaps;
       for (var i:Number = 0; i < configBasemaps.length; i++)
       { 
        var label:String  = configBasemaps.label;
        var lyr:Layer = map.getLayer(label);
        if (lyr != null)
        {
         if (configBasemaps.id == id)
         {
          lyr.visible = true;
         }
         else
         {
          lyr.visible = false;
         }
        }
        var lyrNames:Layer = map.getLayer("Labels");
        if (id == "1")
        {
         lyrNames.visible = true;
        }
        else
        {
         lyrNames.visible = false;
        }
        
        var lyrNames2:Layer = map.getLayer("Imagery Streets");
        if (id == "1")
        {
         lyrNames2.visible = true;
        }
        else
        {
         lyrNames2.visible = false;
        }
        }
      }

3) tweak the getBasemapMenuItems function in the configmanager.as file:

  private function getBasemapMenuItems(xmlList:XMLList):Array
  {
   var menuItems:Array = [];
   if (xmlList.length() > 1){
    for (var i:int = 0; i < xmlList.length(); i++){
     if(xmlList.@label != "Labels" && xmlList.@label != "Imagery Streets"){
     //if(xmlList.@label != "Labels"){
      var itemLabel:String = xmlList.@label;
      var itemIcon:String = xmlList.@icon;
      var itemValue:String = i.toString();
      var menuItem:Object = 
      {
       id: i,
       label: itemLabel,
       icon: itemIcon,
       value: itemValue,
       action: "basemap"
      }
      menuItems.push(menuItem);
     }
    }
       }
   return menuItems;
  }

Hopefully this simplifies it a little for you,
Jason

JustinFultz

Thanks Jason!

I looked at that thread and was unable to get it to work for me. I am able to make the new layers display over all basemaps, but it also shows up in the basemap list. I couldn't get the last line of code in Robert's post to work, and I couldn't follow exactly what you did in your code (I am as far from a programer as it gets). I was hoping there might be an easier way in the new viewer.

I'll keep pluggin away.

JasonLevine

Hi Justin,
I did this not too long ago myself. Follow this thread and you should be able to find the code you need:

http://forums.esri.com/Thread.asp?c=158&f=2421&t=285978&mc=17#888041

-Jason

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.