topic Re: Combine basemap layers in ArcGIS API for Flex Questions

Combine basemap layers

JustinFultz — Mon, 22 Nov 2010 14:40:56 GMT

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?

Re: Combine basemap layers

JasonLevine — Mon, 22 Nov 2010 15:36:25 GMT

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

Re: Combine basemap layers

JustinFultz — Mon, 22 Nov 2010 15:40:28 GMT

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.

Re: Combine basemap layers

JasonLevine — Sat, 11 Dec 2021 12:23:57 GMT

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>
   <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>         
   <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>             
   <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>             
 </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

Re: Combine basemap layers

JustinFultz — Mon, 22 Nov 2010 19:59:52 GMT

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.

Re: Combine basemap layers

JasonLevine — Mon, 22 Nov 2010 20:38:59 GMT

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.

Re: Combine basemap layers

JustinFultz — Tue, 23 Nov 2010 13:55:29 GMT

has anyone accomplished this in the new flex viewer app?

Re: Combine basemap layers

ThomasSchultz — Tue, 23 Nov 2010 14:57:16 GMT

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;

Re: Combine basemap layers

JustinFultz — Tue, 23 Nov 2010 15:54:54 GMT

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.

Re: Combine basemap layers

JustinFultz — Sat, 11 Dec 2021 12:23:59 GMT

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.

Re: Combine basemap layers

RobertScheitlin__GISP — Sat, 11 Dec 2021 12:24:02 GMT

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

Re: Combine basemap layers

JustinFultz — Sun, 12 Dec 2021 16:15:06 GMT

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

Re: Combine basemap layers

RobertScheitlin__GISP — Sat, 11 Dec 2021 12:24:05 GMT

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")

Re: Combine basemap layers

JustinFultz — Mon, 29 Nov 2010 20:25:01 GMT

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!

Re: Combine basemap layers

RobertScheitlin__GISP — Mon, 29 Nov 2010 20:28:08 GMT

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.

Re: Combine basemap layers

JustinFultz — Sat, 11 Dec 2021 12:24:07 GMT

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!

Re: Combine basemap layers

RobertScheitlin__GISP — Sat, 11 Dec 2021 12:24:10 GMT

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

Re: Combine basemap layers

JustinFultz — Mon, 29 Nov 2010 21:33:28 GMT

Perfect!!!

You're the man, Robert!

Re: Combine basemap layers

JustinFultz — Wed, 01 Dec 2010 12:30:19 GMT

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!

Re: Combine basemap layers

RobertScheitlin__GISP — Wed, 01 Dec 2010 12:56:08 GMT

Justin,

Sure, just add then to the MapSwitcherWidget.xml