This routing tutorial shows how to perform a route flight. A route flight is an animated movement along a route.
When clicking on the “Calculate Route” button, a route is calculated and shown on the map. In addition, the route flight control is shown on the map and the three dimensional map view is enabled. This is done with the Map24.MapApplication.displayHelicopterFlight() function. The route flight control has a “Start Route Flight” button. If the user clicks on this button, a flight is performed on the calculated route.
Note that the Map24.MapApplication.displayHelicopterFlight() allows more parameters. For example, the speed of the flight can be specified or a time delay for automatically starting the flight. These options are explained and used in the tutorial Create Polyline for Helicopter Flight in the Advanced Examples section.
Step by Step Description
View example
Executable code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Basic Route Calculation with Flight</title>
<script type="text/javascript" language="javascript" src="http://api.maptp.map24.com/ajax?appkey=ADD_YOUR_AJAX_APPLICATION_KEY_HERE"></script>
<script type="text/javascript" language="javascript">
//Declare global variables
var geocoder = null;
var router = null;
var routePoints = [];
var routeID = null;
function goMap24() {
Map24.loadApi( ["core_api", "wrapper_api"] , map24ApiLoaded );
}
function map24ApiLoaded(){
Map24.MapApplication.init( { NodeName: "maparea" } );
//Disable button for printing route description
document.getElementById("print").disabled = true;
}
function startRouting(){
//Retrieve start and destination of the route from the input fields
var start = Map24.trim( $v('start') );
var destination = Map24.trim( $v('destination') );
//Check if the start and the destination form fields are empty
if( start == "" ) { alert("Please enter start address!"); return; }
if( destination == "" ) { alert("Please enter destination address!"); return; }
//Disable the button for starting a route calculation.
document.getElementById("button_calculate_route").disabled = true;
//Enable buttons for hiding or removing a route
document.getElementById("button_hide_route").disabled = false;
document.getElementById("button_remove_route").disabled = false;
//Create a geocoder stub
geocoder = new Map24.GeocoderServiceStub();
//Geocode the start point of the route
geocoder.geocode({
SearchText: start,
//Define the name of the callback function that is called when the result is available on the client.
CallbackFunction: setRouteEndPoint,
//Set a parameter that is passed to the callback function. The parameter defines that this is the start point.
CallbackParameters: {position: "start"}
});
//Geocode the destination point of the route
geocoder.geocode({
SearchText: destination,
CallbackFunction: setRouteEndPoint,
CallbackParameters: {position: "destination"}
});
}
//Callback function that is called when the geocoding result is available.
//The locations parameter contains an array with multiple alternative geocoding results.
//The params parameter passes the value of CallbackParameters that specifies which route
//end point is returned (start or destination point).
function setRouteEndPoint(locations, params){
//Access the geocoded address and add it to the routePoints array.
//The geocoded address is stored at the first position in the locations array.
routePoints[ params.position ] = locations[0];
//After both the start and the destination addresses are geocoded,
//this function calls the calculateRoute() function.
if( typeof routePoints["start"] != "undefined" && typeof routePoints["destination"] != "undefined")
calculateRoute();
}
//Calculate the route.
function calculateRoute() {
router = new Map24.RoutingServiceStub();
router.calculateRoute({
Start: routePoints["start"],
Destination: routePoints["destination"],
CallbackFunction: displayRoute,
//The ShowRoute parameter is set to false, the route is not shown automatically.
//This is necessary if you want to change the default color used for showing the route.
//To show the route call the Map24.RoutingServiceStub.showRoute() function in the callback function.
ShowRoute: false
});
document.getElementById("print").disabled = true;
routePoints = [];
}
//Callback function used to access the calculated route of type Map24.WebServices.Route.
//This function is called after the client has received the result from the routing service.
function displayRoute( route ){
//Remember the routeId. It is used e.g. to hide the route.
routeID = route.RouteID;
//Show the route with blue color and transparency
router.showRoute( {
RouteId: routeID,
Color: ['#00F', 150]
});
//Enable helicopter flight on the route. The route flight control
//will be shown on the map. To start the route flight click on the
//start button of the route flight control.
Map24.MapApplication.displayHelicopterFlight({ RouteId: routeID });
//Access the assumed time needed for traversing the route in hours
var totalTime = ((route.TotalTime)/(60*60) ).toPrecision(3)
//Access the total lenght of the route in kilometers
var totalLength = (route.TotalLength/1000)
//Create table with description of the route
var div_content = "Total Time: " + totalTime + " h<br>" ;
div_content += "Total Length: "+ totalLength +" km<br>";
div_content += "<br>";
//Iterate through the route segments and output the step-by-step textual description of the route
for(var i = 0; i < route.Segments.length; i++){
for(var j = 0; j < route.Segments[i].Descriptions.length; j++){
//The route description contains tags for further evaluation. For example, the [M24_STREET] tag is used
//to denote a street in the description. Add the following line of code to replace these tags by a blank:
div_content += (i+1) + ". " + route.Segments[i].Descriptions[j].Text.replace(/(\[|\[\/)[0-9A-Z_]+\]/g, '' ) + "<br>";
}
}
//Show the route description
document.getElementById('routeDescription').innerHTML = div_content;
//Enable the buttons for hiding or removing the route, and for printing the route description
document.getElementById("button_hide_route").disabled = false;
document.getElementById("button_remove_route").disabled = false;
document.getElementById("print").disabled = false;
}
//Show route
function showRoute(routeID) {
router.showRoute({RouteId: routeID});
document.getElementById("button_show_route").disabled = true;
document.getElementById("button_hide_route").disabled = false;
document.getElementById("button_remove_route").disabled = false;
}
//Hide route
function hideRoute(routeID) {
router.hideRoute({RouteId: routeID});
document.getElementById("button_show_route").disabled = false;
document.getElementById("button_hide_route").disabled = true;
document.getElementById("button_remove_route").disabled = true;
}
//Remove route
function removeRoute(routeID) {
router.removeRoute({RouteId: routeID});
//Hide the route flight component
Map24.MapApplication.controlComponent({
Control:"HIDE",Component:"SHOWM3DROUTE"
});
Map24.MapApplication.controlComponent({
Control:"HIDE",Component:"M3DROUTE"
});
document.getElementById("routeDescription").innerHTML = "";
document.getElementById("button_calculate_route").disabled = false;
document.getElementById("button_show_route").disabled = true;
document.getElementById("button_hide_route").disabled = true;
document.getElementById("button_remove_route").disabled = true;
document.getElementById("print").disabled = true;
}
//Print route description
//The function opens a print preview window of the route description and one can choose the printer.
function printRouteDescription(){
var printContent = document.getElementById("routeDescription");
var windowPrint = window.open('','','left=0,top=0,width=0,height=0,toolbar=0,scrollbars=0,status=0');
windowPrint.document.write(printContent.innerHTML);
windowPrint.document.close();
windowPrint.focus();
windowPrint.print();
windowPrint.close();
}
//Helper function for accessing the div specified in the id parameter.
//The function checks first if the div contains content.
function $v( id ) {
return (document.getElementById( id ).value != "undefined") ?
document.getElementById( id ).value : "";
}
</script>
</head>
<body onload="goMap24();">
<div id="maparea" style="width:700px;height:500px;background-color:#E0E0E0;"></div>
<br />
<input type="button" id="button_calculate_route" value="Calculate Route" onclick="startRouting()" />
<input type="button" id="button_show_route" value="Show Route" onclick="showRoute( routeID )" disabled="disabled" />
<input type="button" id="button_hide_route" value="Hide Route" onclick="hideRoute( routeID )" disabled="disabled" />
<input type="button" id="button_remove_route" value="Remove Route" onclick="removeRoute( routeID )" disabled="disabled" />
<input type="button" id="print" value="Print Description" onClick="printRouteDescription()" />
<input type="button" id="reload" value="Refresh" onClick="history.go(0)" />
<br />
<br />
<div style="width:700px;border-width:0px;border-style:solid;padding:2px">
<table id="selection" class="selection" cellpadding="0" cellspacing="2" width="50%">
<tr>
<td width="276px">Start:</td>
<td width="424px"><input type='text' id='start' style="width:250px;" value='Hamburg' /></td>
</tr>
<tr>
<td width="276px">Destination:</td>
<td width="424px"><input type='text' id='destination' style="width:250px;" value='Berlin' /></td>
</tr>
</table>
</div>
<br />
<div id="routeID"></div>
<div id="routeDescription" style="text-align:left;width:700px;"></div>
</body>
</html>
