topic Re: Getting error while implementing getRoute() function in ArcGIS JavaScript Maps SDK Questions

Getting error while implementing getRoute() function

SahilBansal — Wed, 14 Apr 2021 14:21:52 GMT

Hi,

While implementing route and directions in my application but getting the following errors in the getRoute() functions.

Property 'solve' does not exist on type 'RouteTaskConstructor'.

Property 'route' is missing in type '{ directions: { features: any; }; }' but required in type '{ route: Graphic; }'.

Type 'number[]' is missing the following properties from type 'Color': a, b, g, r, and 7 more.

The expected type comes from property 'color' which is declared here on type 'Symbol'

Cannot assign to 'classList' because it is a read-only property.

Property 'directions' does not exist on type '{ route: Graphic; }'.

PFB the code snippet:

const getRoute = () => {

const routeParams = new RouteParameters({

stops: new FeatureSet({

features: view.graphics.toArray()

}),

returnDirections: true

});

RouteTask.solve(routeParams)

.then((data: { routeResults: { route: Graphic; }[] | { directions: { features: any; }; }[]; }) => {

data.routeResults.forEach((result: { route: Graphic; }) => {

result.route.symbol = {

type: 'simple-line',

color: [5, 150, 255],

width: 3

};

view.graphics.add(result.route);

});

if (data.routeResults.length > 0) {

const directions = document.createElement('ol');

directions.classList = 'esri-widget esri-widget--panel esri-directions__scroller';

directions.style.marginTop = '0';

directions.style.padding = '15px 15px 15px 30px';

const features = data.routeResults[0].directions.features;

features.forEach((result: { attributes: { text: string; length: number; }; }, i: any) => {

const direction = document.createElement('li');

direction.innerHTML = result.attributes.text + ' (' + result.attributes.length.toFixed(2) + ' miles)';

directions.appendChild(direction);

});

view.ui.empty('top-right');

view.ui.add(directions, 'top-right');

}

});

};

Re: Getting error while implementing getRoute() function

SahilBansal — Wed, 14 Apr 2021 17:28:00 GMT

Hi,

Could anyone please help me with this issue?

Re: Getting error while implementing getRoute() function

UndralBatsukh — Wed, 14 Apr 2021 19:47:54 GMT

Hi there,

From what I can see you are using the RouteTask module to call solve like this RouteTask.solve(). Solve is not a static method on RouteTask. Have you created a new instance of the RouteTask? Use the instance of RouteTask to call the solve method. This sample shows how to set up RouteTask:

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=tasks-route

Hope that is the issue.

-Undral

Re: Getting error while implementing getRoute() function

SahilBansal — Thu, 15 Apr 2021 04:37:47 GMT

Hi,

Thanks for the reply!

I have created an instance and now I am getting the below errors.

Property 'routeResults' does not exist on type 'RouteResult'.

Type 'number[]' is missing the following properties from type 'Color': a, b, g, r, and 7 more.

Cannot assign to 'classList' because it is a read-only property.

Here is the code snippet.

const getRoute = () => {

const routeParams = new RouteParameters({

stops: new FeatureSet({

features: view.graphics.toArray()

}),

returnDirections: true

});

routeTask.solve(routeParams)

.then((data) => {

data.routeResults.forEach((result: { route: Graphic; }) => {

result.route.symbol = {

type: 'simple-line',

color: [5, 150, 255],

width: 3

};

view.graphics.add(result.route);

});

if (data.routeResults.length > 0) {

const directions = document.createElement('ol');

directions.classList = 'esri-widget esri-widget--panel esri-directions__scroller';

directions.style.marginTop = '0';

directions.style.padding = '15px 15px 15px 30px';

const features = data.routeResults[0].directions.features;

features.forEach((result: { attributes: { text: string; length: number; }; }, i: any) => {

const direction = document.createElement('li');

direction.innerHTML = result.attributes.text + ' (' + result.attributes.length.toFixed(2) + ' miles)';

directions.appendChild(direction);

});

view.ui.empty('top-right');

view.ui.add(directions, 'top-right');

}

});

};

