topical media & game development
sample-flex-umap.mx
sample-flex-umap.mx
[swf]
flex
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="init()" width="100%">
<mx:Script>
<![CDATA[
import com.afcomponents.umap.events.*;
import com.afcomponents.umap.interfaces.IOverlay;
import com.afcomponents.umap.overlays.Circle;
import com.afcomponents.umap.overlays.Layer;
import com.afcomponents.umap.overlays.Marker;
import com.afcomponents.umap.providers.Providers;
import com.afcomponents.umap.styles.DropShadowStyle;
import com.afcomponents.umap.styles.GeometryStyle;
import com.afcomponents.umap.styles.GradientStyle;
import com.afcomponents.umap.styles.IconStyle;
import com.afcomponents.umap.styles.MarkerStyle;
import com.afcomponents.umap.styles.StrokeStyle;
import com.afcomponents.umap.styles.TextStyle;
import com.afcomponents.umap.types.Align;
import com.afcomponents.umap.types.LatLng;
import com.afcomponents.umap.types.Offset;
import com.afcomponents.umap.gui.*;
import com.afcomponents.umap.core.UMap;
import com.afcomponents.umap.core.Control;
import mx.core.UIComponent;
import mx.controls.Alert;
import mx.events.ItemClickEvent;
import mx.controls.TabBar;
private var _map:UMap;
private var container:UIComponent;
//private var marker:Marker;
// private var position:LatLng;
//private var style:MarkerStyle;
private var _style1:IconStyle = new IconStyle({align:new Align(Align.CENTER, Align.BOTTOM), offset:new Offset("0", "0"), scale:0.7, rotation:null, colorTransform:null});
private var _style2:TextStyle = new TextStyle({antiAliasType:AntiAliasType.ADVANCED, autoSize:TextFieldAutoSize.LEFT, condenseWhite:true, embedFonts:null, gridFitType:GridFitType.PIXEL, sharpness:null, thickness:null, textFormat:new TextFormat("_sans", 12, 0x000000, null, null, null, "", "", TextFormatAlign.LEFT, null, null, null, null), wordWrap:null, multiline:null, selectable:null, html:null, styleSheet:null});
private var _style3:DropShadowStyle = new DropShadowStyle({angle:15, distance:0.5, color:0x000000, alpha:0.6, blurX:3, blurY:3, strength:0, quality:1});
private var _style4:GradientStyle = new GradientStyle({type:GradientType.LINEAR, colors:[0xDDDDDD,0xFFFFFF], alphas:[70,100], ratios:[200,255], matrix:new Matrix(-1.1211606022543736e-17, -0.06103515625, 0.06103515625, -1.1211606022543736e-17, 50, 50), spreadMethod:SpreadMethod.PAD, interpolationMethod:InterpolationMethod.RGB, focalPointRatio:null});
private var _style5:StrokeStyle = new StrokeStyle({pixelHinting:true, noScale:LineScaleMode.NORMAL, capsStyle:CapsStyle.ROUND, jointStyle:JointStyle.ROUND, miterLimit:3});
private var _style6:MarkerStyle = new MarkerStyle({radius:7, icon:null, iconStyle:_style1, label:true, shadow:true, labelStyle:_style2, shadowStyle:_style3, fill:GeometryStyle.RGB, fillRGB:0xFFFFFF, fillAlpha:1, fillGradient:_style4, fillBitmap:null, stroke:GeometryStyle.RGB, strokeRGB:0x000000, strokeAlpha:1, strokeThickness:1, strokeGradient:null, strokeStyle:_style5});
private var _style7:GradientStyle = new GradientStyle({type:GradientType.LINEAR, colors:[0xDDDDDD,0xFFFFFF], alphas:[70,100], ratios:[200,255], matrix:new Matrix(-1.1211606022543737e-17, -0.06103515625, 0.06103515625, -1.1211606022543737e-17, 50, 50), spreadMethod:SpreadMethod.PAD, interpolationMethod:InterpolationMethod.RGB, focalPointRatio:null});
private var _style8:MarkerStyle = new MarkerStyle({radius:7, icon:"http://umapper.s3.amazonaws.com/ufiles/2009-08/0bf3782c79e05af08c78741ad4b259d8", iconStyle:_style1, label:true, shadow:null, labelStyle:_style2, shadowStyle:_style3, fill:GeometryStyle.RGB, fillRGB:0xFFFFFF, fillAlpha:1, fillGradient:_style7, fillBitmap:null, stroke:GeometryStyle.RGB, strokeRGB:0x000000, strokeAlpha:1, strokeThickness:1, strokeGradient:null, strokeStyle:_style5});
private var _style9:MarkerStyle = new MarkerStyle({radius:7, icon:null, iconStyle:_style1, label:true, shadow:true, labelStyle:_style2, shadowStyle:_style3, fill:GeometryStyle.RGB, fillRGB:0xFF0000, fillAlpha:1, fillGradient:_style7, fillBitmap:null, stroke:GeometryStyle.RGB, strokeRGB:0x000000, strokeAlpha:1, strokeThickness:1, strokeGradient:null, strokeStyle:_style5});
private var _marker1:Marker = new Marker({index:"P", name:"Nederland", position:new LatLng(52.22779942222279, 5.240478515625), infoStyle:{contentStyle:{html:true}, titleStyle:{html:true}}}, _style9);
private var _marker2:Marker = new Marker({id:1, name:"Leidsegracht", position:new LatLng(52.365838949081315, 4.882543087005615)}, _style8);
private var _marker3:Marker = new Marker({id:2, index:"P", name:"Donau", description:"<TEXTFORMAT LEADING=\"2\"><P ALIGN=\"LEFT\"><FONT FACE=\"Verdana\" SIZE=\"10\" COLOR=\"#000000\" LETTERSPACING=\"0\" KERNING=\"0\">Donau in Budapest, Hungary</FONT></P></TEXTFORMAT><TEXTFORMAT LEADING=\"2\"><P ALIGN=\"LEFT\"><FONT FACE=\"Verdana\" SIZE=\"10\" COLOR=\"#000000\" LETTERSPACING=\"0\" KERNING=\"0\">\\n<a href=\"http://link\">Link to movie</a>\\n</FONT></P></TEXTFORMAT>", position:new LatLng(47.58398004380382, 19.071407318115234)}, _style9);
private var _marker4:Marker = new Marker({id:3, index:"P", name:"La Digue", position:new LatLng(-4.355247749889177, 55.83234786987305)}, _style9);
private var _marker5:Marker = new Marker({id:4, index:"P", name:"Amsterdam", position:new LatLng(52.36690022958957, 4.888958930969238)}, _style9);
private var _marker6:Marker = new Marker({id:5, name:"Utrecht", position:new LatLng(52.087786788311426, 5.1229870319366455)}, _style9);
private var _marker7:Marker = new Marker({id:6, name:"Singel", description:"<TEXTFORMAT LEADING=\"2\"><P ALIGN=\"LEFT\"><FONT FACE=\"Verdana\" SIZE=\"10\" COLOR=\"#000000\" LETTERSPACING=\"0\" KERNING=\"0\"><a href=\"\">Film 1</a></FONT></P></TEXTFORMAT><TEXTFORMAT LEADING=\"2\"><P ALIGN=\"LEFT\"><FONT FACE=\"Verdana\" SIZE=\"10\" COLOR=\"#000000\" LETTERSPACING=\"0\" KERNING=\"0\"><a href=\"\">Film 2</a></FONT></P></TEXTFORMAT>", position:new LatLng(52.37455906, 4.88955975), infoStyle:{contentStyle:{html:true}, titleStyle:{html:true}}}, _style9);
private var _marker8:Marker = new Marker({id:7, name:"Reguliersgracht",
description:"<TEXTFORMAT LEADING=\"2\">" +
"<P ALIGN=\"LEFT\">" +
"<FONT FACE=\"Verdana\" SIZE=\"10\" COLOR=\"#000000\" LETTERSPACING=\"0\" KERNING=\"0\">" +
"<a href=\"\">Film 1</a></FONT>" +
// "<IMG SRC=\"http://umapper.s3.amazonaws.com/ufiles/2009-08/39531978a8d19e1e603c13db84ca6650\"/>" +
"<IMG SRC=\"http://umapper.s3.amazonaws.com/ufiles/2009-08/0bf3782c79e05af08c78741ad4b259d8\"/>" +
"</P></TEXTFORMAT>", position:new LatLng(52.35962272, 4.89641011), infoStyle:{contentStyle:{html:true}, titleStyle:{html:true}}}, _style9);
private var _marker9:Marker = new Marker({id:8, name:"Amstel", description:"<TEXTFORMAT LEADING=\"2\"><P ALIGN=\"LEFT\"><FONT FACE=\"Verdana\" SIZE=\"10\" COLOR=\"#000000\" LETTERSPACING=\"0\" KERNING=\"0\"><a href=\"\">Film 1</a></FONT></P></TEXTFORMAT>", position:new LatLng(52.36279384, 4.9028635), infoStyle:{contentStyle:{html:true}, titleStyle:{html:true}}}, _style9);
private var _marker10:Marker = new Marker({id:9, name:"Berlagebrug", description:"<TEXTFORMAT LEADING=\"2\"><P ALIGN=\"LEFT\"><FONT FACE=\"Verdana\" SIZE=\"10\" COLOR=\"#000000\" LETTERSPACING=\"0\" KERNING=\"0\"><a href=\"\">Film 1</a></FONT></P></TEXTFORMAT>", position:new LatLng(52.34733576, 4.9127233), infoStyle:{contentStyle:{html:true}, titleStyle:{html:true}}}, _style9);
private var _layer1:Layer = new Layer();
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>
(C) Æliens
27/08/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
