Google 3D Map

<?xml version="1.0" encoding="utf-8"?> 
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:maps="com.google.maps.*"
width="100%" height="100%" borderStyle="solid"
layout="absolute" cornerRadius="0.3">


<mx:ApplicationControlBar dock="true" fillAlphas="[0.85, 0.5]">
<mx:HBox>
<mx:RadioButton id="drawMarkers" groupName="drawmode" label="Place Markers" selected="true"/>
<mx:RadioButton id="drawPolygons" groupName="drawmode" label="Construct Polygon"/>
<mx:ComboBox id="drawComboBox" prompt="Please Select" dataProvider="{comboBoxDataProvider}"/>
<mx:Button label="Show Marked" click="onClickingShowMarked(event)"/>
<mx:Button label="Clear Map" click="onMapClear(event)"/>
<mx:Button label="Reset Datagrid" click="onClickingResetDatgrid(event)"/>
<mx:Button label="+" click="onClickingZoominButton(event)" fontWeight="bold" toolTip="Zoom In"/>
<mx:Button label="-" click="onClickingZoomOutButton(event)" fontWeight="bold" toolTip="Zoom Out"/>
</mx:HBox>
</mx:ApplicationControlBar>

<maps:Map3D id="google3DMap" url="http://code.google.com/apis/maps/signup.html" width="1100" height="545" rightClick="onMapRightClick(event)"
key="ABQIAAAAs-0bLgXGuavRy_gQNSGJ1BT6Hom2p--h8nhr1SBOg1Sl0RXcDRRoQ1EMK1YqY16X8sCESwaDT6io9Q-HiJkLmNoP"
sensor="false" mapevent_mappreinitialize="onMapPreinitialize(event)" mapevent_mapready="on3DMapReady()" x="248" y="55"/>

<mx:ApplicationControlBar top="10" fillAlphas="[0.85, 0.5]" left="248">
<mx:Label text="Enter address: "/>
<mx:TextInput id="address"/>
<mx:Button id="submitButton" label="Search" click="searchLocation(event)" />
<mx:Label text="Distance: {this.distanceCalc.toFixed(6)} KM"/>
<mx:VRule height="25"/>
<mx:Label text="Duration: {this.durationCalc}"/>

</mx:ApplicationControlBar>

<mx:ApplicationControlBar top="10" fillAlphas="[0.85, 0.5]" left="20" bottom="20">
<mx:DataGrid id="coordinateDatagrid" dataProvider="{this.databaseCollection}" itemClick="locateMarker(event)" height="100%">
<mx:columns>
<mx:DataGridColumn headerText="Latitude" dataField="latitudeDegree" fontWeight="normal"/>
<mx:DataGridColumn headerText="Longitude" dataField="longitudeDegree" fontWeight="normal"/>
</mx:columns>
</mx:DataGrid>
</mx:ApplicationControlBar>

<mx:ApplicationControlBar bottom="20" fillAlphas="[0.85, 0.5]" left="248">
<mx:Label text="From:" width="50"/>
<mx:TextInput id="from" width="260"/>
<mx:Label text="To: " width="50"/>
<mx:TextInput id="to" width="260"/>
<mx:Button id="getRoute" label="Show Route" click="isGetDirectionButtonClicked = false; processDirections(event)"/>
<mx:Button id="getDirections" label="Get Directions" click="isGetDirectionButtonClicked = true; processDirections(event)"/>
</mx:ApplicationControlBar>

<mx:XML id="locations" source="data/coordinates.xml"/>

