create a custom map in a multi-component Angular 18 app

BradSkopyk — Tue, 07 Jan 2025 17:30:06 GMT

How can I add a new component to an Angular 18 app that incorporates a view of a map using the @ArcGIS/core library. I have given it my best shot, but cannot get the 'custom-map' component to visualize within my github repo. Currently, the Angular app runs and all components can be visualized, even the 'map' component which uses the <arcgis-map> tag in the component's html in order to show a web map. Yet the custom map component does not show up. Can anyone help? I am completely lost!

I assume that the git repo linked above is the place that you need to look, but in case it help, I am including here just the 'custom map' component typescript file. Thanks for any help you can offer.

import { Component, OnInit, ViewChild, ElementRef, OnDestroy, } from '@angular/core'; import Map from "@arcgis/core/Map.js"; import * as locator from "@arcgis/core/rest/locator.js"; import MapView from '@arcgis/core/views/MapView'; import Search from '@arcgis/core/widgets/Search'; @Component({ selector: 'app-custom-map', templateUrl: './custom-map.component.html', styleUrl: './custom-map.component.css' }) export class CustomMapComponent implements OnInit, OnDestroy { public view: any = null; // The <div> where we will place the map @ViewChild('mapViewNode', { static: true }) private mapViewEl!: ElementRef; initializeMap(): Promise<any> { const container = this.mapViewEl.nativeElement; const map = new Map({ basemap: "streets-navigation-vector" }); this.view = new MapView({ container, map: map, center: [-100, 23.5], zoom: 4 }); /* const searchWidget = new Search({ view: this.view }); searchWidget.on("select-result", function (event2) { const searchname = event2.result.name; }); this.view.ui.add(searchWidget, 'bottom-left'); const locatorUrl = "https://utility.arcgis.com/usrsvcs/servers/0f0fda27f9c4487792fdc992e1eef1e6/rest/services/World/GeocodeServer"; this.view.popupEnabled = false; this.view.on("click", (event:any) => { // Get the coordinates of the click on the view const lat = Math.round(event.mapPoint.latitude * 1000000) / 1000000; const lon = Math.round(event.mapPoint.longitude * 1000000) / 1000000; this.view.openPopup({ // Set the popup's title to the coordinates of the location content: lat + ", " + lon + "<br><i><span style='font-size:smaller'>&nbsp&nbspe.g. 'latitude, longitude'<p>NB: lat/lon values do not automatically transfer into form boxes above. You must do so manually.", location: event.mapPoint // Set the location of the popup to the clicked location }); const params = { location: event.mapPoint }; // Display the popup // Execute a reverse geocode using the clicked location locator .locationToAddress(locatorUrl, params) .then((response) => { // If an address is successfully found, show it in the popup's content this.view.popup.title = response.address; const placename = response.address; }) .catch(() => { // If the promise fails and no result is found, show a generic message this.view.popup.content = "No address was found for this location"; }); }); */ return this.view.when(); } ngOnInit(): any { // Initialize MapView and return an instance of MapView this.initializeMap().then(() => { // The map has been initialized console.log('The map is ready.'); }); } ngOnDestroy(): void { if (this.view) { // destroy the map view this.view.destroy(); } } }

Re: create a custom map in a multi-component Angular 18 app

nafizpervez — Mon, 24 Feb 2025 11:30:49 GMT

please consider the following code. have a test and share your feedback.

import { Component, OnInit, ViewChild, ElementRef, OnDestroy } from '@angular/core'; import Map from "@arcgis/core/Map"; import MapView from "@arcgis/core/views/MapView"; import * as locator from "@arcgis/core/rest/locator"; import Search from '@arcgis/core/widgets/Search'; @Component({ selector: 'app-custom-map', templateUrl: './custom-map.component.html', styleUrls: ['./custom-map.component.css'] }) export class CustomMapComponent implements OnInit, OnDestroy { public view: any = null; // The <div> where we will place the map @ViewChild('mapViewNode', { static: true }) private mapViewEl!: ElementRef; initializeMap(): Promise<any> { const container = this.mapViewEl.nativeElement; const map = new Map({ basemap: "streets-navigation-vector" }); this.view = new MapView({ container, map: map, center: [-100, 23.5], zoom: 4 }); // Optional: Add a Search widget to the map const searchWidget = new Search({ view: this.view }); this.view.ui.add(searchWidget, 'top-left'); return this.view.when(); } ngOnInit(): void { this.initializeMap() .then(() => { console.log('The map is ready.'); }) .catch((error) => { console.error('Error initializing map:', error); }); } ngOnDestroy(): void { if (this.view) { this.view.destroy(); } } }

topic create a custom map in a multi-component Angular 18 app in ArcGIS JavaScript Maps SDK Questions

create a custom map in a multi-component Angular 18 app

Re: create a custom map in a multi-component Angular 18 app