Widgets not added when using view.ui.add(widget, placement)

BillMitchell · ‎04-07-2022

I am trying to add a legend, home button, and basemap toggle to my basic map UI. I build the widgets and add them with view.ui.add(widget, placement), and although there are no errors there are also no widgets.

I can use view.ui.remove(widget), and it will remove the specified default widget (attribution or zoom), although view.ui.components always reports the two default widgets (no more, no fewer).

There's obviously something basic I'm missing, but it has defied me for a few frustrating days now.

Start a new Angular project and create a component:

ng new scratch  # Create a new Angular project called "scratch"
cd scratch  # Move into its directory
ng g c map-view  # g_enerate a new c_omponent called "map-view"
npm install @arcgis/core  # Install the arcgis javascript API node module

app.component.html:

<app-map-view-component style="max-height:600px;"></app-map-view-component>

app.component.css:

@import 'https://js.arcgis.com/4.23/@arcgis/core/assets/esri/themes/light/main.css';

map-view/map-view.component.html

<div style="height: 600px;"> </div>

map-view/map-view.component.ts

import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { environment } from '../../environments/environment';
import MapView from '@arcgis/core/views/MapView';
import WebMap from '@arcgis/core/WebMap';
import Legend from '@arcgis/core/widgets/Legend';
import BasemapToggle from '@arcgis/core/widgets/BasemapToggle';
import esriConfig from '@arcgis/core/config';
import Home from "@arcgis/core/widgets/Home";

@Component({
  selector: 'app-map-view-component',
  templateUrl: './map-view.component.html',
  styleUrls: ['./map-view.component.css']
})
export class MapViewComponent implements OnInit, OnDestroy {

  @ViewChild('mapViewDiv', { static: true }) private elementRef!: ElementRef;
  private mapView: MapView = new MapView();

  private map!: WebMap;

  constructor() {
    esriConfig.apiKey = environment.apiKey;
  }

  ngOnInit(): void {
    this.initMap().then(() => {
      this.initWidgets();
    });
  }

  ngOnDestroy(): void {
    if (this.mapView) {
      this.mapView.destroy;
    }
  }

  initMap(): Promise {
    let container = this.elementRef.nativeElement;

    this.map = new WebMap({
      basemap: "arcgis-topographic"
    });

    const view = new MapView({
      container: container,
      map: this.map,
      center: [-95, 46.5],
      zoom: 6,
    });

    const homeButton = new Home({
      view: view,
      id: "home",
    });
    view.ui.add(homeButton, "bottom right");  // Does nothing
    console.log("Added home button");
    console.log(view.ui.components);

    this.mapView = view;
    return this.mapView.when();
  }

  initWidgets() {
    const legend = new Legend({
      view: this.mapView,
    });
    this.mapView.ui.add(legend, "top right");  // Does nothing
    console.log("Added legend");
    console.log(this.mapView.ui.components);

    const bmToggle = new BasemapToggle({
      view: this.mapView,
      nextBasemap: "hybrid",
    });
    this.mapView.ui.add(bmToggle, "bottom right");  // Does nothing
    console.log("Added basemap toggle");
    console.log(this.mapView.ui.components);
  }
}