AnsweredAssumed Answered

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

Question asked by jjhelfman on Nov 23, 2019
Latest reply on Jun 11, 2020 by mininter

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. 

Outcomes