Getting error while implementing getRoute() function

2472
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
15 Replies
SahilBansal
New Contributor II

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

0 Kudos
UndralBatsukh
Esri Regular Contributor

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

 

 

0 Kudos
SahilBansal
New Contributor II

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

0 Kudos
UndralBatsukh
Esri Regular Contributor

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. 

 

0 Kudos
SahilBansal
New Contributor II

Hi Undral,

Sorry, I overlooked the code.

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

Really Appreciated.

Sahil

0 Kudos
UndralBatsukh
Esri Regular Contributor

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

Thanks, -Undral

0 Kudos