Latest Contributions by AndyGup

Hi Nils, here's a working example. Please note for future reference, it's much preferred to open Angular issues in the angular-cli-esri-map github repo so it's easier for others to search for similar answers. Also here's another gotcha to watch out for, the DEFAULT_WORKER_URL version has to match the ArcGIS API for JavaScript version that you installed: https://github.com/Esri/angular-cli-esri-map/issues/74. -Andy /* Copyright 2020 Esri Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ import { Component, OnInit, OnDestroy, ViewChild, ElementRef, Input, Output, EventEmitter } from '@angular/core'; import Map from "esri/Map"; import MapView from "esri/views/MapView"; import FeatureLayer from "esri/layers/FeatureLayer"; import SimpleRenderer from "esri/renderers/SimpleRenderer"; import SimpleMarkerSymbol from "esri/symbols/SimpleMarkerSymbol"; import esriConfig from "esri/config"; @Component({ selector: 'app-esri-map', templateUrl: './esri-map.component.html', styleUrls: ['./esri-map.component.scss'] }) export class EsriMapComponent implements OnInit, OnDestroy { @Output() mapLoadedEvent = new EventEmitter<boolean>(); // The <div> where we will place the map @ViewChild('mapViewNode', { static: true }) private mapViewEl: ElementRef; private _zoom = 10; private _center: Array<number> = [0.1278, 51.5074]; private _basemap = 'streets'; private _loaded = false; private _view: MapView = null; get mapLoaded(): boolean { return this._loaded; } @Input() set zoom(zoom: number) { this._zoom = zoom; } get zoom(): number { return this._zoom; } @Input() set center(center: Array<number>) { this._center = center; } get center(): Array<number> { return this._center; } @Input() set basemap(basemap: string) { this._basemap = basemap; } get basemap(): string { return this._basemap; } constructor() { } async initializeMap() { const DEFAULT_WORKER_URL = "https://js.arcgis.com/4.16/"; const DEFAULT_LOADER_URL = `${DEFAULT_WORKER_URL}dojo/dojo-lite.js`; esriConfig.workers.loaderUrl = DEFAULT_LOADER_URL; esriConfig.workers.loaderConfig = { baseUrl: `${DEFAULT_WORKER_URL}dojo`, packages: [ { name: "esri", location: `${DEFAULT_WORKER_URL}esri` }, { name: "dojo", location: `${DEFAULT_WORKER_URL}dojo` }, { name: "dojox", location: `${DEFAULT_WORKER_URL}dojox` }, { name: "dstore", location: `${DEFAULT_WORKER_URL}dstore` }, { name: "moment", location: `${DEFAULT_WORKER_URL}moment` }, { name: "@dojo", location: `${DEFAULT_WORKER_URL}@dojo` }, { name: "cldrjs", location: `${DEFAULT_WORKER_URL}cldrjs`, main: "dist/cldr" }, { name: "globalize", location: `${DEFAULT_WORKER_URL}globalize`, main: "dist/globalize" }, { name: "maquette", location: `${DEFAULT_WORKER_URL}maquette`, main: "dist/maquette.umd" }, { name: "maquette-css-transitions", location: `${DEFAULT_WORKER_URL}maquette-css-transitions`, main: "dist/maquette-css-transitions.umd" }, { name: "maquette-jsx", location: `${DEFAULT_WORKER_URL}maquette-jsx`, main: "dist/maquette-jsx.umd" }, { name: "tslib", location: `${DEFAULT_WORKER_URL}tslib`, main: "tslib" } ] }; // Configure the Map const mapProperties = { basemap: this._basemap }; const map = new Map(mapProperties); const citiesRenderer = { type: "simple", // autocasts as new SimpleRenderer() symbol: { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() size: 5, color: [0, 244, 255, 1] } }; const citiesLayer = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/WorldCities/FeatureServer/0" }); map.add(citiesLayer); // Initialize the MapView const mapViewProperties = { container: this.mapViewEl.nativeElement, center: this._center, zoom: this._zoom, map: map }; this._view = new MapView(mapViewProperties); // wait for the map to load await this._view.when(); return this._view; } ngOnInit() { // Initialize MapView and return an instance of MapView this.initializeMap().then((mapView) => { // The map has been initialized console.log('mapView ready: ', mapView.ready); this._loaded = mapView.ready; this.mapLoadedEvent.emit(true); }); } ngOnDestroy() { if (this._view){ this._view.container = null; } } }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ... View more

Sorry ignore the previous jsbin and try this one: https://jsbin.com/xegicih/2/edit?html,output.  ... View more

Oh, sorry, 3.x definitely has a variety of map navigation overrides, for example https://developers.arcgis.com/javascript/3/jsapi/map-amd.html#disablemapnavigation ... View more