<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" 
    width="100%" height="100%" 
    backgroundColor="#FFFFFF"
    mouseMove="onMouseMove()"
    horizontalScrollPolicy="off"
    verticalScrollPolicy="off" viewSourceURL="srcview/index.html">
  
      <mx:Style>
          Application {
           backgroundColor: #ffffff;
           backgroundGradientColors: #ffffff, #ffffff;
        }
      
          Panel {
           borderThicknessLeft: 0;
           borderThicknessTop: 0;
           borderThicknessBottom: 0;
           borderThicknessRight: 0;
           cornerRadius: 10;
           headerColors: #000000, #999999;
        }
      </mx:Style>
  
    <mx:Script>
        <![CDATA[
            import mx.graphics.ImageSnapshot;
            import com.google.maps.interfaces.IMapType;
              import com.google.maps.LatLng;
              import com.google.maps.Map;
              import com.google.maps.MapEvent;
              import com.google.maps.MapType;
         
              private var map:Map;
              
              public function onContinerInitialize( event:Event ):void 
              {
                map = new Map();
                
                map.key = "put your api key here";
                map.addEventListener( MapEvent.MAP_READY, onMapReady );
                mapContainer.addChild( map );
              }
        
            public function onContainerResize( event:Event ):void 
            {
                map.setSize( new Point( mapContainer.width, mapContainer.height ) );
            }
        
             private function onMapReady( event:Event ):void 
             {
                 mapType.dataProvider = [ MapType.PHYSICAL_MAP_TYPE, MapType.NORMAL_MAP_TYPE, MapType.SATELLITE_MAP_TYPE, MapType.HYBRID_MAP_TYPE ];
                mapType.selectedIndex = 0;
                map.enableScrollWheelZoom();
                map.enableContinuousZoom();
                map.setCenter(new LatLng(38.897318, -77.035392), 10, mapType.dataProvider[0] );
              }
              
              private function onChangeMapType() : void
              {
                  if ( mapType.selectedItem )
                      map.setMapType( IMapType( mapType.selectedItem ) );
              }
              
              private function labelFunction( o : Object ) : String
              {
                  if ( o is IMapType )
                      return IMapType( o ).getName();
                  return "";
              }
              
              private function onMouseMove() : void
              {
                  displacementSource.x = mouseX - 100;
                  displacementSource.y = mouseY - 100;
                  displacementMap.mapBitmap = ImageSnapshot.captureBitmapData( displacementContainer );
                  mapContainer.filters = [ displacementMap ];
              }
        ]]>
    </mx:Script>
    
    <mx:Canvas 
        id="displacementContainer"
        width="100%" height="100%"
        horizontalScrollPolicy="off"
        verticalScrollPolicy="off" 
        backgroundColor="#7f7f7f" 
        visible="false" includeInLayout="false">
            <mx:Image id="displacementSource" source="@Embed('assets/displacementSource.png')" cacheAsBitmap="true" />
    </mx:Canvas>
          
    <mx:Panel 
          title="Google Maps Sample" 
          top="5" bottom="5" left="5" right="5">
        
        <mx:UIComponent id="mapContainer" 
            initialize="onContinerInitialize(event);" 
            resize="onContainerResize(event)" 
            width="100%" height="100%">
            
            <mx:filters>
                <mx:DisplacementMapFilter 
                    id="displacementMap" 
                    scaleX="100"  
                    mode="{ DisplacementMapFilterMode.CLAMP }"
                    componentX="{ BitmapDataChannel.RED }"/>
            </mx:filters>
            
        </mx:UIComponent>
          
          <mx:ControlBar>
              
              <mx:Label text="Map Type" />
              <mx:ComboBox id="mapType" 
                  labelField="label" 
                  change="onChangeMapType()" 
                  labelFunction="labelFunction" />
                  
          </mx:ControlBar>
          
    </mx:Panel>
  
</mx:Application>