Getting error while implementing getRoute() function

1447
15
Jump to solution
04-14-2021 07:21 AM
SahilBansal
New Contributor II

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: { routeGraphic; }[] | { directions: { featuresany; }; }[]; }) => {
        data.routeResults.forEach((result: { routeGraphic; }) => {
          result.route.symbol = {
            type: 'simple-line',
            color: [5150255],
            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: { textstringlengthnumber; }; }, iany=> {
              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');
       }
     });
  };
0 Kudos
1 Solution

Accepted Solutions
UndralBatsukh
Esri Regular Contributor

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

Thanks, -Undral

View solution in original post

0 Kudos
15 Replies
SahilBansal
New Contributor II

Hi,

Could anyone please help me with this issue?

0 Kudos
UndralBatsukh
Esri Regular Contributor

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

 

0 Kudos
SahilBansal
New Contributor II

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: { routeGraphic; }) => {
          result.route.symbol = {
            type: 'simple-line',
            color: [5150255],
            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: { textstringlengthnumber; }; }, iany=> {
              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');
       }
     });
  };
0 Kudos
SahilBansal
New Contributor II

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: { routeGraphic; }) => {
          result.route.symbol = {
            type: 'simple-line',
            color: [5150255],
            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: { textstringlengthnumber; }; }, iany=> {
              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');
       }
     });
  };
0 Kudos
UndralBatsukh
Esri Regular Contributor

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");

 

SahilBansal
New Contributor II

Hi,

Thanks for the solution.

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

0 Kudos
UndralBatsukh
Esri Regular Contributor

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. 

0 Kudos
SahilBansal
New Contributor II

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.

 

0 Kudos
SahilBansal
New Contributor II

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'.

0 Kudos