Posted By

chrisaiv on 10/20/09


Tagged

google Flex


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

davidsi


Flex: Google Fly Through


 / Published in: MXML
 

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3. xmlns:maps="com.google.maps.*" layout="absolute">
  4. <mx:Script>
  5. <![CDATA[
  6. import com.google.maps.MapMouseEvent;
  7. import com.google.maps.InfoWindowOptions;
  8. import com.google.maps.overlays.Marker;
  9. import mx.messaging.messages.IMessage;
  10. import com.google.maps.controls.NavigationControl;
  11. import com.google.maps.controls.MapTypeControl;
  12. import com.google.maps.geom.Attitude;
  13. import com.google.maps.View;
  14. import com.google.maps.MapType;
  15. import com.google.maps.LatLng;
  16. import com.google.maps.MapOptions;
  17. import com.google.maps.MapEvent;
  18. import mx.controls.Alert;
  19. import mx.messaging.events.MessageEvent;
  20.  
  21. private static const GOOGLE_MAP_API:String = "GOOGLE_MAPS_KEY";
  22.  
  23. private var infoWindowFlag:Boolean;
  24.  
  25. private var initZoom:Number = 3.5;
  26. private var initLat:Number = 25;
  27. private var initLng:Number = 10;
  28. private var initAttitude:Attitude = new Attitude( 0, 0, 0 );
  29.  
  30. private var flyToFlag:Boolean = false;;
  31. private var flyToZoom:Number = 3.5;
  32. private var flightSpeed:Number = 3;
  33. private var flyToAttitude:Attitude = new Attitude( 20, 30, 0 );
  34.  
  35.  
  36. private function messageHandler( message:IMessage ):void
  37. {
  38. //trace( "messageHandler: " + message );
  39.  
  40. var latlng:LatLng = new LatLng( message.body.latitude, message.body.longitude );
  41.  
  42. if( latlng != null ){
  43. var marker:Marker = new Marker( latlng );
  44. marker.addEventListener( MapMouseEvent.CLICK, function(e:MapMouseEvent) { openTheInfoWindow( message, latlng ) }, false, 0, true );
  45.  
  46. if( flyToFlag ) map.flyTo( latlng, flyToZoom, flyToAttitude, flightSpeed );
  47.  
  48. openTheInfoWindow( message, latlng );
  49.  
  50. map.addOverlay( marker );
  51. }
  52. }
  53.  
  54. private function openTheInfoWindow( message:IMessage, latlng:LatLng ):void
  55. {
  56. if( infoWindowCheckBox.selected ){
  57. var infoWindowOptions:InfoWindowOptions = new InfoWindowOptions( );
  58. infoWindowOptions.title = message.body.city;
  59. infoWindowOptions.content = "Sample ID: " + message.body.sampleId + " viewed";
  60. infoWindowOptions.pointOffset = new Point(0, -20);
  61. map.openInfoWindow( latlng, infoWindowOptions );
  62. }
  63. }
  64.  
  65. private function onMapPreInit( e:MapEvent ):void
  66. {
  67. var mapOptions:MapOptions = new MapOptions();
  68. mapOptions.zoom = initZoom;
  69. mapOptions.center = new LatLng( initLat, initLng );
  70. mapOptions.mapType = MapType.PHYSICAL_MAP_TYPE;
  71. mapOptions.viewMode = View.VIEWMODE_PERSPECTIVE;
  72. mapOptions.attitude = initAttitude;
  73. map.setInitOptions( mapOptions );
  74. }
  75.  
  76. private function onMapReady( e:MapEvent ):void
  77. {
  78. map.addControl( new MapTypeControl() );
  79. map.addControl( new NavigationControl() );
  80.  
  81. //The Map is constructed, let's subscribe to the message
  82. consumer.subscribe();
  83. }
  84.  
  85. private function toggleFlyTo():void
  86. {
  87. if( flyToFlag ){
  88. map.cancelFlyTo();
  89. map.flyTo( new LatLng( initLat, initLng ), initZoom, initAttitude, 5 );
  90. }
  91.  
  92. flyToFlag = flyToCheckBox.selected;
  93.  
  94. }
  95.  
  96. private function toggleInfoWindow():void
  97. {
  98. infoWindowFlag = infoWindowCheckBox.selected;
  99. }
  100. ]]>
  101. </mx:Script>
  102. <mx:ChannelSet id="channelSet">
  103. <!-- Long Polling Channel -->
  104. <mx:AMFChannel url="http://tourdeflex.adobe.com:8080/lcds-samples/messagebroker/amflongpolling" />
  105. <mx:AMFChannel url="http://tourdeflex.adobe.com:8080/lcds-samples/messagebroker/amfpolling" />
  106. </mx:ChannelSet>
  107.  
  108. <mx:Consumer id="consumer"
  109. channelSet="{channelSet}"
  110. destination="tdf.sampleviewingfeed"
  111. subtopic="flex"
  112. message="messageHandler(event.message)"
  113. fault="Alert.show(event.faultString)" />
  114.  
  115. <maps:Map3D id="map"
  116. mapevent_mappreinitialize="onMapPreInit(event)"
  117. mapevent_mapready="onMapReady(event)"
  118. width="100%" height="100%"
  119. key="{GOOGLE_MAP_API}" />
  120.  
  121. <mx:VBox x="100" y="5">
  122. <mx:Label fontSize="18" fontWeight="bold" text="Tour De Flex Live Traffic" right="60" />
  123.  
  124. <mx:CheckBox id="flyToCheckBox" fontWeight="bold" label="FlyTo (animated 3D flight)" click="toggleFlyTo()" />
  125.  
  126. <mx:CheckBox id="infoWindowCheckBox" fontWeight="bold" selected="true" label="Info Window" click="toggleInfoWindow()" />
  127. </mx:VBox>
  128. </mx:Application>

Report this snippet  

You need to login to post a comment.