Problems using Angular with JS API: No overload matches this call.

4584
3
Jump to solution
04-30-2021 08:25 AM
Xuyang-Han
New Contributor
Hello All,
 
I am using Angular Typescript with ArcGIS API. Once I copied some sample codes from the documents, there are some bugs on it. I pasted the error message and my codes below. I marked the bugs in red colour. 
 
error:
No overload matches this call.
Overload 1 of 2, '(properties?: GraphicProperties): Graphic', gave the following error.
Type '{ type: string; color: string; }' is not assignable to type 'SymbolProperties'.
Object literal may only specify known properties, and 'type' does not exist in type 'SymbolProperties'.
Overload 2 of 2, '(properties?: GraphicProperties): Graphic', gave the following error.
Type '{ type: string; color: string; }' is not assignable to type 'SymbolProperties'.
Object literal may only specify known properties, and 'type' does not exist in type 'SymbolProperties'.ts(2769)
interfaces.d.ts(5819, 5): The expected type comes from property 'symbol' which is declared here on type 'GraphicProperties'
interfaces.d.ts(5819, 5): The expected type comes from property 'symbol' which is declared here on type 'GraphicProperties'
 
 
My Code:
 
import { ComponentOnInitViewChildElementRef } from '@angular/core';

 

import EsriMap from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import Graphic from "@arcgis/core/Graphic";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
import Home from "@arcgis/core/widgets/Home";
import Track from "@arcgis/core/widgets/Track";

 

@Component({
  selector'app-map',
  templateUrl'./map.component.html',
  styleUrls: ['./map.component.css']
})

 

export class MapComponent implements OnInit {
  mapEsriMap;
  viewMapView;

 

  constructor() { }

 

  ngOnInit() {

 

    // Add Based Map
    const map = new EsriMap({
      basemap"streets-vector"
    });

 

    // add initial view, position, and zoom
    const view = new MapView({
      mapmap,
      container"viewDiv",
      center: [-79.50293843.767854],
      zoom12
    });

 

    // adds the home widget to the top left corner of the MapView
    var homeWidget = new Home({
      viewview
    });
    view.ui.add(homeWidget"top-left");

 

    const track = new Track({
      viewview,
      graphicnew Graphic({
        symbol: {
          type"simple-marker",
          // size: "12px",
          color"green",
          // outline: {
          //   color: "#efefef",
          //   width: "1.5px"
          // }
        }
      }),
      useHeadingEnabledfalse
    });
    view.ui.add(track"top-left");



    // draw a point on a layer
    const point = { //Create a point
      type"point",
      longitude: -79.502938,
      latitude43.767854
    };

 

    const simpleMarkerSymbol = {
      type"simple-marker",
      color: [22611940],  // Orange
      outline: {
        color: [255255255], // White
        width1
      }
    };

 

    const graphicsLayer = new GraphicsLayer();
    map.add(graphicsLayer);
    const pointGraphic = new Graphic({
      geometrypoint,
      symbolsimpleMarkerSymbol
    });
    graphicsLayer.add(pointGraphic);

 

  }
}
0 Kudos
1 Solution

Accepted Solutions
VictorBerchet
New Contributor III

I had the same problem using the API.

It is due to the TypeScript types not matching the actual signature of the method.

I solve it the ugly way by writing:

 

new Graphic({ symbol: this.txtSymbol as any });

 

 

The less ugly way would be to create a Symbol instance instance of using an object literal with a type.

It would be interesting to hear from the API team if that is only a problem with the typings or if long term the API will drop support for object literals.

View solution in original post

0 Kudos
3 Replies
ReneRubalcava
Frequent Contributor II

TypeScript doesn't like autocasting used in constructors. You can make it work by specifying new SimpleMarkerSymbol() and new Point() in your code.

0 Kudos
VictorBerchet
New Contributor III

I had the same problem using the API.

It is due to the TypeScript types not matching the actual signature of the method.

I solve it the ugly way by writing:

 

new Graphic({ symbol: this.txtSymbol as any });

 

 

The less ugly way would be to create a Symbol instance instance of using an object literal with a type.

It would be interesting to hear from the API team if that is only a problem with the typings or if long term the API will drop support for object literals.

0 Kudos
Xuyang-Han
New Contributor

Thank you. It works! 

0 Kudos