Sample Map Viewer 1.3 Base Map Switcher Buttons

[JoshCalhoun]

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

[MattiasEkström]

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.

[JoshCalhoun]

Mattias,

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

Josh Calhoun
City of Chattanooga, TN

[JoshCalhoun]

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

<!--
/**
* The site container has six major components:
*  - ConfigManager: loads configuration file (config.xml), parse it and submit to event bus.
*  - Controller   : holds branding UI elements and application navigation items such as menus.
*  - DataManager  : manages data generated during a user session.
*  - WidgetManager: manages widgets during the user session.
*  - MapManager   : manages map(s) such as base map and live maps used during the user session.
*/
-->

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

[RobertScheitlin__GISP]

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

[FrankTrevino]

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.