topic Re: Sample Map Viewer 1.3 Base Map Switcher Buttons in ArcGIS API for Flex Questions

Sample Map Viewer 1.3 Base Map Switcher Buttons

JoshCalhoun — Thu, 16 Sep 2010 16:34:38 GMT

Hi everyone,

I am looking for a way to add the Base Map Switcher buttons to my SMV 1.3 app, like the ones you see in the 2.0 Version. Does anybody out there have any idea how to do this?

I think this will be a lot easier for my users to just click on a button and the corresponding basemap will pop up rather than searching for the map in a drop-down menu.

Any help will be greatly appreciated.

thanks

Josh Calhoun

Re: Sample Map Viewer 1.3 Base Map Switcher Buttons

MattiasEkström — Sun, 12 Dec 2021 00:09:38 GMT

Assuming you mean the Sample Flex Viewer 1.3 i might have a solution.
I've just added a basemap fader tool according to this thread http://forums.esri.com/Thread.asp?c=158&f=2421&t=286723
I tested to modify that code to just containing buttons and it worked,
in the index.mxml you add the code:

<mx:HBox left="500" top="5">
  <mx:Button id="map1Button" label="Street Map" click="setBasemap('Street Map')" />
  <mx:Button id="map2Button" label="Satellite Map" click="setBasemap('Satellite Map')" />
 </mx:HBox>

just below </SiteContainer>

and then you add the function:

private function setBasemap(basemap:String):void
   {
    var lyr:Layer = SiteContainer.getInstance().controller.map.getLayer("Street Map");
    var lyr2:Layer = SiteContainer.getInstance().controller.map.getLayer("Satellite Map");
    if (basemap == "Street Map"){
     lyr.visible = true;
     lyr2.visible = false;
    }else if (basemap == "Satellite Map"){
     lyr.visible = false;
     lyr2.visible = true;
    }
    
   }

after the handleKeyDown function

There probably is a better solution, but this was the first thing on my mind. And it works 🙂
One problem with this solution is that the basemaps layer names is hard-coded.

Re: Sample Map Viewer 1.3 Base Map Switcher Buttons

JoshCalhoun — Fri, 17 Sep 2010 12:59:19 GMT

Mattias,

Thank you very much. It works great. You have true GIS muscle.

Josh Calhoun
City of Chattanooga, TN

Re: Sample Map Viewer 1.3 Base Map Switcher Buttons

JoshCalhoun — Mon, 20 Sep 2010 12:14:02 GMT

Ok,,, I was able to toggle between two maps with no problem but now my boss wants three map to toggle between. I tried adding a third map and I used a case statement to switch between maps. Now I can not switch any map and the map I had at the bottom of the list shows up in the map. I can still switch maps in the "menumap" menu but I can not toggle back and fourth between maps. Below is my code.

<mx:Application xmlns:mx   ="http://www.adobe.com/2006/mxml"
             xmlns    ="com.esri.solutions.flexviewer.*"
             layout    ="absolute"
             applicationComplete ="registerGlobalKeyHandler()"
             styleName   ="plain"
             backgroundColor ="#6E6E6E"
             >



<mx:Script>
<![CDATA[

   import com.esri.solutions.flexviewer.AppEvent;
   import com.esri.ags.layers.Layer;
   import mx.managers.IDragManager;
   import mx.managers.HistoryManager;

   private var iDragManager:IDragManager;
   private var hist:HistoryManager;

   private function registerGlobalKeyHandler() :void
   {
    stage.addEventListener(KeyboardEvent.KEY_DOWN, handleKeyDown);

   }


   private function handleKeyDown(event:KeyboardEvent) :void
   {
    if ((event.shiftKey) && (event.keyCode == 27))
    {
     SiteContainer.dispatchEvent(new AppEvent(AppEvent.SET_MAP_NAVIGATION, false, false, null));
    }
   }


      private function setBasemap(basemap:String):void
   {
    var lyr:Layer = SiteContainer.getInstance().controller.map.getLayer("Leaf Collection Map");
    var lyr2:Layer = SiteContainer.getInstance().controller.map.getLayer("Recycle Collection Map");
    var lyr3:Layer = SiteContainer.getInstance().controller.map.getLayer("Garbage Collection Map");
    switch(basemap)
     {
      case lyr:Layer:
       {
       lyr.visible = true;
       lyr2.visible = false;
       lyr3.visible = false;
       break;
       }


      case lyr2:Layer:
       {
       lyr.visible = false;
       lyr2.visible = true;
       lyr3.visible = false;
       break;
       }


      case lyr3:Layer:
       {
       lyr.visible = false;
       lyr2.visible = false;
       lyr3.visible = true;
       break;
       }
     }
   }

]]>
</mx:Script>

<SiteContainer id="container">
    <configManager> <ConfigManager/> </configManager>
       <uiManager>     <UIManager/>     </uiManager>
       <controller>    <Controller x="20" y="20"/>    </controller>
       <dataManager>   <DataManager/>   </dataManager>
       <widgetManager> <WidgetManagerDocked/> </widgetManager>

       <mapManager> <MapManager/> </mapManager>
</SiteContainer>

<mx:HBox left="500" top="5">
<mx:Button id="map1Button" label="Leaf Collection Map" click="setBasemap('Leaf Collection Map')" labelPlacement="left" width="261" fontSize="17">
   <mx:icon>@Embed(source='com/esri/solutions/flexviewer/assets/images/icons/fall_leaf.png')</mx:icon>
</mx:Button>
<mx:Button id="map2Button" label="Recycle Collection Map" click="setBasemap('Recycle Collection Map')" />
<mx:Button id="map3Button" label="Garbage Collection Map" click="setBasemap('Garbage Collection Map')" />
</mx:HBox>

</mx:Application>

Re: Sample Map Viewer 1.3 Base Map Switcher Buttons

RobertScheitlin__GISP — Sun, 12 Dec 2021 00:09:41 GMT

Josh,

Try this instead. The mistake you were making is you were trying to compare a string to a layer object and they would never equal.

private function setBasemap(basemap:String):void
            {
                var lyr:Layer = SiteContainer.getInstance().controller.map.getLayer("Leaf Collection Map");
                var lyr2:Layer = SiteContainer.getInstance().controller.map.getLayer("Recycle Collection Map");
                var lyr3:Layer = SiteContainer.getInstance().controller.map.getLayer("Garbage Collection Map");
                switch(basemap)
                {
                    case "Leaf Collection Map":
                    {
                        lyr.visible = true;
                        lyr2.visible = false;
                        lyr3.visible = false;
                        break;
                    }
                    case "Recycle Collection Map":
                    {
                        lyr.visible = false;
                        lyr2.visible = true;
                        lyr3.visible = false;
                        break;
                    }
                    case "Garbage Collection Map":
                    {
                        lyr.visible = false;
                        lyr2.visible = false;
                        lyr3.visible = true;
                        break;
                    }
                }
            }

Re: Sample Map Viewer 1.3 Base Map Switcher Buttons

FrankTrevino — Mon, 25 Oct 2010 14:55:55 GMT

Hello,
Not sure if this has been answered, but I have a imagery basemap that I can activate by clicking it from the shortcut menu, my question is there a way to turn it off and just show my dynamic map service. Maybe by clicking on the basemap again to turn it off. Tried using the buttons, but I like keeping everything in the shortcutmenu bar. I basically would like to toggle on/off the basemap.

Thanks.