overview map, is it possible?

Here's one way...

You need to make a small version of your map in the same proportions as your original image. Call this image plan. Then you need to add a red box to the same parent as the small version of the map. Call this overlay.

Then you need to know the lat/lon locations of the top left and bottom right corners of your small image. For example:


public static const topLeft:Location = new Location(13.39, 1.84);
public static const bottomRight:Location = new Location(1.95, 21.15)


Then you need to add a listener to your map for MapEvent.RENDERED:


map.addEventListener(MapEvent.RENDERED, onMapRendered);


The event handler will grab the extent of the map view and resize the overlay box to fit:



public function onMapRendered(mapEvent:MapEvent):void
{
// if you also want the red box to be draggable, you'll need to
// quit this function or it will mess things up
// if (dragging) return;

// if we could see the full map, where would those points be on screen?
var p1:Point = map.locationPoint(topLeft);
var p2:Point = map.locationPoint(bottomRight);

var widthOnScreen:Number = Math.abs(p1.x-p2.x);
var heightOnScreen:Number = Math.abs(p1.y-p2.y);

// what are the points on screen of the current visible map?
var mapExtent:MapExtent = map.getExtent();

var p3:Point = map.locationPoint(mapExtent.northWest);
var p4:Point = map.locationPoint(mapExtent.southEast);

var visibleWidth:Number = Math.abs(p3.x-p4.x);
var visibleHeight:Number = Math.abs(p3.y-p4.y);

// position the overlay:
overlay.x = plan.x + plan.width * ((p3.x - p1.x) / widthOnScreen);
overlay.y = plan.y + plan.height * ((p3.y - p1.y) / heightOnScreen);

// resize the overlay
overlay.width = Math.max(3, plan.width * (visibleWidth / widthOnScreen));
overlay.height = Math.max(3, plan.height * (visibleHeight / heightOnScreen));

// optionally, fade the overlay out if it's too big (you'll want to tweak this)
overlay.alpha = 1.0 - 1 * Math.min(1.0, Math.max(0.0, Math.pow(overlay.width / plan.width, 4)));
}



Interaction with the red box is a bit trickier, and depends on how you want it to behave, but basically if the overlay gets moved then this is how to adjust the map to match:



protected function updateMapFromOverlay():void
{
var p1:Point = map.locationPoint(topLeft);
var p2:Point = map.locationPoint(bottomRight);

var widthOnScreen:Number = Math.abs(p1.x-p2.x);
var heightOnScreen:Number = Math.abs(p1.y-p2.y);

var p:Point = new Point((widthOnScreen * (overlay.x + overlay.width/2 - plan.x) / plan.width) + p1.x,
(heightOnScreen * (overlay.y + overlay.height/2 - plan.y) / plan.height) + p1.y );

map.setCenter(map.pointLocation(p));
}



You can see it just works with the center point of the overlay, because it's only intended to respond to dragging of the overlay. If the overlay gets resized then you'll need to write a more complicated function.