<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:esri="http://www.esri.com/2008/ags" viewSourceURL="srcview/index.html">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import com.esri.ags.geometry.MapPoint;
import com.esri.ags.layers.Layer;
import com.esri.ags.layers.TiledMapServiceLayer;
import mx.events.FlexEvent;
import spark.filters.ColorMatrixFilter;
[Bindable]private var activeLayer:Layer;
private var rLum : Number = 0.3086;
private var gLum : Number = 0.6094;
private var bLum : Number = 0.0820;
private var bwMatrix: ColorMatrixFilter = new spark.filters.ColorMatrixFilter(
[rLum, gLum, bLum, 0, 0,
rLum, gLum, bLum, 0, 0,
rLum, gLum, bLum, 0, 0,
0, 0, 0, 1, 0]);
private function applyTheme(name:String):void
{
activeLayer = myMap.getLayer(mapBB.selectedItem);
switch (name)
{
case "Default" :
clearThemes();
break;
case "Dark":
applyDarkTheme();
break;
case "Light":
applyLightTheme();
break;
case "Midnight Blue":
applyMidnightBlueTheme();
break;
}
}
private function clearThemes():void
{
activeLayer.filters = [];
activeLayer.transform.colorTransform = new ColorTransform();
}
private function applyDarkTheme():void
{
clearThemes();
activeLayer.filters = [bwMatrix];
activeLayer.transform.colorTransform = new ColorTransform(-1,-1,-1,1,256,256,256,0);
}
private function applyLightTheme():void
{
clearThemes();
activeLayer.filters = [bwMatrix];
}
private function applyMidnightBlueTheme():void
{
clearThemes();
activeLayer.transform.colorTransform = new ColorTransform(-1,-1,-1,1,256,256,256,0);
}
private function layerShowHandler(event:FlexEvent):void
{
// update the LODs/zoomslider to use/show the levels for the selected base map
var tiledLayer:TiledMapServiceLayer = event.target as TiledMapServiceLayer;
myMap.lods = tiledLayer.tileInfo.lods;
}
protected function colorBB_clickHandler(event:MouseEvent):void
{
applyTheme(event.target.label);
}
]]>
</fx:Script>
<esri:Map id="myMap"
level="4"
load="myMap.centerAt(new MapPoint(-11713000, 4822000))">
<esri:ArcGISTiledMapServiceLayer id="Streets" show="layerShowHandler(event)"
url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
visible="{mapBB.selectedIndex == 0}"/>
<esri:ArcGISTiledMapServiceLayer id="Topo" show="layerShowHandler(event)"
url="http://server.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer"
visible="{mapBB.selectedIndex == 1}"/>
<esri:ArcGISTiledMapServiceLayer id="Imagery" show="layerShowHandler(event)"
url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
visible="{mapBB.selectedIndex == 2}"/>
</esri:Map>
<s:ButtonBar id="mapBB"
right="5"
selectedIndex="0"
top="10" click="applyTheme(colorBB.selectedItem)">
<s:dataProvider>
<s:ArrayList>
<fx:String>Streets</fx:String>
<fx:String>Topo</fx:String>
<fx:String>Imagery</fx:String>
</s:ArrayList>
</s:dataProvider>
</s:ButtonBar>
<s:ButtonBar id="colorBB" selectedIndex="0"
right="5" top="50" click="colorBB_clickHandler(event)" >
<s:dataProvider>
<s:ArrayCollection>
<fx:String>Default</fx:String>
<fx:String>Light</fx:String>
<fx:String>Dark</fx:String>
<fx:String>Midnight Blue</fx:String>
</s:ArrayCollection>
</s:dataProvider>
</s:ButtonBar>
</s:Application>
Below is the sample code written by an ex-team member.
hope this helps.<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:esri="http://www.esri.com/2008/ags" viewSourceURL="srcview/index.html"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Script> <![CDATA[ import com.esri.ags.geometry.MapPoint; import com.esri.ags.layers.Layer; import com.esri.ags.layers.TiledMapServiceLayer; import mx.events.FlexEvent; import spark.filters.ColorMatrixFilter; [Bindable]private var activeLayer:Layer; private var rLum : Number = 0.3086; private var gLum : Number = 0.6094; private var bLum : Number = 0.0820; private var bwMatrix: ColorMatrixFilter = new spark.filters.ColorMatrixFilter( [rLum, gLum, bLum, 0, 0, rLum, gLum, bLum, 0, 0, rLum, gLum, bLum, 0, 0, 0, 0, 0, 1, 0]); private function applyTheme(name:String):void { activeLayer = myMap.getLayer(mapBB.selectedItem); switch (name) { case "Default" : clearThemes(); break; case "Dark": applyDarkTheme(); break; case "Light": applyLightTheme(); break; case "Midnight Blue": applyMidnightBlueTheme(); break; } } private function clearThemes():void { activeLayer.filters = []; activeLayer.transform.colorTransform = new ColorTransform(); } private function applyDarkTheme():void { clearThemes(); activeLayer.filters = [bwMatrix]; activeLayer.transform.colorTransform = new ColorTransform(-1,-1,-1,1,256,256,256,0); } private function applyLightTheme():void { clearThemes(); activeLayer.filters = [bwMatrix]; } private function applyMidnightBlueTheme():void { clearThemes(); activeLayer.transform.colorTransform = new ColorTransform(-1,-1,-1,1,256,256,256,0); } private function layerShowHandler(event:FlexEvent):void { // update the LODs/zoomslider to use/show the levels for the selected base map var tiledLayer:TiledMapServiceLayer = event.target as TiledMapServiceLayer; myMap.lods = tiledLayer.tileInfo.lods; } protected function colorBB_clickHandler(event:MouseEvent):void { applyTheme(event.target.label); } ]]> </fx:Script> <esri:Map id="myMap" level="4" load="myMap.centerAt(new MapPoint(-11713000, 4822000))"> <esri:ArcGISTiledMapServiceLayer id="Streets" show="layerShowHandler(event)" url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer" visible="{mapBB.selectedIndex == 0}"/> <esri:ArcGISTiledMapServiceLayer id="Topo" show="layerShowHandler(event)" url="http://server.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer" visible="{mapBB.selectedIndex == 1}"/> <esri:ArcGISTiledMapServiceLayer id="Imagery" show="layerShowHandler(event)" url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" visible="{mapBB.selectedIndex == 2}"/> </esri:Map> <s:ButtonBar id="mapBB" right="5" selectedIndex="0" top="10" click="applyTheme(colorBB.selectedItem)"> <s:dataProvider> <s:ArrayList> <fx:String>Streets</fx:String> <fx:String>Topo</fx:String> <fx:String>Imagery</fx:String> </s:ArrayList> </s:dataProvider> </s:ButtonBar> <s:ButtonBar id="colorBB" selectedIndex="0" right="5" top="50" click="colorBB_clickHandler(event)" > <s:dataProvider> <s:ArrayCollection> <fx:String>Default</fx:String> <fx:String>Light</fx:String> <fx:String>Dark</fx:String> <fx:String>Midnight Blue</fx:String> </s:ArrayCollection> </s:dataProvider> </s:ButtonBar> </s:Application>