Pedro,
Here is your code working:
<!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.17/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
<script src="https://js.arcgis.com/3.17/"></script>
<script>
var map;
// var sensors = getSensors();
var sensorIndex = 0;
require([
"esri/urlUtils",
"esri/config",
"esri/map",
"esri/geometry/webMercatorUtils",
"esri/graphic",
"esri/SpatialReference",
"esri/geometry/Point",
"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",
"dojo/domReady!"
], function(
urlUtils,
esriConfig,
Map,
webMercatorUtils,
Graphic,
SpatialReference,
Point,
RouteTask,
RouteParameters,
FeatureSet,
SimpleMarkerSymbol,
SimpleLineSymbol,
Color,
array,
on,
dom,
registry,
BorderContainer,
ContentPane,
HorizontalSlider,
HorizontalRuleLabels
) {
var map, routeTask, routeParams, routes = [];
var stopSymbol, barrierSymbol, routeSymbols;
var mapOnClick_addStops_connect, mapOnClick_addBarriers_connect;
var x = -48.48;
var y = -1.45;
map = new Map("map", {
basemap: "streets",
center: [x, y],
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);
function addBarriers() {
removeEventHandlers();
addBarrier();
}
//Adds a barrier
function addBarrier() {
var eventsArray = [];
sensorArryay = getSensors();
routeParams.barriers = new FeatureSet();
for (var i = 0; i < sensorArryay.length; i++) {
var pnt = new Point(sensorArryay.contextElement.attributes[2].value, sensorArryay.contextElement.attributes[1].value, new SpatialReference(4326))
routeParams.barriers.features.push(map.graphics.add(new esri.Graphic(webMercatorUtils.geographicToWebMercator(pnt), barrierSymbol)));
}
}
//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
}
)
)
);
}
//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]);
}
}
//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"));
}
});
function getSensors() {
var result = '{"contextResponses":[{"contextElement":{"type":"StreetFixed","isPattern":"false","id":"StreetFixed1","attributes":[{"name":"aircondition","type":"float","value":"66.1"},{"name":"lat","type":"float","value":"-1.4519538"},{"name":"lng","type":"float","value":"-48.4781193"},{"name":"temperature","type":"float","value":"29.8"}]},"statusCode":{"code":"200","reasonPhrase":"OK"}},{"contextElement":{"type":"StreetFixed","isPattern":"false","id":"StreetFixed2","attributes":[{"name":"aircondition","type":"float","value":"66.1"},{"name":"lat","type":"float","value":"-1.4519062"},{"name":"lng","type":"float","value":"-48.476207"},{"name":"temperature","type":"float","value":"29.8"}]},"statusCode":{"code":"200","reasonPhrase":"OK"}},{"contextElement":{"type":"StreetFixed","isPattern":"false","id":"StreetFixed3","attributes":[{"name":"aircondition","type":"float","value":"66.1"},{"name":"lat","type":"float","value":"-1.4518047"},{"name":"lng","type":"float","value":"-48.4744374"},{"name":"temperature","type":"float","value":"29.8"}]},"statusCode":{"code":"200","reasonPhrase":"OK"}},{"contextElement":{"type":"StreetFixed","isPattern":"false","id":"StreetFixed4","attributes":[{"name":"aircondition","type":"float","value":"66.1"},{"name":"lat","type":"float","value":"-1.4517104"},{"name":"lng","type":"float","value":"-48.4726244"},{"name":"temperature","type":"float","value":"29.8"}]},"statusCode":{"code":"200","reasonPhrase":"OK"}}]}';
// var request = new XMLHttpRequest();
// request.open('GET', '/getSensors', false); // `false` makes the request synchronous
// request.send(null);
//
// if (request.status === 200) {
// result = JSON.parse(request.responseText).contextResponses;
// // console.log(result);
// console.log("getSensors done!");
// }
return JSON.parse(result).contextResponses;
}
function eventFire(el, etype) {
if (el.fireEvent) {
el.fireEvent('on' + etype);
} else {
var evObj = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
}
</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>