<mx:Script>
<![CDATA[
import com.google.maps.Color;
import com.google.maps.InfoWindowOptions;
import com.google.maps.LatLng;
import com.google.maps.MapEvent;
import com.google.maps.MapMouseEvent;
import com.google.maps.MapOptions;
import com.google.maps.MapType;
import com.google.maps.View;
import com.google.maps.controls.ControlPosition;
import com.google.maps.controls.NavigationControl;
import com.google.maps.controls.NavigationControlOptions;
import com.google.maps.geom.Attitude;
import com.google.maps.overlays.Marker;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.overlays.Polygon;
import com.google.maps.services.ClientGeocoder;
import com.google.maps.services.Directions;
import com.google.maps.services.DirectionsEvent;
import com.google.maps.services.GeocodingEvent;
import com.google.maps.services.GeocodingResponse;
import com.google.maps.services.Placemark;

import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.ListEvent;
import mx.managers.PopUpManager;

import utils.CreatePolyUtil;
import utils.DrawCirclePolygonUtil;
import utils.RoadAtlasUtil;
import utils.SearchLocationUtil;
import utils.TileLoadTimer;
import utils.TitleWindowWpath;

import views.TitleWindowDirections;

[Bindable] private var comboBoxDataProvider:ArrayCollection = new ArrayCollection(["Polyline","Polygon"]);
[Bindable] private var coordinateDataProvider:ArrayCollection = new ArrayCollection();
[Bindable] private var distanceCalc:Number = 0;
[Bindable] private var durationCalc:String = "0 hours 0 mins";
[Bindable] private var getZoomValue:Number;
[Bindable] private var databaseCollection:ArrayCollection = new ArrayCollection();

private var polygonObj:Polygon;
private var geocoder:ClientGeocoder;
private var polygonCoordinates:Array = new Array();
private var dir:Directions;
private var turnCounter:uint = 0;
private var step:String = "";
private var isGetDirectionButtonClicked:Boolean = false;

/**
* This method preinitializes the map
* @Event evt This is the map preintialize event i.e. MapEvent
*/
private function onMapPreinitialize(evt:MapEvent):void
{
var applnMapOptions:MapOptions = new MapOptions();

applnMapOptions.zoom = 19;
applnMapOptions.center = new LatLng((40.665226,-73.984659), 14)
applnMapOptions.mapType = MapType.HYBRID_MAP_TYPE;
applnMapOptions.viewMode = View.VIEWMODE_PERSPECTIVE;
applnMapOptions.attitude = new Attitude(20,30,0);

this.google3DMap.setInitOptions(applnMapOptions);
}

/**
* This method is initialized when the google map api is ready to execute
*/
private function on3DMapReady():void
{
var atlasObj:RoadAtlasUtil = new RoadAtlasUtil();

this.dir = new Directions();

this.dir.addEventListener(DirectionsEvent.DIRECTIONS_SUCCESS, onDirLoad);
this.dir.addEventListener(DirectionsEvent.DIRECTIONS_FAILURE, onDirFail);

this.google3DMap.enableScrollWheelZoom();
this.google3DMap.addControl(new NavigationControl(new NavigationControlOptions({position: new ControlPosition(ControlPosition.ANCHOR_TOP_RIGHT, 16, 80)})));
this.google3DMap.addControl(new TileLoadTimer());

this.geocoder = new ClientGeocoder();
this.geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS, geocoderSuccess);
this.geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE, geocoderFailure);

this.geocoder.geocode("N Martin L King");
this.google3DMap.addEventListener(MapMouseEvent.CLICK , onMapClick);

atlasObj.roadAtlas(this.google3DMap);
accumulateData();
plotMarkers();
}

/**
* This method will convert xml data to array collection and show in datagrid
*/
private function accumulateData():void
{
for (var i:uint = 0; i < locations.row.length(); i++)
{
this.databaseCollection.addItem({latitudeDegree: locations.row[i].r_latitude.valueOf(), longitudeDegree: locations.row[i].r_longitude.valueOf()});
}
}

/**
* This method will be executed when we click the show Route button, it loads the direction in the map
* @Event evt This is the Direction Event i.e. DirectionsEvent
*/
private function onDirLoad(evt:DirectionsEvent):void
{
var locateDirection:Directions = Directions(evt.directions);       
var startMarker:Marker;
var endMarker:Marker;

this.google3DMap.clearOverlays();
this.google3DMap.addOverlay(locateDirection.createPolyline());
this.google3DMap.setZoom(this.google3DMap.getBoundsZoomLevel(dir.bounds));
this.google3DMap.setCenter(locateDirection.bounds.getCenter());

startMarker = new Marker(locateDirection.getRoute(0).startGeocode.point, new MarkerOptions({fillStyle: {color:Color.GREEN}}));
endMarker = new Marker(locateDirection.getRoute(0).endGeocode.point, new MarkerOptions({fillStyle: {color:Color.GREEN}}));

startMarker.addEventListener(MapMouseEvent.ROLL_OVER, function (event:MapMouseEvent):void
{
startMarker.openInfoWindow(new InfoWindowOptions({contentHTML: "<b>" + locateDirection.getRoute(0).startGeocode.address}));
});

startMarker.addEventListener(MapMouseEvent.ROLL_OUT, function (event:MapMouseEvent):void
{
startMarker.closeInfoWindow();
});

endMarker.addEventListener(MapMouseEvent.ROLL_OVER, function (event:MapMouseEvent):void
{
endMarker.openInfoWindow(new InfoWindowOptions({contentHTML: "<b>" + locateDirection.getRoute(0).endGeocode.address}));
});

endMarker.addEventListener(MapMouseEvent.ROLL_OUT, function (event:MapMouseEvent):void
{
endMarker.closeInfoWindow();
});

this.google3DMap.addOverlay(startMarker);
this.google3DMap.addOverlay(endMarker);

if(isGetDirectionButtonClicked == true)
{
processStepByStep();
}

this.distanceCalc = Number(locateDirection.distance)/1000;
this.durationCalc = locateDirection.durationHtml;
}