Re: Getting error while implementing getRoute() function

SahilBansal — Thu, 15 Apr 2021 17:30:26 GMT

Hi,

Thanks for the reply!

I have created an instance and now I am getting the below errors.

Property 'routeResults' does not exist on type 'RouteResult'.

Type 'number[]' is missing the following properties from type 'Color': a, b, g, r, and 7 more.

Cannot assign to 'classList' because it is a read-only property.

Here is the code snippet.

const getRoute = () => {

const routeParams = new RouteParameters({

stops: new FeatureSet({

features: view.graphics.toArray()

}),

returnDirections: true

});

routeTask.solve(routeParams)

.then((data) => {

data.routeResults.forEach((result: { route: Graphic; }) => {

result.route.symbol = {

type: 'simple-line',

color: [5, 150, 255],

width: 3

};

view.graphics.add(result.route);

});

if (data.routeResults.length > 0) {

const directions = document.createElement('ol');

directions.classList = 'esri-widget esri-widget--panel esri-directions__scroller';

directions.style.marginTop = '0';

directions.style.padding = '15px 15px 15px 30px';

const features = data.routeResults[0].directions.features;

features.forEach((result: { attributes: { text: string; length: number; }; }, i: any) => {

const direction = document.createElement('li');

direction.innerHTML = result.attributes.text + ' (' + result.attributes.length.toFixed(2) + ' miles)';

directions.appendChild(direction);

});

view.ui.empty('top-right');

view.ui.add(directions, 'top-right');

}

});

};

Re: Getting error while implementing getRoute() function

UndralBatsukh — Thu, 15 Apr 2021 18:04:22 GMT

Looks like you are using TypeScript. Autocasting is not allowed unless you are setting parameters in the class constructor. The following code needs to be update. See the updated code right below it.

result.route.symbol = { type: 'simple-line', color: [5, 150, 255], width: 3 }; // IMPORT THE FOLLOWING MODULE import SimpleLineSymbol = require("esri/symbols/SimpleLineSymbol"); // Then CHANGE YOUR CODE TO result.route.symbol = new SimpleLineSymbol({ color: [5, 150, 255], width: 3 });

As for this error: Cannot assign to 'classList' because it is a read-only property. The following code is the problem. See the fix right below it.

const directions = document.createElement('ol'); directions.classList = 'esri-widget esri-widget--panel esri-directions__scroller'; // NEEDS TO BE CHANGED TO directions.classList.add("esri-widget", "esri-widget--panel", "esri-directions__scroller");

Re: Getting error while implementing getRoute() function

SahilBansal — Thu, 15 Apr 2021 21:57:13 GMT

Hi,

Thanks for the solution.

But still this error Property 'routeResults' does not exist on type 'RouteResult is still there.

Re: Getting error while implementing getRoute() function

UndralBatsukh — Thu, 15 Apr 2021 22:52:25 GMT

That is because the RoutResult class does not have a property called routeResults. Please take a look at the SDK doc for RouteResult and modify your code.

Re: Getting error while implementing getRoute() function

SahilBansal — Thu, 15 Apr 2021 23:04:25 GMT

Hi,

RouteResult is having only 4 properties i.e direction, route, stop and routeName but whenever i am trying to use any relevant one with forEach loop..its giving me an error.

Re: Getting error while implementing getRoute() function

SahilBansal — Fri, 16 Apr 2021 14:36:02 GMT

Hi,

The routeresults properties are giving me below error while implementing with foreach loop.

directions: Property 'forEach' does not exist on type 'DirectionsFeatureSet'.

route: Property 'forEach' does not exist on type 'Graphic'.

stops: Property 'route' is missing in type 'Graphic' but required in type '{ route: Graphic; }'.

routeName: Property 'forEach' does not exist on type 'string'.

Re: Getting error while implementing getRoute() function

SahilBansal — Fri, 16 Apr 2021 14:36:49 GMT

Hi Undral,

The routeresults properties are giving me below error while implementing with foreach loop.

directions: Property 'forEach' does not exist on type 'DirectionsFeatureSet'.

