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

Xuyang-Han — Fri, 30 Apr 2021 15:25:45 GMT

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

  }
}

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

ReneRubalcava — Fri, 30 Apr 2021 15:52:12 GMT

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

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

VictorBerchet — Fri, 30 Apr 2021 15:56:18 GMT

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.

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

Xuyang-Han — Fri, 30 Apr 2021 16:07:22 GMT

Thank you. It works!

topic Re: Problems using Angular with JS API: No overload matches this call. in ArcGIS JavaScript Maps SDK Questions

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

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

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

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