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

1734
2
11-23-2019 10:38 PM
JacobHelfman1
New Contributor III

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... . 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. 

0 Kudos
2 Replies
by Anonymous User
Not applicable

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
New Contributor
As the mentioned reference is added, I still can't find the solution
0 Kudos