Want to driving direction between two points on map

AdarshSharma — Wed, 19 Apr 2017 12:06:46 GMT

Hello, i m new in network analysis and I want to driving direction in this example can any one tell me how to get driving direction using this example.

<!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>Multiple Routes</title>

<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">

<script src="https://js.arcgis.com/3.20/"></script>
<script>
require([
"esri/urlUtils",
"esri/config",
"esri/map",
"esri/graphic",
"esri/tasks/RouteTask",
"esri/tasks/RouteParameters",

"esri/tasks/FeatureSet",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",

"esri/Color",
"dojo/_base/array",
"dojo/on",
"dojo/dom",
"dijit/registry",

"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/HorizontalSlider",
"dijit/form/HorizontalRuleLabels"
], function (
urlUtils, esriConfig, Map, Graphic, RouteTask, RouteParameters,
FeatureSet, SimpleMarkerSymbol, SimpleLineSymbol,
Color, array, on, dom, registry
) {
var map, routeTask, routeParams, routes = [];
var stopSymbol, barrierSymbol, routeSymbols;
var mapOnClick_addStops_connect, mapOnClick_addBarriers_connect;

urlUtils.addProxyRule({
urlPrefix: "route.arcgis.com",
proxyUrl: "/sproxy/"
});

map = new Map("map", {
basemap: "streets",
center: [-122.416, 37.802],
zoom: 15
});

routeTask = new RouteTask("https://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World");
routeParams = new RouteParameters();
routeParams.stops = new FeatureSet();
routeParams.barriers = new FeatureSet();
routeParams.outSpatialReference = {"wkid":102100};

routeTask.on("solve-complete", showRoute);
routeTask.on("error", errorHandler);

stopSymbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_CROSS).setSize(15);
stopSymbol.outline.setWidth(3);

barrierSymbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_X).setSize(10);
barrierSymbol.outline.setWidth(3).setColor(new Color([255,0,0]));

routeSymbols = {
"Route 1": new SimpleLineSymbol().setColor(new Color([0,0,255,0.5])).setWidth(5),
"Route 2": new SimpleLineSymbol().setColor(new Color([0,255,0,0.5])).setWidth(5),
"Route 3": new SimpleLineSymbol().setColor(new Color([255,0,255,0.5])).setWidth(5)
};

//button click event listeners can't be added directly in HTML when the code is wrapped in an AMD callback
on(dom.byId("addStopsBtn"), "click", addStops);
on(dom.byId("clearStopsBtn"), "click", clearStops);
on(dom.byId("addBarriersBtn"), "click", addBarriers);
on(dom.byId("clearBarriersBtn"), "click", clearBarriers);
on(dom.byId("solveRoutesBtn"), "click", solveRoute);
on(dom.byId("clearRoutesBtn"), "click", clearRoutes);

//Begins listening for click events to add stops
function addStops() {
removeEventHandlers();
mapOnClick_addStops_connect = map.on("click", addStop);
}

//Clears all stops
function clearStops() {
removeEventHandlers();
for (var i=routeParams.stops.features.length-1; i>=0; i--) {
map.graphics.remove(routeParams.stops.features.splice(i, 1)[0]);
}
}

//Adds a stop. The stop is associated with the route currently displayed in the dropdown
function addStop(evt) {
routeParams.stops.features.push(
map.graphics.add(
new esri.Graphic(
evt.mapPoint,
stopSymbol,
{ RouteName:dom.byId("routeName").value }
)
)
);
}

//Begins listening for click events to add barriers
function addBarriers() {
removeEventHandlers();
mapOnClick_addBarriers_connect = on(map, "click", addBarrier);
}

//Clears all barriers
function clearBarriers() {
removeEventHandlers();
for (var i=routeParams.barriers.features.length-1; i>=0; i--) {
map.graphics.remove(routeParams.barriers.features.splice(i, 1)[0]);
}
}

//Adds a barrier
function addBarrier(evt) {
routeParams.barriers.features.push(
map.graphics.add(
new esri.Graphic(
evt.mapPoint,
barrierSymbol
)
)
);
}

//Stops listening for click events to add barriers and stops (if they've already been wired)
function removeEventHandlers() {
if (mapOnClick_addStops_connect) {
mapOnClick_addStops_connect.remove();
}
if (mapOnClick_addBarriers_connect) {
mapOnClick_addBarriers_connect.remove();
}
}

//Solves the routes. Any errors will trigger the errorHandler function.
function solveRoute() {
removeEventHandlers();
routeTask.solve(routeParams);
}

//Clears all routes
function clearRoutes() {
for (var i=routes.length-1; i>=0; i--) {
map.graphics.remove(routes.splice(i, 1)[0]);
}
routes = [];
}

//Draws the resulting routes on the map
function showRoute(evt) {
clearRoutes();

array.forEach(evt.result.routeResults, function(routeResult, i) {
routes.push(
map.graphics.add(
routeResult.route.setSymbol(routeSymbols[routeResult.routeName])
)
);
});

var msgs = ["Server messages:"];
array.forEach(evt.result.messages, function(message) {
msgs.push(message.type + " : " + message.description);
});
if (msgs.length > 1) {
alert(msgs.join("\n - "));
}
}

//Reports any errors that occurred during the solve
function errorHandler(err) {
alert("An error occured\n" + err.message + "\n" + err.details.join("\n"));
}
});
</script>

</head>
<body class="claro">

Select route name: <select id="routeName">
<option value="Route 1">Route 1</option>
<option value="Route 2">Route 2</option>
<option value="Route 3">Route 3</option>
</select> to
<button id="addStopsBtn">Add Stops</button>
<button id="clearStopsBtn">Clear Stops</button>
<button id="addBarriersBtn">Add Barriers</button>
<button id="clearBarriersBtn">Clear Barriers</button>
<button id="solveRoutesBtn">Solve Routes</button>
<button id="clearRoutesBtn">Clear Routes</button>
<br /><br />
<div id="map" style="width:600px; height:400px; border:1px solid #000;"></div>
<ol>
<li>Select a route name from the drop down.</li>
<li>Click 'Add stops', then click on map to add stops to route.</li>

<li>Click the 'Add Barriers', then click on map to add barriers.</li>
<li>Optionally, repeat the above steps to add more routes.</li>
<li>Click the 'Solve Routes' to solve.</li>
</ul>
<p>Any server error messages will be displayed in an alert box.</p>
</body>
</html>

Re: Want to driving direction between two points on map

Anonymous User — Wed, 19 Apr 2017 13:59:01 GMT

Hello,

Check profile image and create model builder GP service and use it in you application developed.

I have used it in our application developed using ArcGIS viewer for flex (flexviewer)

Ahmedabad 10K Map

patel1684

let me know if you require more details.

Re: Want to driving direction between two points on map

AdarshSharma — Thu, 20 Apr 2017 06:04:28 GMT

Actually i want to driving direction between two stop point using network analysis arc gis api for javascript. like this

topic Want to driving direction between two points on map in ArcGIS JavaScript Maps SDK Questions

Want to driving direction between two points on map

Re: Want to driving direction between two points on map

Re: Want to driving direction between two points on map