Routing with polygon barriers not working Javascript API 4.24

JS_GilbertAZ — Thu, 27 Oct 2022 21:49:02 GMT

I have routing set up in my web app and working, except when I try to add a rest feature service for polygonBarriers property of RouteParameters, it fails. This is how I'm defining the polygonBarriers in the RouteParameters:

const routeParams = new RouteParameters({
stops: new FeatureSet({
features: view.graphics.toArray()
}),
returnPolygonBarriers: true,
polygonBarriers: {
"url" : "https://maps.gilbertaz.gov/arcgis/rest/services/GilbertDays2022Closure/FeatureServer/1/query?where=1%3D1&returnGeometry=true&f=json"
}
});

The error I get is below. I am pretty sure I am doing this the way the javascript API Reference show it, however I am not getting this to work. I get this error in the console:

RouteParameters.js:5 Uncaught (in promise) TypeError: n.toJSON is not a function
at r (RouteParameters.js:5:156)
at f.writePolygonBarrier (RouteParameters.js:8:186)
at q ((index):263:421)
at a.write ((index):266:327)
at f.write ((index):254:370)
at f.toJSON ((index):254:420)
at e.routeParametersToQueryParameters (utils.js:5:115)
at Module.<anonymous> (route.js:6:98)
at Generator.next (<anonymous>)
at d ((index):35:26)

Thanks in advance for any assistance provided. It may just be something minor that I'm overlooking, I've never worked with routing before...

Re: Routing with polygon barriers not working Javascript API 4.24

JayakumarPD — Fri, 28 Oct 2022 02:38:38 GMT

I think stop is not understanding the parameters in new RouteParameters, I am also learning route. Bellow is the code, which I have taken from ESRI and applied my API key. How I can generate error, which you are getting.

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Route | Sample | ArcGIS API for JavaScript 4.24</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } #paneDiv { position: absolute; top: 10px; left: 62px; padding: 0 12px 0 12px; background-color: rgba(0, 0, 0, 0.5); color: white; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.24/"></script> <script> require([ "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/layers/GraphicsLayer", "esri/rest/route", "esri/rest/support/RouteParameters", "esri/rest/support/FeatureSet" ], function(Map, MapView, Graphic, GraphicsLayer, route, RouteParameters, FeatureSet) { // Point the URL to a valid routing service const routeUrl = "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"; // The stops and route result will be stored in this layer const routeLayer = new GraphicsLayer(); // Setup the route parameters const routeParams = new RouteParameters({ // An authorization string used to access the routing service apiKey: "MY-API-KEY", // provide the array, to check stops: new FeatureSet(), outSpatialReference: { // autocasts as new SpatialReference() wkid: 3857 } }); // Define the symbology used to display the stops const stopSymbol = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() style: "cross", size: 15, outline: { // autocasts as new SimpleLineSymbol() width: 4 } }; // Define the symbology used to display the route const routeSymbol = { type: "simple-line", // autocasts as SimpleLineSymbol() color: [0, 0, 255, 0.5], width: 5 }; const map = new Map({ basemap: "streets-navigation-vector", layers: [routeLayer] // Add the route layer to the map }); const view = new MapView({ container: "viewDiv", // Reference to the scene div created in step 5 map: map, // Reference to the map object created before the scene center: [-117.195, 34.057], zoom: 13 }); // Adds a graphic when the user clicks the map. If 2 or more points exist, route is solved. view.on("click", addStop); function addStop(event) { // Add a point at the location of the map click const stop = new Graphic({ geometry: event.mapPoint, symbol: stopSymbol }); routeLayer.add(stop); // Execute the route if 2 or more stops are input routeParams.stops.features.push(stop); if (routeParams.stops.features.length >= 2) { route.solve(routeUrl, routeParams).then(showRoute); } } // Adds the solved route to the map as a graphic function showRoute(data) { const routeResult = data.routeResults[0].route; routeResult.symbol = routeSymbol; routeLayer.add(routeResult); } }); </script> </head> <body> <div id="viewDiv"></div> <div id="paneDiv" class="esri-widget"> <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, then the last valid point is set as the starting point. </p> </div> </div> </body> </html>

topic Routing with polygon barriers not working Javascript API 4.24 in ArcGIS JavaScript Maps SDK Questions

Routing with polygon barriers not working Javascript API 4.24

Re: Routing with polygon barriers not working Javascript API 4.24