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

[Xuyang-Han]

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 { Component, OnInit, ViewChild, ElementRef } 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 {

  map: EsriMap;

  view: MapView;

  constructor() { }

  ngOnInit() {

    // Add Based Map

    const map = new EsriMap({

      basemap: "streets-vector"

    });

    // add initial view, position, and zoom

    const view = new MapView({

      map: map,

      container: "viewDiv",

      center: [-79.502938, 43.767854],

      zoom: 12

    });

    // adds the home widget to the top left corner of the MapView

    var homeWidget = new Home({

      view: view

    });

    view.ui.add(homeWidget, "top-left");

    const track = new Track({

      view: view,

      graphic: new Graphic({

        symbol: {

          type: "simple-marker",

          // size: "12px",

          color: "green",

          // outline: {

          //   color: "#efefef",

          //   width: "1.5px"

          // }

        }

      }),

      useHeadingEnabled: false

    });

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

    // draw a point on a layer

    const point = { //Create a point

      type: "point",

      longitude: -79.502938,

      latitude: 43.767854

    };

    const simpleMarkerSymbol = {

      type: "simple-marker",

      color: [226, 119, 40],  // Orange

      outline: {

        color: [255, 255, 255], // White

        width: 1

      }

    };

    const graphicsLayer = new GraphicsLayer();

    map.add(graphicsLayer);

    const pointGraphic = new Graphic({

      geometry: point,

      symbol: simpleMarkerSymbol

    });

    graphicsLayer.add(pointGraphic);

  }

}

[ReneRubalcava]

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

[VictorBerchet · Accepted solution]

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.

[Xuyang-Han]

Thank you. It works!