Extract Profile of Google Route

View live sample

Description

This example uses Google's routing engine to calculate a route between two addresses you supply, then uses an ArcGIS Server geoprocessing service to create an elevation profile for the route. Enter two addresses and click "Get Route and Elevation Profile" to see the route and profile. The default values of Redlands to Palm Springs show that Redlands lies at a higher elevation, with a short climb and a gradual descent required to reach Palm Springs.

This application is provided as an example only. It should not be used to extract elevation profiles for real world use. The model is most effective over short distances (within a city or county).

The first function called is getDirections, which uses a GDirections object from the Google Maps API to calculate the route.

When the route is complete, an event listener calls the function generateProfile. The function sends the route polyline as input to the ProfileService geoprocessing task on the ESRI sample server.

The task returns an object whose properties include the URL to the profile image. This URL is wrapped in HTML and added as content to an info window, which automatically appears when the profile is complete. The window is anchored to the middle vertex of the route polyline.

var infoContent = "<div style='width:500px; height:250px;'><img id='" + profileFN + "' src='" + profileURL + "' ></img></div>";
map.openInfoWindowHtml(middlePnt, infoContent);

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <title>Extract Profile of Google Route Using a Geoprocessor Task</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

    <script src="http://maps.google.com/maps?file=api&v=2&key=DioG219lPJG3WTn3zmQqebsjVg" type="text/javascript"></script>
    <script src="http://serverapi.arcgisonline.com/jsapi/gmaps/?v=1.2" type="text/javascript" ></script>

    <script type="text/javascript">
    var map;  //google map
    var directions;  //google directions class
    var profileTask;

    function onLoad() {
      gmapOptions = {
        mapTypes: [G_PHYSICAL_MAP,G_NORMAL_MAP,G_HYBRID_MAP]
      }
      map = new GMap2(document.getElementById("map"),gmapOptions);
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(34.17, -117.63), 8);
      map.enableScrollWheelZoom();

      directions = new GDirections(map);

      //when directions have been loaded from Google Servers call GP profile task.
      GEvent.addListener(directions, "load", generateProfile);

      //identify proxy page to use if the toJson payload to the geoprocessor service is greater than 2000 characters.
      //If this null or not available the buffer operation will not work.  Otherwise it will do a http post to the proxy.
      esri.arcgis.gmaps.Config.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";

      profileTask = new esri.arcgis.gmaps.Geoprocessor("http://sampleserver2.arcgisonline.com/ArcGIS/rest/services/Elevation/ESRI_Elevation_World/GPServer/ProfileService");
    }


    function generateProfile(directions) {
      var polyLine = directions.getPolyline();
      if (directions.getDistance().meters <= 1000000) {
        var featureSet = new esri.arcgis.gmaps.FeatureSet();
        var feature = new esri.arcgis.gmaps.Feature();
        feature.geometry = polyLine;
        var features = [feature];
        featureSet.features = features;
        var taskParams = {'Input_Polylines':featureSet, 'Image_width':500, 'Image_Height':250, 'Display_Segments':false};
        profileTask.execute(taskParams, false, profileCallback);
      }  else {
        var middlePnt = polyLine.getVertex(polyLine.getVertexCount()/2);
        map.openInfoWindowHtml(middlePnt, "Route too long.  Please choose a route less than 1,000 km.");
      }
    }

    function profileCallback(gpResults) {
      var results = gpResults.results;
      var featureSet = results[0].value;
      var profileFeature = featureSet.features[0];
      var middleVertexIndex = Math.floor(profileFeature.geometry[0].getVertexCount() / 2);
      var middlePnt = profileFeature.geometry[0].getVertex(middleVertexIndex);

      var profileURL = profileFeature.attributes.profileURL;
      var surfaceLen = profileFeature.attributes.surfaceLen;
      var profileFN = profileFeature.attributes.profileFN;

      var infoContent = "<div style='width:500px; height:250px;'><img id='" + profileFN + "' src='" + profileURL + "' ></img></div>";
      map.openInfoWindowHtml(middlePnt, infoContent);
    }

    function getDirections() {
      map.clearOverlays();
      var fromAddr = document.getElementById('fromAddress').value;
      var toAddr = document.getElementById('toAddress').value;
      directions.load(fromAddr + " to " + toAddr);
    }


</script>

</head>
<form>
From Address: <input type="text" id="fromAddress" value="Redlands, CA" size="25"/>  
To Address: <input type="text" id="toAddress" value="Palm Springs, CA" size="25"/>  
<input type="button" value="Get Route and Elevation Profile" onclick="getDirections();" />
</form>
  <body onload="onLoad()">
    <div id="map" style="width: 100%; height: 750px; float:left; border: 1px solid black;"></div>
  </body>
</html>