Skip to content

Instantly share code, notes, and snippets.

@wraithan
Created April 26, 2011 03:37
Show Gist options
  • Save wraithan/941754 to your computer and use it in GitHub Desktop.
Save wraithan/941754 to your computer and use it in GitHub Desktop.
<!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&amp;v=2&amp;key=DioG219lPJG3WTn3zmQqebsjVg" type="text/javascript"></script>
<script src="http://serverapi.arcgisonline.com/jsapi/gmaps/?v=1.6" 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"/>&nbsp;&nbsp;
To Address: <input type="text" id="toAddress" value="Palm Springs, CA" size="25"/>&nbsp;&nbsp;
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment