<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Driving Directions</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dgrid/css/dgrid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<style>
html,body {
font-family: Arial,Helvetica,sans-serif;
height:100%;
margin:0;
}
#map {
height:100%;
overflow:hidden;
}
#dialog {
top: 15px;
right: 15px;
position: absolute;
padding: 5px;
width: 380px;
background-color: #ffffff;
border-radius: 5px;
margin: 8px;
box-shadow: 0px 1px 3px #888;
}
#dialog input{
margin: 0.5em;
width: 20em;
}
#grid{
overflow-x:hidden;
overflow-y:auto;
}
input#directions {
margin: 0.5em auto;
width: 8em;
display: block;
}
.dgrid-row{
padding:5px;
margin-bottom:5px;
min-height:50px;
border-bottom: solid 1px #C0C0C0;
}
.dgrid-row .detail div {
cursor: pointer;
}
.dgrid-row .detail div:hover{
text-decoration:underline;
}
.distance{
float:right;
color:#C0C0C0;
font-style:italic;
}
</style>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
var map;
require([
"esri/map", "esri/tasks/locator", "esri/SpatialReference",
"esri/tasks/RouteTask", "esri/tasks/RouteParameters",
"esri/tasks/FeatureSet", "esri/units", "esri/config", "esri/lang",
"esri/symbols/PictureMarkerSymbol", "esri/graphic",
"esri/symbols/SimpleLineSymbol",
"esri/urlUtils",
"dojo/promise/all", "dojo/_base/array", "esri/Color",
"dojo/dom", "dojo/dom-construct", "dojo/on", "dojo/number",
"dgrid/Grid", "dojo/domReady!"
], function(
Map, Locator, SpatialReference,
RouteTask, RouteParameters,
FeatureSet, esriUnits, esriConfig, esriLang,
PictureMarkerSymbol, Graphic,
SimpleLineSymbol,
urlUtils,
all, arrayUtils, Color,
dom, domConstruct, on, number,
Grid
) {
var locator, routeTask, routeParams = [], segmentGraphic, directionFeatures, grid;
on(dom.byId("directions"), "click", getDirections);
on(dom.byId("Car"), "click", getCarDirections);
on(dom.byId("Truck"), "click", getTruckDirections);
on(dom.byId("Walking"), "click", getWalkingDirections);
// Use a proxy to access the routing service, which requires credits
urlUtils.addProxyRule({
urlPrefix : "route.arcgis.com",
//proxyUrl : "/sproxy/"
proxyUrl: "http://WebServer/proxy/proxy.ashx"
});
//Create a map with an initial extent. Change the extent to match the area you would like to show.
map = new Map("map", {
basemap: "streets",
center: [-117.185, 34.065],
zoom: 13
});
//Add a geocoding server as the locator. This locator will be used to find the origin and destination coordinates by input addresses.
locator = new Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
locator.outSpatialReference = map.spatialReference;
//Fire errorHandler if the locator return en error.
locator.on("error", errorHandler);
//Add a network analyst server with related parameters to execute the routing task.
routeTask = new RouteTask("http://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World");
routeParams = new RouteParameters();
routeParams.stops = new FeatureSet();
routeParams.returnRoutes = false;
routeParams.returnDirections = true;
routeParams.directionsLengthUnits = esriUnits.MILES;
routeParams.outSpatialReference = new SpatialReference({ wkid:102100 });
//Show the route when the routing task is solved successfully, otherwise fire errorHandler.
routeTask.on("solve-complete", showRoute);
routeTask.on("error", errorHandler);
//Execute a routing task when clicking "get direction".
function getDirections() {
routeParams.stops.features = [];
map.graphics.clear();
//Get origin address.
var optionsFrom = {
address: { "SingleLine": dom.byId("fromTxf").value },
outFields: ["Loc_name"]
};
var fromAddress = locator.addressToLocations(optionsFrom);
//Get destination address.
var optionsTo = {
address: { "SingleLine": dom.byId("toTxf").value },
outFields: ["Loc_name"]
};
var toAddress = locator.addressToLocations(optionsTo);
//Use dojo/promises/all to manage multiple asynchronous tasks. Once both geocodes finish, a route is calculated.
//http://livedocs.dojotoolkit.org/dojo/promise/all
all({
from: fromAddress,
to: toAddress
}).then(configureRoute);
}
function getCarDirections(){
alert('Car button click');
}
function getTruckDirections(){
alert('Truck button click');
}
function getWalkingDirections(){
alert('Walking button click');
}
//Check if the origin and destination addresses are executed successfully
//and solve the routing task.
function configureRoute(results) {
//Configure symbols to be used for destinations and route segments.
var fromSymbol = new PictureMarkerSymbol({
"angle":0,
"xoffset":0,
"yoffset":10,
"type":"esriPMS",
"url":"http://static.arcgis.com/images/Symbols/Shapes/GreenPin1LargeB.png",
"contentType":"image/png",
"width":24,
"height":24
});
var toSymbol = new PictureMarkerSymbol({
"angle":0,
"xoffset":0,
"yoffset":12,
"type":"esriPMS",
"url":"http://static.arcgis.com/images/Symbols/Shapes/RedPin1LargeB.png",
"contentType":"image/png",
"width":24,
"height":24
});
var fromStop = getCandidate(results.from);
if ( fromStop === null ) {
errorHandler("The origin address is invalid");
} else {
var fromGraphic = new Graphic(fromStop.location, fromSymbol, { address:fromStop.address });
routeParams.stops.features[0] = map.graphics.add(fromGraphic);
}
var toStop = getCandidate(results.to);
if ( toStop === null ) {
errorHandler("The destination address is invalid");
} else {
var toGraphic = new Graphic(toStop.location, toSymbol, { address:toStop.address });
routeParams.stops.features[1] = map.graphics.add(toGraphic);
}
if ( fromStop !== null && toStop !== null ) {
routeTask.solve(routeParams);
}
}
//Handle all the coordinate candidates of the origin and destination addresses and
//return the candidate with the highest score.
function getCandidate(candidates){
var stop = null, score = 0;
arrayUtils.forEach(candidates, function(candidate){
if( candidate.score > score ) {
stop = candidate;
score = candidate.score;
}
});
return stop;
}
//Show the result of the routing task.
function showRoute(e) {
debugger;
var data = [];
if ( grid ) {
grid.refresh();
}
var directions = e.result.routeResults[0].directions;
directionFeatures = directions.features;
var routeSymbol = new SimpleLineSymbol().setColor(new Color([0,0,255,0.5])).setWidth(4);
// Zoom to results.
map.setExtent(directions.mergedGeometry.getExtent(), true);
// Add route to the map.
var routeGraphic = new Graphic(directions.mergedGeometry, routeSymbol);
map.graphics.add(routeGraphic);
routeGraphic.getShape().moveToBack();
map.setExtent(directions.extent, true);
//Display the directions.
var directionsInfo = e.result.routeResults[0].directions.features;
var totalDistance = number.format(directions.totalLength);
var totalLength = number.format(directions.totalTime);
data = arrayUtils.map(directionsInfo,function(feature,index){
return {
"detail": feature.attributes.text,
"distance": number.format(feature.attributes.length,{places:2}),
"index": index
};
});
grid = new Grid({
renderRow: renderList,
showHeader:false
}, "grid");
grid.renderArray(data);
grid.on(".dgrid-row:click", zoomToSegment);
}
function renderList(obj,options){
var template = "<div class='detail'><div style='max-width:70%;float:left;'>${detail}</div><span style='float:right;' class='distance'>${distance} mi</span></div>";
return domConstruct.create("div", { innerHTML: esriLang.substitute(obj, template) });
}
//Display any errors that were caught when attempting to solve the route.
function errorHandler(err) {
alert("An error occured\n" + err);
}
function zoomToSegment(e) {
//Grid row id corresponds to the segment to highlight
var index = grid.row(e).id;
var segment = directionFeatures[index];
var segmentSymbol = new SimpleLineSymbol().setColor(new Color([255,0,0,0.5])).setWidth(8);
map.setExtent(segment.geometry.getExtent(), true);
if ( !segmentGraphic ) {
segmentGraphic = map.graphics.add(new Graphic(segment.geometry, segmentSymbol));
} else {
segmentGraphic.setGeometry(segment.geometry);
}
}
});
</script>
</head>
<body class="claro">
<div id="map"></div>
<div id="dialog">
<div>
<label for="fromTxf"><img src="http://static.arcgis.com/images/Symbols/Shapes/GreenPin1LargeB.png" width=24 height=24></label>
<input type="text" id="fromTxf" value="380 New York St, Redlands, CA 92373">
</div>
<div >
<label for="toTxf"><img src="http://static.arcgis.com/images/Symbols/Shapes/RedPin1LargeB.png" width=24 height=24></label>
<input type="text" id="toTxf" value="1320 Mona Ave, Redlands, CA 92374">
</div>
<input id="directions" type="button" value="Get Directions">
<div>
<input id="Car" type="button" value="Get Car Route">
<input id="Truck" type="button" value="Get Truck Route">
<input id="Walking" type="button" value="Get Walking Route">
</div>
<div id="directionsDetail" style="clear:both;">
<div id="grid"></div>
</div>
</div>
</body>
</html>
Message was edited by: Ashish Nagrale