/**
* This method will be executed when it fails to load the direction
* @Event evt This is the Direction Event i.e. DirectionsEvent
*/
private function onDirFail(event:DirectionsEvent):void 
{
Alert.show("Directions Failed - Check your address and try again.");
}

/**
* This method will be executed when it succeeds to locate the place in the map
* @Event evt This is the GeocodingEvent
*/
private function geocoderSuccess(evt:GeocodingEvent):void
{
var placemark:Placemark = GeocodingResponse(evt.response).placemarks[0];

this.google3DMap.panTo(placemark.point);
}

/**
* This method will be executed when it fails to locate the place on the map
* @Event evt This is the GeocodingEvent
*/
private function geocoderFailure(evt:GeocodingEvent):void
{
Alert.show("Unable to Load Map");
}

/**
* This method will be executed whenever the map is clicked
* @Event evt This is the MapMouseEvent
*/
private function onMapClick(evt:MapMouseEvent):void 
{
var coordinateMarker:Marker = new Marker(evt.latLng);

this.google3DMap.addOverlay(coordinateMarker);
this.polygonCoordinates.push(evt.latLng);

coordinateMarker.addEventListener(MapMouseEvent.ROLL_OVER, function(e:Event):void 
{
coordinateMarker.openInfoWindow(new InfoWindowOptions({contentHTML: "<b>Latitude: " + evt.latLng.lat() + "</b><br/><b>Longitude: " + evt.latLng.lng() + "</b>"}));
});

coordinateMarker.addEventListener(MapMouseEvent.ROLL_OUT, function(e:Event):void 
{
coordinateMarker.closeInfoWindow();
});

if(drawPolygons.selected)
{
drawCoordinates();
}
else
{
this.coordinateDataProvider.addItem({latitudeDegree : evt.latLng.lat(),longitudeDegree : evt.latLng.lng()});
this.databaseCollection.addItem({latitudeDegree : evt.latLng.lat(),longitudeDegree : evt.latLng.lng()});
createNewArray();
}
}

/**
* This method will be executed when user clicks the search button of the application
* @Event evt This is the mouse event
*/
private function searchLocation(evt:Event):void
{
var searchObj:SearchLocationUtil = new SearchLocationUtil();
searchObj.getLocation(this.google3DMap,this.geocoder,this.address.text);
}

/**
* This method will be executed when user wants to locate the route in the map
* @param user given locations source and destination
* @Event evt This is the MouseEvent
*/
private function processDirections(event:Event):void
{
this.dir.load("from: " + this.from.text + " to: " + this.to.text);
this.turnCounter = 0;
}

/**
* This method plots the markers between the source and destination
* It also generates a summary of the entire route
*/
private function processStepByStep():void 
{
var stepText:String;
var stepMarker:Marker;

this.step = "\n";

for(var i:int=0; i<dir.getRoute(0).numSteps; i++)
{
this.turnCounter++;

if (this.turnCounter <= dir.getRoute(0).numSteps) 
{
stepText = dir.getRoute(0).getStep(this.turnCounter-1).descriptionHtml + "\n\n";

stepMarker = new Marker(dir.getRoute(0).getStep(this.turnCounter-1).latLng, new MarkerOptions({label: this.turnCounter.toString()}));

this.google3DMap.addOverlay(stepMarker);

this.step += "Step " + this.turnCounter + ": " + "\n" + stepText;  
}
else
{
this.step += "Arrive at " + to.text + " : " + dir.getRoute(0).summaryHtml;
}  
}
launchDirections();
} 

/**
* This method will be executed when user wants the detailed report of the route
* It also gives a summary of the route in a popup window
*/
private function launchDirections():void
{
var titleWindow:TitleWindowWpath = PopUpManager.createPopUp(this, TitleWindowDirections, true) as TitleWindowWpath;
titleWindow.path = this.step;
}

/**
* This method will be executed on map right click
* @Event evt This is the MouseEvent
*/
private function onMapRightClick(event:MouseEvent):void
{
if(drawPolygons.selected)
this.coordinateDataProvider.addItem(this.polygonCoordinates);

createNewArray();
}

/**
* This method is executed when user clicks the zoom in button
* It zooms in the map
* @Event evt This is the MouseEvent
*/
private function onClickingZoominButton(event:MouseEvent):void
{
this.getZoomValue = this.google3DMap.getZoom();
this.getZoomValue = this.getZoomValue + 0.5;
this.google3DMap.setZoom(this.getZoomValue);
}

/**
* This method is executed when user clicks the zoom out button
* It zooms out the map
* @Event evt This is the MouseEvent
*/
private function onClickingZoomOutButton(event:MouseEvent):void
{
this.getZoomValue = this.google3DMap.getZoom();
this.getZoomValue = this.getZoomValue - 0.5;
this.google3DMap.setZoom(this.getZoomValue);
}

/**
* This method is executed when user clicks the items of the datagrid
* It locates the user clicked latitude longitude on the Map
* @Event evt This is the ListEvent
*/
private function locateMarker(event:ListEvent):void
{
this.address.text = event.itemRenderer.data.latitudeDegree + "," + event.itemRenderer.data.longitudeDegree;
this.geocoder.geocode(this.address.text);

clearCircle();

var circleObj:DrawCirclePolygonUtil = new DrawCirclePolygonUtil();
circleObj.drawCircle(event.itemRenderer.data.latitudeDegree, event.itemRenderer.data.longitudeDegree, 0.0015, this.google3DMap);

this.address.text = "";
}

/**
* This method clears the current circle polygon and plots the deafault locations again
* @Param latitude, longitude, radius, etc.
*/
private function clearCircle():void
{
this.google3DMap.clearOverlays();
plotMarkers();
}

/**
* This method creates the polygon in th map
* @Param latitude, longitude, radius, etc.
*/
private function createPolygon():void
{
var polyUtilObj:CreatePolyUtil = new CreatePolyUtil();
polyUtilObj.displayPoly(this.google3DMap,this.coordinateDataProvider,this.drawComboBox);
}

/**
* This method shows the marked region in the map
* @Event evt This is the MouseEvent
*/
private function onClickingShowMarked(event:MouseEvent):void
{
createPolygon();
}

/**
* This method plots the default coordunates locations in the map
*/
private function plotMarkers():void
{
for (var i:uint = 0; i < locations.row.length(); i++)
{
getMarker(locations.row[i]);

this.coordinateDataProvider.addItem({latitudeDegree: locations.row[i].r_latitude.valueOf(), longitudeDegree: locations.row[i].r_longitude.valueOf()});
}
}

/**
* This method creates a new polygon
*/
private function createNewArray():void
{
this.polygonCoordinates = new Array();
}

/**
* This method marks the coordinates in the map
*/
private function getMarker(object:Object):void
{
var displayMarker:Marker = new Marker(new LatLng(Number(object.r_latitude), Number(object.r_longitude)));

displayMarker.addEventListener(MapMouseEvent.ROLL_OVER, function(e:Event):void 
{
displayMarker.openInfoWindow(new InfoWindowOptions({contentHTML: "<b>Latitude: " + object.r_latitude + "</b><br/><b>Longitude: " + object.r_longitude + "</b>"}));
});

displayMarker.addEventListener(MapMouseEvent.ROLL_OUT, function(e:Event):void 
{
displayMarker.closeInfoWindow();
});

this.google3DMap.addOverlay(displayMarker);
}

/**
* This method draws a polygon in the map
*/
private function drawCoordinates():void
{
if (this.polygonCoordinates.length > 1)
{
this.polygonObj = new Polygon(this.polygonCoordinates);
this.google3DMap.addOverlay(this.polygonObj);
}
}

/**
* This method clears the map back to the initial state
* @Event evt This is the MouseEvent
*/
private function onMapClear(event:MouseEvent):void
{
clearMap();
clearCircle();
}

/**
* This method clears teh texts label in the Map back to initial
*/
private function clearMap():void
{
this.google3DMap.clearOverlays();
this.polygonObj = null;
this.polygonCoordinates.length = 0;

this.to.text = "";
this.from.text = "";
this.distanceCalc = 0;
this.durationCalc = "0 hours 0 mins";
}


/**
* This method clears the datagrid back to the initial state
* @Event evt This is the MouseEvent
*/
private function onClickingResetDatgrid(event:MouseEvent):void
{
this.databaseCollection.removeAll();
accumulateData();
}
]]>
</mx:Script>

</mx:WindowedApplication>