topic change color schema in ArcGIS Viewer for Flex Questions

change color schema

PetrTrefil — Mon, 19 Sep 2011 06:59:37 GMT

Don´t anybody knows how to change color schema of tiled basemap in color PNG?
The one way is make new mapservice created as a clone of original mapservice, convert all tiles to grayscale PNG and save them instead of original color tiles. But I am looking for solution to display color tiles in grayscale using some filter or somethink like this. Can You help ?

Re: change color schema

MehulChoksey — Sat, 11 Dec 2021 18:37:15 GMT

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>

Re: change color schema

PetrTrefil — Sat, 11 Dec 2021 18:37:18 GMT

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>

Thank You very much. Could You implemet it to FlexViewer 2.4 ?
I´m not programmer, so I don´t know to implement Your code to 2.4.
I suppose Your code is for index.html in FlexViewer version 1.x, but version 2.4 seems different.
Can You help me with implementation.

Thanks in advance.