Loading Profile...
EMPLOYEE
How to layer two maps with different providers (for blending, alpha transparency, etc)
I'm slowly working on a bunch of examples (and a tutorial on how to get up and running), but here's a quick one that you might want to try if you're already familiar with the basics:
package {
import com.modestmaps.Map;
import com.modestmaps.TweenMap;
import com.modestmaps.events.MapEvent;
import com.modestmaps.extras.MapControls;
import com.modestmaps.extras.MapCopyright;
import com.modestmaps.extras.ZoomSlider;
import com.modestmaps.mapproviders.microsoft.MicrosoftAerialMapProvider;
import com.modestmaps.mapproviders.yahoo.YahooAerialMapProvider;
import flash.display.BlendMode;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;
[SWF(backgroundColor="#000000")]
public class HelloLayers extends Sprite
{
public var map:Map;
public var overlay:Map;
public function HelloLayers()
{
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
map = new TweenMap(stage.stageWidth, stage.stageHeight, true, new MicrosoftAerialMapProvider());
map.addEventListener(MouseEvent.DOUBLE_CLICK, map.onDoubleClick);
addChild(map);
overlay = new TweenMap(stage.stageWidth, stage.stageHeight, false, new YahooAerialMapProvider());
overlay.mouseChildren = overlay.mouseEnabled = false; // pass thru to map
addChild(overlay);
// you could adjust the alpha of your overlay here:
//overlay.alpha = 1;
// but I want to see how Microsoft and Yahoo's aerial imagery differs, so:
overlay.blendMode = BlendMode.DIFFERENCE;
// these *should* be all the events you need to watch out for
// fingers crossed!
map.addEventListener(MapEvent.EXTENT_CHANGED, syncMaps);
map.addEventListener(MapEvent.PANNED, syncMaps);
map.addEventListener(MapEvent.ZOOMED_BY, syncMaps);
map.addEventListener(MapEvent.STOP_ZOOMING, syncMaps);
map.addEventListener(MapEvent.STOP_PANNING, syncMaps);
// add these to the stage so they're on top of our overlay too
addChild(new MapControls(map));
// make sure the map fills the screen:
stage.addEventListener(Event.RESIZE, onStageResize);
}
private function syncMaps(event:MapEvent=null):void
{
// if you're using TweenMap then you need to
// do this to get the animations synced:
overlay.grid.setMatrix(map.grid.getMatrix());
// if you're using 'Map' you can just do
// overlay.setCenterZoom(map.getCenter(), map.getZoom());
}
private function onStageResize(event:Event):void
{
map.setSize(stage.stageWidth, stage.stageHeight);
overlay.setSize(stage.stageWidth, stage.stageHeight);
syncMaps(); // just to be sure
}
}
}
I’m excited
4
people like this idea
I like this idea!
Tell me when this idea gets some attention.
The more people who like this idea, the more it gets noticed.
The more people who like this idea, the more it gets noticed.
Create a customer community for your own organization
Plans starting at $19/month
-
Inappropriate?Hi, I tried to use your example in flex code, but I got error:
TypeError: Error #1009: Cannot access a property or method of a null object reference which comes from here: stage.align = StageAlign.TOP_LEFT;
it seems that stage is null.
I'm sorry this must be a newbie problem , I'm trying to create two layered map, I have class name LayersTest (which has code you posted above), and in my flex xml I'm calling init()-method (applicationComplete="init();") which contains addChild(new LayersTest()).
I’m unsure
-
Inappropriate?Ah, I should have said: this code is for an Actionscript 3 project in Flex Builder, and is intended to be a main application class. I'm not sure how to make it work with Flex, but I imagine you can safely delete the lines that refer to stage and see what happens :)
You might also try using the same idea but with two of the Flex maps. To be honest the Flex maps have not had much attention since they were written, and probably aren't as helpful as they could be. If anyone has a better implementation of Modest Maps for flex (that doesn't break compatibility with plain as3 projects or Flash CS3) we'd love to see it!
-
Inappropriate?Hi Opa,
Within a Flex project, you won't need to set the StageAlign property. But the stage property should be accessible on applicationComplete (and not on the creationComplete event) so i don't rly know why there is an error. Just delete this line and you'll be fine :)
The easiest solution to add a MM in Flex is to create an <mx:uicomponent> in your flex application. Then in a script block, you can just create a new map (using the new keyword with the name of your main MM class, the one that had the stage.align thingie) and as this new map extends Sprite, you can directly add it to your UIComponent. To do so, simply call something like:
mapCont.addChild(myNewMap);
And everything should work fine then :)
If you have any problem with Flex implementation, ask me, i think i can help.</mx:uicomponent>
I’m confident
-
Inappropriate?This works very well except for one problem. Sometimes when zooming in the temporary "reuse" tile for the overlay doesn't go away once the current zoom's tile has loaded.
so I end up with map's tiles, overlay's reuse pixelated tile and then overlay's tile.
The reuse tiles will stay there until I click on the map. Any ideas ? -
Inappropriate?That sounds like a bug. There should be one final redraw requested once all the tiles are loaded, and the redraw should remove unneeded tiles. This should be triggered in TileGrid, near to where the ALL_TILES_LOADED event is dispatched. Perhaps it should be delayed by one frame?
