<?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();">

    <os:Map id="fxmap"
            width="100%"
            height="100%"
            zoom="4"
            centerLonLat="-74.011,40.710">

        <os:TraceInfo id="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:SelectFeaturesHandler active="true" enableClickSelection="false" enableBoxSelection="false" enableOverSelection="true" />

        <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 -->

        <os:WFS name="Topp States (WFS)"
                url="http://openscales.org/geoserver/wfs"
                typename="topp:states"
                projection="EPSG:4326"
                version="1.0.0"
                style="{Style.getDefaultSurfaceStyle()}">
        </os:WFS>

        <os:WFS name="Tiger poi (WFS)"
                url="http://openscales.org/geoserver/wfs"
                typename="tiger:poi"
                projection="EPSG:4326"
                version="1.0.0"
                useCapabilities="true"
                capabilitiesVersion="1.0.0"
                style="{Style.getDefaultPointStyle()}">
        </os:WFS>

    </os:Map>

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

    <os:ControlPanel x="10" y="10" title="Navigation" paddingRight="0" paddingLeft="0" paddingBottom="0">
        <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>
        <os:OverviewMapComponent map="{map}" width="140">
            <os:Mapnik name="Mapnik"
                       isBaseLayer="true"/>
        </os:OverviewMapComponent>
    </os:ControlPanel>
    
    <mx:Script>
        <![CDATA[
            import org.openscales.core.popup.Anchored;
            import org.openscales.core.events.FeatureEvent;
            import org.openscales.core.events.MapEvent;
            import org.openscales.core.Map;
            import org.openscales.core.Trace;
            import org.openscales.core.style.Style;
            
            private var popup:Anchored
            
            [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;
                
                map.addEventListener(FeatureEvent.FEATURE_CLICK, onFeatureClick);
            }

            private function onFeatureClick(event:FeatureEvent):void {
                if(popup) {
                    popup.destroy();
                }
                popup = null;
                popup = new Anchored();
                popup.feature = event.feature;
                        var content:String = "";
                        if(event.feature.attributes["STATE_NAME"] != undefined)
                            content = content + "<b><font size='20'>" + event.feature.attributes["STATE_NAME"] + " (" + event.feature.attributes["STATE_ABBR"] + ")</font></b><br />";
                        for(var attribute:String in event.feature.attributes) {
                            if((attribute != "STATE_NAME") && (attribute != "STATE_ABBR") && (attribute != "coordinates")) 
                                content = content + "<b>" + attribute + "</b> : " + event.feature.attributes[attribute] + "<br />";
                        }
                        popup.htmlText = content;
                map.addPopup(popup, true);
            }
            
            
        ]]>
    </mx:Script>

</mx:Canvas>