In the flexviewer I want to add text in the overview map that says "overview map." I am not sure what the code would be and assume it would be place in the s:BorderContainer component?
<?xml version="1.0" encoding="utf-8"?>
import mx.collections.ArrayCollection;
import mx.core.FlexGlobals;
import mx.events.EffectEvent;
private const lineSym:SimpleLineSymbol = new SimpleLineSymbol("solid", 0xFF0000, 0.7, 2);
private const currentExtentSym:SimpleFillSymbol = new SimpleFillSymbol("solid", 0xFF0000, 0.2, lineSym);
[Bindable]
public var map:Map;
public var configData:ConfigData;
public var openDefaultToolTip:String;
public var closeDefaultToolTip:String;
private var graphicsLayer:GraphicsLayer = new GraphicsLayer();
private var proxyUrl:String;
private var overviewGraphic:Graphic = new Graphic();
private var useBaseMapLayer:Boolean;
private var baseMapSwitched:Boolean;
private var currentBaseMapId:String;
private var hasOverviewGraphicBeenMoved:Boolean = false;
private var xOffset:Number;
private var yOffset:Number;
[Bindable]
private var openToolTip:String;
[Bindable]
private var closeToolTip:String;
private function init():void
{
overviewGraphic.buttonMode = true;
toggleIcon.addEventListener(MouseEvent.CLICK, toggleIcon_clickHandler);
viewBox.setStyle("backgroundColor", FlexGlobals.topLevelApplication.getStyle("backgroundColor"));
}
private function toggleIcon_clickHandler(event:MouseEvent):void
{
currentState = (currentState == "collapsed") ? "expanded" : "collapsed";
}
private var _configXML:XML;
public function set expansionDirection(direction:String):void
{
switch (direction)
{
case ExpansionDirection.UP_RIGHT:
{
toggleIcon.rotation = 90;
toggleIcon.left = toggleIcon.bottom = iconMask.left = iconMask.bottom = null;
toggleIcon.right = toggleIcon.top = iconMask.right = iconMask.top = 0;
break;
}
case ExpansionDirection.DOWN_RIGHT:
{
toggleIcon.rotation = 180;
toggleIcon.left = toggleIcon.top = iconMask.left = iconMask.top = null;
toggleIcon.right = toggleIcon.bottom = iconMask.right = iconMask.bottom = 0;
break;
}
case ExpansionDirection.DOWN_LEFT:
{
toggleIcon.rotation = 270;
toggleIcon.right = toggleIcon.top = iconMask.right = iconMask.top = null;
toggleIcon.left = toggleIcon.bottom = iconMask.left = iconMask.bottom = 0;
break;
}
}
}
public function get configXML():XML
{
return _configXML;
}
public function set configXML(value:XML):void
{
_configXML = value;
if (configXML)
{
// overviewmap open/close tooltip label
openToolTip = configXML.labels.opentooltip || openDefaultToolTip;
closeToolTip = configXML.labels.closetooltip || closeDefaultToolTip;
// proxyURL
proxyUrl = configData.proxyUrl;
var url:String = configXML.layer.@url;
var type:String;
var useProxy:Boolean;
if (url)
{
useBaseMapLayer = false;
type = configXML.layer.@type;
useProxy = configXML.layer.@useproxy[0] && configXML.layer.@useproxy == "true";
switch (type.toLowerCase())
{
case "tiled":
{
var tiledlayer:ArcGISTiledMapServiceLayer = new ArcGISTiledMapServiceLayer(url);
tiledlayer.alpha = alpha;
if (proxyUrl && useProxy)
{
tiledLayer.proxyURL = proxyUrl;
}
overviewMap.addLayer(tiledlayer);
break;
}
case "dynamic":
{
var dynlayer:ArcGISDynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer(url);
dynlayer.alpha = alpha;
if (proxyUrl && useProxy)
{
dynlayer.proxyURL = proxyUrl;
}
overviewMap.addLayer(dynlayer);
break;
}
}
}
else
{
useBaseMapLayer = true;
// get the base map layers
for (var i:uint = 0; i < configData.basemaps.length; i++)
{
type = configData.basemaps[i].type;
useProxy = configData.basemaps[i].useProxy;
proxyUrl = configData.proxyUrl;
const alpha:Number = Number(configData.basemaps[i].alpha);
const autoRefresh:Number = Number(configData.basemaps[i].autoRefresh);
const label:String = configData.basemaps[i].label;
const token:String = configData.basemaps[i].token;
const urlBaseMap:String = configData.basemaps[i].url;
const bingMapKey:String = configData.basemaps[i].key;
const style:String = configData.basemaps[i].style;
const visible:Boolean = configData.basemaps[i].visible;
const visibleLayers:String = configData.basemaps[i].visibleLayers;
const culture:String = configData.basemaps[i].culture;
const useamf:Boolean = configData.basemaps[i].useamf;
const mode:String = configData.basemaps[i].mode;
const noData:Number = Number(configData.basemaps[i].noData);
const serviceHost:String = configData.basemaps[i].serviceHost;
const serviceName:String = configData.basemaps[i].serviceName;
const definitionExpression:String = configData.basemaps[i].definitionExpression;
switch (type.toLowerCase())
{
case "tiled":
{
var tiledLayer:ArcGISTiledMapServiceLayer = new ArcGISTiledMapServiceLayer(urlBaseMap);
tiledLayer.alpha = alpha;
tiledLayer.id = label;
tiledLayer.visible = visible;
tiledLayer.token = token;
if (proxyUrl && useProxy)
{
tiledLayer.proxyURL = proxyUrl;
}
overviewMap.addLayer(tiledLayer);
break;
}
case "dynamic":
{
var dynLayer:ArcGISDynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer(urlBaseMap);
dynLayer.alpha = alpha;
dynLayer.id = label;
dynLayer.visible = visible;
dynLayer.token = token;
if (autoRefresh > 0)
{
setInterval(dynLayer.refresh, autoRefresh * 1000);
}
if (visibleLayers)
{
var vizLayers:Array = visibleLayers.split(",");
dynLayer.visibleLayers = new ArrayCollection(vizLayers);
}
if (proxyUrl && useProxy)
{
dynLayer.proxyURL = proxyUrl;
}
overviewMap.addLayer(dynLayer);
break;
}
case "feature":
{
var featureLayer:FeatureLayer = new FeatureLayer(urlBaseMap);
featureLayer.alpha = alpha;
featureLayer.id = label;
featureLayer.visible = visible;
featureLayer.outFields = [ '*' ];
featureLayer.token = token;
featureLayer.useAMF = useamf;
if (mode)
{
featureLayer.mode = mode;
}
if (proxyUrl && useProxy)
{
featureLayer.proxyURL = proxyUrl;
}
if (definitionExpression && definitionExpression != "")
{
featureLayer.definitionExpression = definitionExpression;
}
overviewMap.addLayer(featureLayer);
break;
}
case "bing":
{
var veTiledLayer:VETiledLayer = new VETiledLayer();
veTiledLayer.alpha = alpha;
veTiledLayer.id = label;
veTiledLayer.visible = visible;
veTiledLayer.key = bingMapKey;
if (style)
{
veTiledLayer.mapStyle = style;
}
if (culture)
{
veTiledLayer.culture = culture;
}
overviewMap.addLayer(veTiledLayer);
break;
}
case "image":
{
var imgLayer:ArcGISImageServiceLayer = new ArcGISImageServiceLayer(urlBaseMap);
imgLayer.alpha = alpha;
imgLayer.id = label;
imgLayer.visible = visible;
imgLayer.noData = noData;
imgLayer.token = token;
if (proxyUrl && useProxy)
{
imgLayer.proxyURL = proxyUrl;
}
overviewMap.addLayer(imgLayer);
break;
}
case "arcims":
{
var arcimsLayer:ArcIMSMapServiceLayer = new ArcIMSMapServiceLayer();
arcimsLayer.alpha = alpha;
arcimsLayer.id = label;
arcimsLayer.visible = visible;
arcimsLayer.serviceHost = serviceHost;
arcimsLayer.serviceName = serviceName;
if (autoRefresh > 0)
{
setInterval(arcimsLayer.refresh, autoRefresh * 1000);
}
if (visibleLayers)
{
var visLayers:Array = visibleLayers.split(",");
arcimsLayer.visibleLayers = new ArrayCollection(visLayers);
}
if (proxyUrl && useProxy)
{
arcimsLayer.proxyURL = proxyUrl;
}
overviewMap.addLayer(arcimsLayer);
break;
}
case "osm":
{
var osmLayer:OpenStreetMapLayer = new OpenStreetMapLayer();
osmLayer.alpha = alpha;
osmLayer.id = label;
osmLayer.name = label;
osmLayer.visible = visible;
overviewMap.addLayer(osmLayer);
break;
}
}
}
AppEvent.addListener(AppEvent.BASEMAP_SWITCH, viewContainer_basemapSwitchHandler);
}
currentState = configXML.initialstate == "open" ? "expanded" : "collapsed";
if (currentState == "collapsed") // turn layer(s) off if component is collapsed
{
for each (var layer:Layer in overviewMap.layers)
{
layer.visible = false;
}
}
}
}
private function updateOverviewExtentFromMap():void
{
overviewMap.extent = map.extent.expand(3);
overviewGraphic.geometry = map.extent;
}
private function updateMapExtentFromOverview():void
{
map.extent = overviewGraphic.geometry as Extent;
}
private function map_extentChangeHandler(event:ExtentEvent):void
{
updateOverviewExtentFromMap();
//hide overview box if larger than overview map
if (!overviewMap.extent.contains(overviewGraphic.geometry))
{
overviewGraphic.visible = false;
}
else
{
overviewGraphic.visible = true;
}
}
private function overviewMap_loadHandler(event:MapEvent):void
{
graphicsLayer.name = "overviewMapGraphicsLayer";
graphicsLayer.symbol = currentExtentSym;
overviewMap.addLayer(graphicsLayer);
overviewGraphic.geometry = map.extent;
overviewGraphic.addEventListener(MouseEvent.MOUSE_DOWN, overviewGraphic_mouseDownHandler);
//update map extent when mouse moves out of the overview map
overviewMap.addEventListener(MouseEvent.ROLL_OUT, overviewMap_mouseRollOutHandler);
graphicsLayer.add(overviewGraphic);
map.addEventListener(ExtentEvent.EXTENT_CHANGE, map_extentChangeHandler);
updateOverviewExtentFromMap();
}
private function overviewMap_mouseRollOutHandler(event:MouseEvent):void
{
overviewMap.removeEventListener(MouseEvent.MOUSE_MOVE, overviewMap_mouseMoveHandler);
overviewMap.removeEventListener(MouseEvent.MOUSE_UP, overviewMap_mouseUpHandler);
overviewGraphic.addEventListener(MouseEvent.MOUSE_DOWN, overviewGraphic_mouseDownHandler);
if (hasOverviewGraphicBeenMoved)
{
hasOverviewGraphicBeenMoved = false;
updateMapExtentFromOverview();
}
}
private function overviewGraphic_mouseDownHandler(event:MouseEvent):void
{
overviewGraphic.removeEventListener(MouseEvent.MOUSE_DOWN, overviewGraphic_mouseDownHandler);
overviewMap.addEventListener(MouseEvent.MOUSE_UP, overviewMap_mouseUpHandler);
overviewMap.addEventListener(MouseEvent.MOUSE_MOVE, overviewMap_mouseMoveHandler);
var overviewCenterMapPoint:MapPoint = overviewGraphic.geometry.extent.center;
var mouseMapPoint:MapPoint = overviewMap.toMapFromStage(event.stageX, event.stageY);
xOffset = mouseMapPoint.x - overviewCenterMapPoint.x;
yOffset = mouseMapPoint.y - overviewCenterMapPoint.y;
}
private function overviewMap_mouseMoveHandler(event:MouseEvent):void
{
hasOverviewGraphicBeenMoved = true;
var overviewExtent:Extent = overviewGraphic.geometry as Extent;
var mouseMapPoint:MapPoint = overviewMap.toMapFromStage(event.stageX, event.stageY);
mouseMapPoint.x -= xOffset;
mouseMapPoint.y -= yOffset;
overviewGraphic.geometry = overviewExtent.centerAt(mouseMapPoint);
}
private function overviewMap_mouseUpHandler(event:MouseEvent):void
{
overviewMap.removeEventListener(MouseEvent.MOUSE_MOVE, overviewMap_mouseMoveHandler);
overviewMap.removeEventListener(MouseEvent.MOUSE_UP, overviewMap_mouseUpHandler);
overviewGraphic.addEventListener(MouseEvent.MOUSE_DOWN, overviewGraphic_mouseDownHandler);
if (hasOverviewGraphicBeenMoved)
{
hasOverviewGraphicBeenMoved = false;
updateMapExtentFromOverview();
}
}
private function viewContainer_basemapSwitchHandler(event:AppEvent):void
{
baseMapSwitched = true;
currentBaseMapId = event.data as String;
if (currentState == "expanded")
{
showCurrentBaseMap(currentBaseMapId);
}
}
private function showCurrentBaseMap(currentBaseMapId:String):void
{
var configBasemaps:Array = configData.basemaps;
if (currentBaseMapId)
{
var selectedLabel:String;
for (var i:uint = 0; i < configBasemaps.length; i++)
{
if (configBasemaps[i].id == currentBaseMapId)
{
selectedLabel = configBasemaps[i].label;
break;
}
}
if (selectedLabel)
{
// turn on the selected basemap layers (more than one layer can have the same label)
var layers:ArrayCollection = overviewMap.layers as ArrayCollection;
for (i = 0; i < configBasemaps.length; i++)
{
var basemapLabel:String = configBasemaps[i].label;
for each (var layer:Layer in layers)
{
if (layer.id == basemapLabel)
{
if (layer.id == selectedLabel)
{
layer.visible = true;
}
else
{
layer.visible = false;
}
}
}
}
}
}
}
private function sequence_effectStartHandler(event:EffectEvent):void
{
if (currentState == "expanded")
{
if (useBaseMapLayer)
{
if (baseMapSwitched)
{
showCurrentBaseMap(currentBaseMapId);
}
else
{
// on start up and if basemap is not switched
for (var i:int = 0; i < configData.basemaps.length; i++)
{
var basemapLabel:String = configData.basemaps[i].label;
var isVisible:Boolean = configData.basemaps[i].visible;
for each (var layer:Layer in overviewMap.layers)
{
if (layer.id == basemapLabel)
{
layer.visible = isVisible;
}
}
}
}
}
else
{
for each (var layer1:Layer in overviewMap.layers)
{
layer1.visible = true;
}
}
}
}
private function sequence_effectEndHandler(event:EffectEvent):void
{
if (currentState == "collapsed") // turn layer(s) off if component is collapsed
{
for each (var layer:Layer in overviewMap.layers)
{
if (!(layer is GraphicsLayer && layer.name == "overviewMapGraphicsLayer"))
{
layer.visible = false;
}
}
}
}
]]>
</fx:Script>
<s:states>
<s:State name="collapsed"/>
<s:State name="expanded"/>
</s:states>
<s:transitions>
<s:Transition fromState="*" toState="*">
<s:Sequence effectEnd="sequence_effectEndHandler(event)" effectStart="sequence_effectStartHandler(event)">
<s:Resize duration="800" target="{viewBox}"/>
<s:Rotate angleBy="180"
autoCenterTransform="true"
duration="300"
target="{toggleIcon}"/>
</s:Sequence>
</s:Transition>
</s:transitions>
<s:BorderContainer id="viewBox"
width.collapsed="{toggleIcon.width}" width.expanded="250" height.collapsed="{toggleIcon.height}" height.expanded="250"
backgroundAlpha="1.0">
<esri:Map id="overviewMap"
width="250" height="250"
clickRecenterEnabled="false"
doubleClickZoomEnabled="false"
keyboardNavigationEnabled="false"
load="overviewMap_loadHandler(event)"
logoVisible="false"
mask="{mapMask}"
panArrowsVisible="false"
panEnabled="false"
rubberbandZoomEnabled="false"
scaleBarVisible="false"
scrollWheelZoomEnabled="false"
wrapAround180="{map.wrapAround180}"
zoomSliderVisible="false"/>
<s:BorderContainer id="mapMask"
width="{viewBox.width}" height="{viewBox.height}"/>
<s:Group width="{viewBox.width}" height="{viewBox.height}">
<mx:Image id="toggleIcon"
width="23" height="23"
buttonMode="true"
mask="{iconMask}"
smoothBitmapContent="true"
source="assets/images/i_expand2.png"
toolTip.collapsed="{openToolTip}"
toolTip.expanded="{closeToolTip}"
useHandCursor="true"/>
<s:BorderContainer id="iconMask"
width="{toggleIcon.width}" height="{toggleIcon.height}"/>
</s:Group>
</s:BorderContainer>
<s:Rect left="-1" right="-1" top="-1" bottom="-1">
<s:stroke>
<s:SolidColorStroke color="{getStyle('contentBackgroundColor')}" weight="1"/>
</s:stroke>
</s:Rect>
<s:Rect left="-5" right="-5" top="-5" bottom="-5">
<s:stroke>
<s:SolidColorStroke color="{getStyle('color')}" weight="2"/>
</s:stroke>
</s:Rect>
