geographicToWebMercator and Projected polygon appears only after click on zoom buttons angular 10 - arcgis

Question

I am using geographicToWebMercator to draw a specific area on my map. The Polygon should draw as soon as the map loads. But the polygon is appearing only after click on the zoom buttons. either zoom in or zoom out. The code was working fine in arcgis 4.16 I have the upgraded version 4.16 to ArcGIS version 4.18.
Please find the code below,
import {
Component,
OnInit,
ViewChild,
ElementRef,
Input,
Output,
EventEmitter,
OnDestroy,
NgZone
} from '#angular/core';
import { HttpClient, HttpHeaders } from '#angular/common/http';
import { GisService } from '../search/gis.service';
import { ActivatedRoute, Router } from '#angular/router';
import { map } from 'rxjs/operators';
import { loadScript, loadModules } from 'esri-loader';
import esri = __esri; // Esri TypeScript Types
import { empty } from 'rxjs';
import { AppConfig } from '../config/app.config';
#Component({
selector: 'app-esri-map',
templateUrl: './esri-map.component.html',
styleUrls: ['./esri-map.component.css'],
})
export class EsriMapComponent implements OnInit, OnDestroy {
#Output() mapLoadedEvent = new EventEmitter<boolean>();
#ViewChild('mapViewNode', { static: true }) private mapViewEl: ElementRef;
view: any;
dynamicRings: any;
wkid: any;
addr: any;
loadingmap = true;
// to keep loaded esri modules
esriModules = {
graphic: null,
geometry: {
Polygon: null,
SpatialReference: null,
support: { webMercatorUtils: null },
},
tasks: {
GeometryService: null,
support: { ProjectParameters: null },
},
};
private _zoom = 20;
private _center: Array<number> = [-95.937187, 41.258652];
private _basemap = 'gray-vector';
private _loaded = false;
private _view: esri.MapView = null;
private _nextBasemap = 'streets';
public _selectedLayer: Array<string>;
public layersMapIdxArray: string[] = ['0', '1', '2'];
public mapalllayerview: boolean;
public layersDic = {};
private readonly esriMapUri: string;
private readonly gisGeometryServer: string;
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;
}
#Input()
set nextBasemap(nextBasemap: string) {
this._nextBasemap = nextBasemap;
}
get nextBasemap(): string {
return this._nextBasemap;
}
public onLayerChange(val: Array<string>) {
// hide all the layers before showing the selected layers
for (const al of this.layersMapIdxArray) {
this.layersDic[al].visible = false;
}
// layersDic is the feature layers added to the map
for (const v of val) {
this.layersDic[v].visible = true;
}
}
constructor(
private gisService: GisService,
private http: HttpClient,
private route: ActivatedRoute,
private router: Router,
private zone: NgZone,
private appConfig: AppConfig) {
this.esriMapUri = this.appConfig.getGisMapURL('');
this.gisGeometryServer = this.appConfig.gisGeometryServer('');
}
async initializeMap() {
try {
loadScript();
// Load the modules for the ArcGIS API for JavaScript
const [
EsriMap,
EsriMapView,
Polygon,
SpatialReference,
webMercatorUtils,
GeometryService,
ProjectParameters,
FeatureLayer,
BasemapToggle,
BasemapGallery,
Graphic,
] = await loadModules([
'esri/Map',
'esri/views/MapView',
'esri/geometry/Polygon',
'esri/geometry/SpatialReference',
'esri/geometry/support/webMercatorUtils',
'esri/tasks/GeometryService',
'esri/tasks/support/ProjectParameters',
'esri/layers/FeatureLayer',
'esri/widgets/BasemapToggle',
'esri/widgets/BasemapGallery',
'esri/Graphic',
]);
// save the modules on a property for later
this.esriModules.geometry.Polygon = Polygon;
this.esriModules.geometry.SpatialReference = SpatialReference;
this.esriModules.geometry.support.webMercatorUtils = webMercatorUtils;
this.esriModules.tasks.GeometryService = GeometryService;
this.esriModules.tasks.support.ProjectParameters = ProjectParameters;
this.esriModules.graphic = Graphic;
// Configure the Map
const mapProperties: esri.MapProperties = {
basemap: this._basemap,
};
const map: esri.Map = new EsriMap(mapProperties);
// Initialize the MapView
const mapViewProperties: esri.MapViewProperties = {
container: this.mapViewEl.nativeElement,
// center: this._center,
zoom: this._zoom,
map: map,
};
this._view = new EsriMapView(mapViewProperties);
// Add layers to the map according to the selection
for (const idx of this.layersMapIdxArray) {
this.layersDic[idx] = new FeatureLayer({
url: `${this.esriMapUri}/${idx}`,
visible: this.mapalllayerview,
outFields: ['*'],
});
map.add(this.layersDic[idx]);
}
// The layer 15 will be the stack at the top of the layers so 15 will be consider first layer
this.layersDic[15] = new FeatureLayer({
url: `${this.esriMapUri}/15`,
visible: true,
outFields: ['*'],
});
map.add(this.layersDic[15]);
// Basemap toglle section
var basemapToggle = new BasemapToggle({
view: this._view,
nextBasemap: this._nextBasemap,
});
this._view.ui.add(basemapToggle, 'bottom-right');
// Load details of SAID when click on the map
let hitself = this;
this._view.on('click', function (event) {
hitself._view
.hitTest(event, { exclude: hitself._view.graphics })
.then(function (response) {
console.log(response);
if (
typeof response.results !== 'undefined' &&
response.results.length > 0
) {
var graphic = response.results[0].graphic;
var attributes = graphic.attributes;
var category = attributes.ADDRESS;
// redirect to the corresponding SAID
// window.location.href = `/dashboard/${category}`;
// hitself.router.navigate(['dashboard', category]);
hitself.addr = category;
var dashurl = 'search/detail/' + hitself.addr;
hitself.zone.run(() => {
hitself.router.navigateByUrl(dashurl);
});
}
});
return;
});
await this._view.when(); // wait for map to load
return this._view;
} catch (error) {
console.error('EsriLoader: ', error);
}
}
// point geometry extent is null
zoomToGeometry(geom) {
// console.log(`Original Geometry: ${JSON.stringify(geom.toJSON())}`);
const geomSer = new this.esriModules.tasks.GeometryService(this.gisGeometryServer);
const outSpatialReference = new this.esriModules.geometry.SpatialReference({
wkid: 102100,
});
const params = new this.esriModules.tasks.support.ProjectParameters({
geometries: [geom],
outSpatialReference,
});
const self = this;
geomSer
.project(params)
.then(function (result) {
const projectedGeom = result[0];
if (!projectedGeom) {
return;
}
// console.log(
// `Projected Geometry: ${JSON.stringify(projectedGeom.toJSON())}`
// );
return projectedGeom;
})
.then(function (polly) {
// console.log(self.esriModules.graphic);
self._view.graphics.add(
new self.esriModules.graphic({
geometry: polly,
symbol: {
type: 'simple-fill',
style: 'solid',
color: [255, 0, 0, 0.1],
outline: {
width: 1,
color: [255, 0, 0, 1],
},
},
})
);
self._view.extent = polly.extent.clone().expand(3);
});
}
ngOnInit() {
this.route.paramMap.subscribe((params) => {
this.addr = params.get('address');
console.log(this.addr);
this.gisService.getAddressDetails(this.addr).subscribe((posts) => {
const get_wkid = posts[0]['spatialReference'];
this.wkid = get_wkid['wkid'];
const dynamicrings = posts[0]['features'];
this.dynamicRings = dynamicrings[0]['geometry']['rings'];
});
this._selectedLayer = ['1', '0', '2'];
// this.layersMapIdxArray = this._selectedLayer;
this.mapalllayerview = true;
this.initializeMap().then(() => {
// The map has been initialized
console.log('mapView ready: ', this._view.ready);
const geom = new this.esriModules.geometry.Polygon({
spatialReference: {
wkid: this.wkid, //102704,
},
rings: this.dynamicRings,
});
this.zoomToGeometry(geom);
console.log('mapView ready: ', this._view.ready);
this._loaded = this._view.ready;
this.mapLoadedEvent.emit(true);
this.loadingmap = false;
});
});
}
ngOnDestroy() {
if (this._view) {
// destroy the map view
this._view.container = null;
}
}
}