How to change the Route Direction when click on button Car/Truck/Walking

AshishNagrale — Thu, 26 Mar 2015 14:10:51 GMT

<!DOCTYPE html>

<html>

<head>

<title>Driving Directions</title>

<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>

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>

<div>

</div>

<div >

</div>

<div>

</div>

</div>

</body>

</html>

Message was edited by: Ashish Nagrale

topic How to change the Route Direction when click on button Car/Truck/Walking in ArcGIS JavaScript Maps SDK Questions

How to change the Route Direction when click on button Car/Truck/Walking