topic Re: Getting error while implementing the Graphic function in Angular in ArcGIS JavaScript Maps SDK Questions

Getting error while implementing the Graphic function in Angular

SahilBansal — Fri, 09 Apr 2021 14:40:33 GMT

Hi Team.

While implementing graphic function inside the component, it's giving below error:

Error: Type '{ type: string; size: string; color: string; outline: { color: string; width: string; }; }' is not assignable to type 'SymbolProperties'.
Object literal may only specify known properties, and 'type' does not exist in type 'SymbolProperties'.

The application is running on the below-mentioned versions.

Angular version 11.2.7

typescript version 4.1.5

Could you please let me know if it's related to any version problem and If it is then is there any upgrade coming for this one shortly?

Thanks & Regards,

Sahil

Re: Getting error while implementing the Graphic function in Angular

AndyGup — Fri, 09 Apr 2021 15:17:09 GMT

Hi Sahil, can you provide a code snippet that demonstrates the issue? And, which version of the JS API?

Re: Getting error while implementing the Graphic function in Angular

SahilBansal — Fri, 09 Apr 2021 17:00:49 GMT

First of all, Thanks for your reply!

PFB the code snippet.

const track = new Track({

view,

graphic: new Graphic({

geometry: {

type: 'point', // autocasts as new Point()

longitude: -71.2643,

latitude: 42.0909

symbol: {

type: 'simple-line',

size: '12px',

color: 'blue',

outline: {

color: '#efefef',

width: '1.5px'

}

}),

useHeadingEnabled: false

});

view.ui.add(track, 'top-left');

I am getting the error in the geometry as well as in the symbol type and I don't know why it is not showing the version of my Arcgis API key in my dashboard.

Re: Getting error while implementing the Graphic function in Angular

AndyGup — Fri, 09 Apr 2021 18:14:44 GMT

It looks like a typings issue related to auto-casting, we may have missed something. Try explicitly declaring the Symbol, don't forget to add the module reference to your require() statement:

symbol: new SimpleLineSymbol({ size: '12px', color: 'blue', outline: { color: '#efefef', width: '1.5px' ]),

Re: Getting error while implementing the Graphic function in Angular

SahilBansal — Fri, 09 Apr 2021 18:26:58 GMT

Now it's giving me the below errors:

Argument of type '{ size: string; color: string; outline: { color: string; width: string; }; }' is not assignable to parameter of type 'SimpleLineSymbolProperties'.

Argument of type '{ color: string; outline: { color: string; width: string; }; }' is not assignable to parameter of type 'SimpleLineSymbolProperties'.

Re: Getting error while implementing the Graphic function in Angular

AndyGup — Fri, 09 Apr 2021 21:09:45 GMT

Okay, I looked at the TypeScript definition file and there are typings missing, we'll look into that. Here's one example of a temporary workaround:

graphic: new Graphic ({ geometry : { type : 'point' , // autocasts as new Point() longitude : - 71.2643 , latitude : 42.0909 } as __esri.Point, symbol : { // @ts-ignore type : 'simple-line', size : '12px' , color : 'blue' , outline : { color : '#efefef' , width : '1.5px' } }});

[Edit: just a footnote, my suggestions are based on 4.18/4.19-next]

Re: Getting error while implementing the Graphic function in Angular

SahilBansal — Fri, 09 Apr 2021 22:50:29 GMT

I tried this workaround and it is not giving any run time errors. but it's not giving any results in the output.

Re: Getting error while implementing the Graphic function in Angular

SahilBansal — Mon, 12 Apr 2021 14:59:25 GMT

I tried this workaround and it is not giving any run time errors. but it's also not giving me any results in the output. It does not show me any graphic symbol with the properties I have defined in the graphic.

Re: Getting error while implementing the Graphic function in Angular

AndyGup — Mon, 12 Apr 2021 15:04:26 GMT

I recommend getting the code running outside of Angular in a vanilla JS app first. Can you provide a codepen that reproduces the issue?

Re: Getting error while implementing the Graphic function in Angular

SahilBansal — Mon, 12 Apr 2021 15:08:45 GMT

But in the Vanilla javascript app, it's not letting me run the app because it's asking me to sign in and when I try to sign in, its says invalid credentials even though I put correct one only.

Re: Getting error while implementing the Graphic function in Angular

AndyGup — Mon, 12 Apr 2021 18:57:59 GMT

I'm not sure about the sign-in issue, maybe check the permissions on your service.

I talked to a colleague. On the first issue of the Graphic not compiling, I missed the fact that you can't mix a Point with a LineSymbol, so getting a compiler error was valid. We recommending the following, and I verified this works on my machine:

import Point from '@arcgis/core/geometry/Point'; import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol'; const g = new Graphic ({ geometry : new Point({ // type : 'point' , // autocasts as new Point() longitude : - 71.2643 , latitude : 42.0909 }), symbol : new SimpleMarkerSymbol( { // type : 'simple-line', size : '12px' , color : 'blue' , outline : { color : '#efefef' , width : '1.5px' } })});

On your second issue, with the graphic not showing up that may be related to an issue that's fixed in 4.19, which is coming out in a few weeks. Try upgrading to the "next" version: https://github.com/Esri/feedback-js-api-next. How you are using the JS API (e.g. esri-loader, arcgis-webpack-plugin, ES modules)? I can provide an example of how to do that.

Re: Getting error while implementing the Graphic function in Angular

SahilBansal — Tue, 13 Apr 2021 04:17:51 GMT

It worked for me.

Moreover, I am using ES modules.

Thanks for your help!

Re: Getting error while implementing the Graphic function in Angular

SahilBansal — Tue, 13 Apr 2021 18:17:55 GMT

Now I am trying to implement route and directions in my application but getting the following errors in the getRoute() functions.

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.

This is the code snippet:

const getRoute = () => {

const routeParams = new RouteParameters({

stops: new FeatureSet({

features: view.graphics.toArray()

}),

returnDirections: true

});

this.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 the Graphic function in Angular

SahilBansal — Wed, 14 Apr 2021 00:51:08 GMT

Can you please help me in the above issue.

Re: Getting error while implementing the Graphic function in Angular

AndyGup — Wed, 14 Apr 2021 15:10:38 GMT

@SahilBansal for your second question about Routes, I recommend creating a new issue with a new Title since it's not related to the original question and Title. That way the question will get more visibility.

Re: Getting error while implementing the Graphic function in Angular

SahilBansal — Wed, 14 Apr 2021 15:27:04 GMT

Hi,

I have already created a new post for that new issue.