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

107
1
Jump to solution
04-07-2022 11:25 AM
BillMitchell
New Contributor III

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

 

0 Kudos
1 Solution

Accepted Solutions
UndralBatsukh
Esri Regular Contributor

Hi there, 

 

Looks like you are missing the dashes (-) from the placement strings. 

They should should be `bottom-right`.  You can find the placement strings here: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-DefaultUI.html#add

View solution in original post

1 Reply
UndralBatsukh
Esri Regular Contributor

Hi there, 

 

Looks like you are missing the dashes (-) from the placement strings. 

They should should be `bottom-right`.  You can find the placement strings here: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-DefaultUI.html#add