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:
Solved! Go to Solution.
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'.
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");
}
});
});
};
but still this error Property 'routeResults' does not exist on type 'RouteResult' persists
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.
Hi Undral,
Sorry, I overlooked the code.
Anyway, its showing 0 compile errors now..thanks for your help.
Really Appreciated.
Sahil
Glad it is working. Can you set this question as resolved?
Thanks, -Undral