init


      
             public function init() : void 
             { 
        container = new UIComponent(); 
          
        _map = new UMap(); 
        _map.setSize(500, 600); 
          
        container.addChild(_map); 
        mapCanvas.addChild(container); 
        container.focusManager.deactivate(); 
          
        _map.addControl(new MapTypeControl()); 
        _map.addControl(new ZoomControl()); 
        _map.addControl(new PositionControl()); 
        _map.setProvider(Providers.GOOGLE);
        _map.setCenter(new LatLng(52.36,4.89),13);
        
                  addOverlaysToLayers(_layer1, _marker1, _marker2, _marker3, _marker4, _marker5, _marker6, _marker7, _marker8, _marker9, _marker10);
                  addOverlaysToUmap(_map, _layer1);
                  _map.addEventListener(DisplayEvent.UPDATE_ZOOM, zoomMarkers);
                  
  

addMarkers();


             } 
             public function zoomMarkers(event:DisplayEvent):void
             {
                     //Alert.show(_map.zoom.toString());
                     //var newzoom:Number = _map.zoom;
                     if (_map.zoom < 6) {
                             //Alert.show(_map.zoom.toString());
                             _style9.radius = 4;
                             //Alert.show(_style9.radius.toString());
                     }
                     else if (_map.zoom > 14) _style9.radius = 10;
                     else _style9.radius = 7;
                     //Alert.show(_style9.radius.toString());
                     //_marker1.setStyle(_style9);
                     //_layer1.addOverlay(_marker1);
                     //_map.addOverlay(_layer1);
                     addStyleToMarkers(_style9, _marker1, _marker2, _marker3, _marker4, _marker5, _marker6, _marker7, _marker8, _marker9, _marker10);
                     addOverlaysToLayers(_layer1, _marker1, _marker2, _marker3, _marker4, _marker5, _marker6, _marker7, _marker8, _marker9, _marker10);
                  addOverlaysToUmap(_map, _layer1);
  
             }
     
    /* public function addMarkers():void
     {
  
                     position = new LatLng(52.36,4.89);
  //                   marker.position = position;
                     style = new MarkerStyle();
                     style.fill = GeometryStyle.RGB;
                     style.fillRGB = 0xff0000;
                     marker.setStyle(style);
                     _map.addOverlay(marker);
                     _map.setCenter(position,13);
     }*/
  

overlay(s)


                          public function addOverlaysToUmap(map:UMap, ...args:Array):void{
                                  var len:int = args.length;
                                  for(var i:int = 0; i < len; i++)
                                  {
                                          if(args[i] is IOverlay) map.addOverlay(args[i]);
                                  }
                          }
                          public function addOverlaysToLayers(layer:Layer, ...args:Array):void{
                                  var len:int = args.length;
                                  for(var i:int = 0; i < len; i++)
                                  {
                                          if(args[i] is IOverlay) layer.addOverlay(args[i]);
                                  }
                          }
  

style(s)


                          public function addStyleToMarkers(style:MarkerStyle, ...args:Array):void{
                                  var len:int = args.length;
                                  for(var i:int = 0; i < len; i++)
                                  {
                                          if(args[i] is IOverlay) args[i].setStyle(style);
                                  }
                          }
  
              import mx.collections.ArrayCollection;
  
              [Bindable]
              public var place:ArrayCollection = new ArrayCollection(
                  [ {label:"Amsterdam - Nederland", lat:(52.3669), lng:(4.8889), data:351},
                    {label:"La Digue - Seychellen", lat:(-4.355), lng:(55.83), data:3}, 
                    {label:"Donau - Hongarije", lat:(47.58398), lng:(19.0714), data:60} ]);
          
              public function closeHandler(event:Event):void {
                  myLabel.text = ComboBox(event.target).selectedItem.label + ", gevonden items: " + ComboBox(event.target).selectedItem.data;
                  //myData.text = ComboBox(event.target).selectedItem.data;
                  _map.setCenter(new LatLng(ComboBox(event.target).selectedItem.lat, ComboBox(event.target).selectedItem.lng),12);
                 // _map.setCenter(new LatLng(47.58,19));
              }    
  

