Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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>

share|improve this question

1 Answer 1

up vote 0 down vote accepted

This is where you would do it.

<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:Label includeIn="expanded" x="95" y="10" width="85" height="16" backgroundColor="#0A0A0A"
             color="#FFD700" fontSize="12" fontWeight="bold" paddingBottom="2" paddingLeft="2"
             paddingRight="2" paddingTop="2" text="Overview Map"/>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.