Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample demonstrates the simplest use of the route task: finding a route between two points. Click the map to add stops to the route. When you've added two stops a route will be calculated. Adding subsequent stops extends the route.
When working with the Route Task, you set up some RouteParameters, such as the stops, then call the RouteTask.solve() method when you're ready to find the route. In this sample, the map's onClick event adds a stop. When two stops are detected, the solve method is called. You can listen for the onSolveComplete event to draw the results on the map. The drawing is accomplished in this example through the showRoute function.
You'll also want to handle errors in case a route can't be calculated. In this sample, if the route task fires the onError event, the errorHandler function is called. This function displays a message with the error text and removes the stop that caused the error, thus allowing the user to continue adding stops.
This sample requires a proxy to handle communications with the Routing and Directions service. This example uses an ArcGIS Online hosted proxy. You can either remove it and log in once prompted, or you can set up your ownservice proxy.
Code
<!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>Simple Routing</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<script src="https://js.arcgis.com/3.46/"></script>
<script>
require([
"esri/map",
"esri/graphic",
"esri/tasks/RouteTask",
"esri/tasks/RouteParameters",
"esri/tasks/FeatureSet",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/Color",
"dojo/on",
"dijit/registry",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/HorizontalSlider",
"dijit/form/HorizontalRuleLabels"
], function (
Map, Graphic, RouteTask, RouteParameters,
FeatureSet, SimpleMarkerSymbol, SimpleLineSymbol,
Color, on, registry
) {
var map, routeTask, routeParams;
var stopSymbol, routeSymbol, lastStop;
map = new Map("map", {
basemap : "streets-vector",
center : [-117.195, 34.057],
zoom : 14
});
map.on("click", addStop);
routeTask = new RouteTask("https://utility.arcgis.com/usrsvcs/appservices/srsKxBIxJZB0pTZ0/rest/services/World/Route/NAServer/Route_World");
//setup the route parameters
routeParams = new RouteParameters();
routeParams.stops = new FeatureSet();
routeParams.outSpatialReference = {
"wkid" : 102100
};
routeTask.on("solve-complete", showRoute);
routeTask.on("error", errorHandler);
//define the symbology used to display the route
stopSymbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_CROSS).setSize(15);
stopSymbol.outline.setWidth(4);
routeSymbol = new SimpleLineSymbol().setColor(new dojo.Color([0, 0, 255, 0.5])).setWidth(5);
//Adds a graphic when the user clicks the map. If 2 or more points exist, route is solved.
function addStop(evt) {
var stop = map.graphics.add(new Graphic(evt.mapPoint, stopSymbol));
routeParams.stops.features.push(stop);
if (routeParams.stops.features.length >= 2) {
routeTask.solve(routeParams);
lastStop = routeParams.stops.features.splice(0, 1)[0];
}
}
//Adds the solved route to the map as a graphic
function showRoute(evt) {
map.graphics.add(evt.result.routeResults[0].route.setSymbol(routeSymbol));
}
//Displays any error returned by the Route Task
function errorHandler(err) {
alert("An error occured\n" + err.message + "\n" + err.details.join("\n"));
routeParams.stops.features.splice(0, 0, lastStop);
map.graphics.remove(routeParams.stops.features.splice(1, 1)[0]);
}
});
</script>
</head>
<body class="claro">
<div id="map" style="width:600px; height:400px; border:1px solid #000;"></div>
<p>Click on the map to add stops to the route. The route from the last stop to the newly added stop is calculated. If a stop is not reachable, it is removed and the last valid point is set as the starting point.</p>
</body>
</html>