route: Property 'forEach' does not exist on type 'Graphic'.

stops: Property 'route' is missing in type 'Graphic' but required in type '{ route: Graphic; }'.

routeName: Property 'forEach' does not exist on type 'string'.

Re: Getting error while implementing getRoute() function

UndralBatsukh — Fri, 16 Apr 2021 18:38:47 GMT

OK the following should work.

import SizeSliderViewModel = require("esri/widgets/smartMapping/SizeSlider/SizeSliderViewModel"); import SimpleMarkerSymbol = require("esri/symbols/SimpleMarkerSymbol"); import SimpleLineSymbol = require("esri/symbols/SimpleLineSymbol"); import FeatureSet = require("esri/tasks/support/FeatureSet"); import Graphic = require("esri/Graphic"); import GraphicsLayer = require("esri/layers/GraphicsLayer"); import Map = require("esri/Map"); import MapView = require("esri/views/MapView"); import RouteParameters = require("esri/tasks/support/RouteParameters"); import RouteTask = require("esri/tasks/RouteTask"); // Point the URL to a valid route service that uses an // ArcGIS Online hosted service proxy var routeTask = new RouteTask({ url: "https://utility.arcgis.com/usrsvcs/appservices/srsKxBIxJZB0pTZ0/rest/services/World/Route/NAServer/Route_World" }); // The stops and route result will be stored in this layer var routeLayer = new GraphicsLayer(); // // Setup the route parameters var routeParams = new RouteParameters({ stops: new FeatureSet(), outSpatialReference: { // autocasts as new SpatialReference() wkid: 3857 }, returnDirections: true }); // Define the symbology used to display the stops var stopSymbol = new SimpleMarkerSymbol({ style: "cross", size: 15, outline: { // autocasts as new SimpleLineSymbol() width: 4 } }); var map = new Map({ basemap: "streets-navigation-vector", layers: [routeLayer] // Add the route layer to the map }); var 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 var stop = new Graphic({ geometry: event.mapPoint, symbol: stopSymbol }); view.graphics.add(stop); // // Execute the route task if 2 or more stops are input const stops = routeParams.stops as __esri.FeatureSet; stops.features.push(stop); if (stops.features.length >= 2) { routeTask.solve(routeParams).then(getRoute); } } const getRoute = () => { routeTask.solve(routeParams).then((data: any) => { console.log(data); data.routeResults.forEach((result) => { result.route.symbol = new SimpleLineSymbol({ // type: "simple-line", color: [5, 150, 255], width: 3 }); view.graphics.add(result.route); console.log("result", result); if (result.directions) { const directions = document.createElement("ol"); directions.classList.add("esri-widget", "esri-widget--panel", "esri-directions__scroller"); directions.style.marginTop = "0"; directions.style.padding = "15px 15px 15px 30px"; const features = result.directions.features; console.log("features", features); features.forEach((result: { attributes: { text: string; length: number } }, i: any) => { const direction = document.createElement("li"); direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)"; directions.appendChild(direction); }); view.ui.empty("top-right"); view.ui.add(directions, "top-right"); } }); }); };

Re: Getting error while implementing getRoute() function

SahilBansal — Fri, 16 Apr 2021 18:51:36 GMT

but still this error Property 'routeResults' does not exist on type 'RouteResult' persists

Re: Getting error while implementing getRoute() function

UndralBatsukh — Fri, 16 Apr 2021 19:41:47 GMT

Have you copied the entire code? It is working for me in TS. To get around that issue I added the following:

routeTask.solve(routeParams).then((data: any) => {

Not sure how much more I can help.

Re: Getting error while implementing getRoute() function

SahilBansal — Fri, 16 Apr 2021 19:48:13 GMT

Hi Undral,

Sorry, I overlooked the code.

Anyway, its showing 0 compile errors now..thanks for your help.

Really Appreciated.

Sahil

Re: Getting error while implementing getRoute() function

UndralBatsukh — Fri, 16 Apr 2021 19:53:40 GMT

Glad it is working. Can you set this question as resolved?

Thanks, -Undral