Adding Javascript API widget to Esri's Angular CLI boilerplate code

JacobHelfman1 — Sun, 24 Nov 2019 06:38:28 GMT

I'm using the Esri Angular CLI template from Github here: GitHub - Esri/angular-cli-esri-map: Example Angular component for building mapping applications with the ArcGIS API for … . I've been trying to understand how I can add a widget to the app, in the esri-map.component.ts file. I've added the appropriate code for the BasemapToggle widget within the "async ... try {..." and after the "const mapViewProperties:..." parts like so:

/********************

Add Widgets

********************/

const basemapToggle = new BasemapToggle({

view: mapViewProperties, // The view that provides access to the map's "satelite" basemap

nextBasemap: "topo" // Allows for toggling to the "hybrid" basemap

});

//add the widget to the top right of the view

mapViewProperties.ui.add(basemapToggle, "top-right");

But after that, I get a window in Visual Studio Code saying "any: Property 'add' does not exist on type 'DefaultUIProperties'", even though it looks like add() is mentioned in the documentation: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-DefaultUI.html.

The code is attached. Any guidance whatsoever would be greatly appreciated.

Re: Adding Javascript API widget to Esri's Angular CLI boilerplate code

Anonymous User — Thu, 09 Jan 2020 13:32:50 GMT

Maybe this response will help others....

Add the widget to the mapview in the mapView.when(() => { callback. This will ensure that the mapView is fully initialized AND in scope.

Ministeriodel_Interior — Fri, 12 Jun 2020 05:05:09 GMT

As the mentioned reference is added, I still can't find the solution