    <?xml version="1.0" encoding="utf-8"?>
    <mx:Canvas xmlns="*"
             xmlns:mx="http://www.adobe.com/2006/mxml"
             xmlns:os="http://openscales.org"
             creationComplete="initMap();"
             resize="resizeMap();">

        <os:Map id="fxmap"
                width="100%"
                height="100%"
                zoom="5"
                centerLonLat="4.833,45.767">

            <os:TraceInfo x="{width-200}"
                          y="0"
                          visible="{displayTrace}"/>

            <os:WMSC name="Nasa"
                     url="http://openscales.org/geoserver/gwc/service/wms"
                     layers="bluemarble"
                     format="image/jpeg"
                     maxExtent="-180,-90,180,90"
                     isBaseLayer="true"/>

            <os:DragHandler/>
            <os:WheelHandler/>
            <os:Spinner id="spinner"
                        x="{width / 2}"
                        y="{height / 2}"/>
            <os:MousePosition x="10"
                              y="{height-20}"
                              displayProjection="EPSG:4326"/>

            <!-- Specific layers and handlers of this example -->
            <!-- none -->

        </os:Map>

        <!-- Specific tools of this example -->

        <mx:Panel id="miniMapPanel"
                  title="Overview map"
                  horizontalAlign="center"
                  x="{width-miniMapPanel.width-10}"
                  y="{height-miniMapPanel.height-10}">
            <os:OverviewMapComponent id="miniMap"
                                     map="{map}"
                                     width="100%"
                                     height="100%"
                                     minRectPxSize="3"
                                     rectColor="0xFF3300"
                                     newExtentColor="0x00FF33">

                <!-- OpenStreetMap EPSG:900913 -->
                <os:Mapnik name="Mapnik"
                           isBaseLayer="true"/>

            </os:OverviewMapComponent>

        </mx:Panel>

        <os:ControlPanel x="10"
                         y="10"
                         width="150"
                         height="240"
                         title="Navigation">

            <os:PanComponent map="{map}"/>
            <mx:HBox width="100%" paddingLeft="5" paddingRight="5">
                <os:ZoomComponent map="{map}"/>
                <mx:Spacer width="100%" />
                <os:ZoomBoxComponent map="{map}"
                                         width="32"
                                         height="32"/>
            </mx:HBox>
            <mx:Button id="overviewToggler"
                       label="Hide overview"
                       click="toggleOverview();"/>
        </os:ControlPanel>

        <mx:Script>
            <![CDATA[
                import org.openscales.core.Map;
                import org.openscales.core.Trace;

                [Bindable] private var map:Map = null;
                [Bindable] public var displayTrace:Boolean = false;
                [Bindable] public var displayFirebugTrace:Boolean = false;

                private function initMap():void {
                    Trace.useFireBugConsole = displayFirebugTrace;
                    map = fxmap.map;

                    // Specific initialize for this example
                    resizeMap();
                }

                private function resizeMap():void {
                    miniMap.height = 0.2 * this.height;
                    miniMap.width = this.width * miniMap.height / this.height;
                }

                private function toggleOverview():void {
                    miniMapPanel.visible = !miniMapPanel.visible;
                    overviewToggler.label = ((miniMapPanel.visible) ? "Hide" : "Show") + " overview";
                }
            ]]>
        </mx:Script>

    </mx:Canvas>