selection(s)


              [Bindable]
              public var TAB_ARRAY:Array = 
                      [{label:"Hierarchisch", data:"hierarchy"},
                  {label:"Image", data:"images"},
                  {label:"Detail", data:"details"}
              ];
              
                      private function clickEvt(event:ItemClickEvent):void {
                              // Access target TabBar control.
                              var targetComp:TabBar = TabBar(event.currentTarget);
                              Alert.show(targetComp.dataProvider[event.index].data);
                              //forClick.text="manier van zoeken: "  + targetComp.dataProvider[event.index].data;
                              myViewStack.selectedChild=targetComp.dataProvider[event.index].data;
                              
                      }
                          [Bindable]
              public var selectedNode:XML;
  
              // Event handler for the Tree control change event.
              public function treeChanged(event:Event):void {
                  selectedNode=Tree(event.target).selectedItem as XML;
              }
          ]]>
      </mx:Script>
  
  

menu (left)


     
     <mx:XMLList id="treeData">
              <node label="Nederland">
                  <node label="Amsterdam (359)">
                      <node label="Amstel (5)">
                              <node label="Film1"/>
                              <node label="Film2"/>
                          </node>
                      <node label="Berlagebrug (2)">
                              <node label="Film1"/>
                              <node label="Film2"/>
                          </node>
                          <node label="Leidsegracht (3)">
                              <node label="Film1"/>
                              <node label="Film2"/>
                          </node>
                      <node label="Reguliersgracht (1)"/>
                      <node label="Singel (2)">
                              <node label="Film1"/>
                              <node label="Film2"/>
                          </node>
                  </node>
                  </node>        
      </mx:XMLList>
   
  

panel


     
        <mx:Panel title="Umap application" width="100%" height="100%" layout="horizontal" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
                  <mx:Box direction="vertical">        
                          <mx:Text  width="200" color="blue" text="Selecteer een plaats."/>
                          <mx:ComboBox dataProvider="{place}" width="200" close="closeHandler(event);"/>
                  <mx:VBox width="250">
                      
                  </mx:VBox>
                  
                  <!--<mx:TabBar itemClick="clickEvt(event);">
                      <mx:dataProvider>{TAB_ARRAY}</mx:dataProvider>
                  </mx:TabBar>
          
                  <mx:TextArea id="forClick" height="100%" width="100%">
                          
                  </mx:TextArea>-->
          <mx:VBox>
          <mx:HBox borderStyle="solid">
                  <mx:Text text="View:" paddingTop="4" paddingLeft="6"/>
                  <mx:LinkBar dataProvider="{myViewStack}"/>
          </mx:HBox>        
          <mx:Label id="myLabel" text=""/>
              <!--<mx:Label id="myData" text=""/>-->
  

view(s)


          <mx:ViewStack id="myViewStack" width="100%" height="100%">
                  <mx:Box id="hierarchy" label="Hierarchie" width="300" height="100%">
                      <mx:Tree id="myTree" width="100%" height="400" labelField="@label"
                          showRoot="false" dataProvider="{treeData}" change="treeChanged(event)" />
                      <!--<mx:TextArea height="100%" width="50%"
                          text="Selected Item: {selectedNode.@label}"/>-->
                  </mx:Box>
                  <mx:Box id="images" label="Image" width="300" height="100%" borderStyle="solid">
                                 <mx:Tile direction="horizontal" horizontalGap="10" verticalGap="15" 
                  paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
                          <mx:Image scaleContent="true" width="90" height="60">
                                  <mx:source>soutine.jpg</mx:source>
                          </mx:Image>
                          <mx:Image scaleContent="true" width="90" height="60">
                                  <mx:source>soutine.jpg</mx:source>
                          </mx:Image>
                          <mx:Image scaleContent="true" width="90" height="60">
                                  <mx:source>soutine.jpg</mx:source>
                          </mx:Image>
                          <mx:Image scaleContent="true" width="90" height="60">
                                  <mx:source>soutine.jpg</mx:source>
                          </mx:Image>
                  </mx:Tile>
                  </mx:Box>
                  <mx:Box id="details" label="Detailed" width="300" height="100%">
                                 <mx:Text text="details"/>
                  </mx:Box>
              </mx:ViewStack>
              </mx:VBox>
          </mx:Box>
                  <mx:Canvas id="mapCanvas" width="500" height="100%"/>
          <mx:Box direction="vertical">
                  <mx:Text width="200" color="blue" text="Verfijning"/>
                  <mx:TextArea id="refine" height="600" width="100%" >
                          <!--<mx:htmlText><![CDATA[
                          <p>Jaar<br>
                          2009 (91)<br>
                          2008 (49)<br>
                          2007 (56)<br>
                          voor 1950 (2)<br>
                          <p>Type<br>
                          ]]></mx:htmlText>-->
                          </mx:TextArea>
          </mx:Box>
        </mx:Panel>
  
  </mx:Application>