Intro
As with many things, the greatest strength of the tiled basemap is also its greatest weakness. On the one hand, it’s pre-rendered: its tiles load fast and with little or no computational load. On the other hand, it’s pre-rendered: you’ll get only what the map’s author designed.
What if you like the Esri World Streets basemap (as one example), but think the colors are distractingly bright? Tough—they’ve already been rendered and can’t be changed, right? Well…not necessarily. The tiles have been pre-rendered, but Flex and the Flash engine have some amazing capabilities when it comes to manipulating any image’s pixels before they get displayed. As we’ll see, the color characteristics of even static images can be changed on the client at runtime.
The app
You can see a live demo application here: http://maps.esri.com/AGSFlex_Demos/MutedBaseMaps
View or download the source code by clicking the “view source” button in the upper left corner. Play around with the various settings to learn what they will do to the base map. Note that the “Grayscale Control” slider has two effects: it decreases differences among the colors (leading to a gray appearance), but also increases the overall brightness as well. So to get a grayscale appearance, you’ll need to bump up the grayscale control while also decreasing the “All Colors” control.
The dropdown list at the upper right has a variety of tiled maps (all hosted on ArcGIS.com) so you can see what your settings will do to the different base maps.
The code
In index.mxml, you will find most of the user interface. The various sliders and other controls have no image-manipulation logic in themselves; their values are bound to various properties on the DimmableTiledMapService, which is where most of the interesting stuff happens.
DimmableTiledMapService.mxml extends the Esri ArcGISTiledMapServiceLayer class. The red, blue, and green sliders correspond to properties of the same names in DimmableTiledMapService. The “Invert Colors” checkbox is bound to the property “invert” while the Grayscale Control slider corresponds to “offChannelMultiplier”. When any of these properties changes, the “matrix” getter recalculates and applies a ColorMatrixFilter effect. This filter prompts the Flash engine to recalculate every pixel in the base map by multiplying it by the given color matrix.
In your own apps…
The “View Color Matrix” button will show the matrix values used to generate what you see on screen. In fact, it gives you the matrix as an ActionScript array variable declaration you can paste into your own code—so you can play with the controls in the demo app, and then replicate the colors in your own app.
For example, suppose you have the following dead-simple Flex app showing the Esri tiled topo map:
<?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="800" minHeight="600"
xmlns:esri="http://www.esri.com/2008/ags">
<esri:Map width="100%" height="100%">
<esri:ArcGISTiledMapServiceLayer
url="http://services.arcgisonline.com/
ArcGIS/rest/services/World_Topo_Map/MapServer">
</esri:ArcGISTiledMapServiceLayer>
</esri:Map>
</s:Application>
If you want to change the base map’s appearance to match the “Gray” preset…
- Use the demo application and choose “Gray” in the presets list
- Click “View Color Matrix”; select the resulting text and use Ctrl+C to copy it
- Paste the code into an ActionScript script block
- Add a ColorMatrixFilter to the tiled base map declaration that uses the color matrix you just generated
The final code looks like this:
<?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="800" minHeight="600"
xmlns:esri="http://www.esri.com/2008/ags">
<fx:Script>
<![CDATA[
var matrix:Array = [
-0.30, -0.30, -0.30, 0.00, 255.00,
-0.30, -0.30, -0.30, 0.00, 255.00,
-0.30, -0.30, -0.30, 0.00, 255.00,
0.00, 0.00, 0.00, 1.00, 0.00
];
]]>
</fx:Script>
<esri:Map width="100%" height="100%">
<esri:ArcGISTiledMapServiceLayer
url="http://services.arcgisonline.com/
ArcGIS/rest/services/World_Topo_Map/MapServer">
<esri:filters>
<mx:ColorMatrixFilter matrix="{matrix}"/>
</esri:filters>
</esri:ArcGISTiledMapServiceLayer>
</esri:Map>
</s:Application>
References
Esri’s ArcGIS Server team has a blog post on the subject here.
Richie Carmichael of the Esri Applications Prototype Lab has built a version of this app in Silverlight; it includes additional fun effects to make a base map look like a silent movie, Larry King’s mosaic backdrop at CNN, and more. Find it here.
Contributed by Mark D.
