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); } }
Solved! Go to Solution.
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
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