topic Re: Zoom Buttons don't work in Angular Map Component in ArcGIS JavaScript Maps SDK Questions

Zoom Buttons don't work in Angular Map Component

ShaneBuscher1 — Thu, 14 Mar 2024 18:52:42 GMT

I have a very simple Angular application containing a map component. The map renders fine, but the nothing happens when clicking either zoom button. The app is so simple I'm at a loss as to why the zoom buttons aren't working. @AndyGup would you have any pointers? Unfortunately my sample app is too large to upload here.

Re: Zoom Buttons don't work in Angular Map Component

AndyGup — Fri, 15 Mar 2024 15:21:34 GMT

It's related to an Angular bug in zone.js. A fix will hopefully be available in the next zone.js release since the pull request is approved and ready-to-go: https://github.com/angular/angular/pull/54602. We have documented a temporary workaround in our Angular esm-sample's README: https://github.com/Esri/jsapi-resources/tree/main/esm-samples/jsapi-angular-cli#known-issues.

Re: Zoom Buttons don't work in Angular Map Component

ShaneBuscher1 — Mon, 18 Mar 2024 12:00:45 GMT

Thanks for getting back. I'll give the workaround a shot.

Re: Zoom Buttons don't work in Angular Map Component

GabrielWatson — Tue, 19 Mar 2024 21:54:02 GMT

As a heads up for anyone else trying to apply the workaround with the ZoneJS flag on click: That option completely breaks our application, as it hoses up Angular Material drop-down select components.

I've found that manually removing the zoom component and adding it back in appears to work for the time being. As of right now the open PR to fix Angular is 3 weeks old and still unmerged.

Re: Zoom Buttons don't work in Angular Map Component

AndyGup — Tue, 19 Mar 2024 22:14:10 GMT

Thanks for letting us know @GabrielWatson. We are aware that the workaround isn't going to work for all implementations. Because of that, we encourage you, @ShaneBuscher1 and anyone else using Angular to thumbs up the Angular pull request. Here's the link: https://github.com/angular/angular/pull/54602. And, we are keeping our eye on it.

Footnote: there has been motion on updating zone.js related to the Angular 18-next release.

Re: Zoom Buttons don't work in Angular Map Component

imritanshu — Tue, 26 Mar 2024 12:14:49 GMT

yes. I think for now it is good to remove zoom component from mapview and add it back. This works smoothly.

Even I faced similar issue with webscene, if anyone else facing this issue. Than use loadAll function of webscene and on load event of webscene add it to sceneview.

this.map = new WebScene({

portalItem: {

id: sceneId,

});

this.map.loadAll()

.catch((error: any) => {

console.log(error);

})

.then(() => {

this.mapView = new SceneView({

map: this.map,

container: 'mapContainer'

});

Re: Zoom Buttons don't work in Angular Map Component

AndyGup — Thu, 28 Mar 2024 14:26:37 GMT

Update: the Angular team merged the bug fix. Now we wait for the next release of zone.js.

Re: Zoom Buttons don't work in Angular Map Component

fb1 — Fri, 29 Mar 2024 15:25:20 GMT

Hi, I have the same problem , I have tried to remove and reinsert the zoom but without success, is there a precise practice to do this ?

I have done so

let zoom = new esri.Zoom({
view: view
});

view.ui.remove("zoom");

view.ui.add(zoom, "top-left");

Re: Zoom Buttons don't work in Angular Map Component

imritanshu — Mon, 01 Apr 2024 08:53:09 GMT

Hi @fb1

the zoom which you are removing is the default widget which automatically gets created while creating view and that is why you have passed it in double quotes.

And the zoom which you are adding is your new instance of zoom widget which is separate from the default one..

here no need to create a new instance. Just remove the already created zoom instance and add it back..

view.ui.remove("zoom");

view.ui.add("zoom", "top-left");

Re: Zoom Buttons don't work in Angular Map Component

fb1 — Tue, 02 Apr 2024 07:28:11 GMT

thank you for your reply,

unfortunately I have tried but it doesn't work that way either

Re: Zoom Buttons don't work in Angular Map Component

LeeTaEthni — Tue, 23 Jul 2024 20:30:34 GMT

neither of these work for me.
I am curious if the issue is coming from the fact that the new zoom buttons are actually calcite-button components and angular does't know what to do with them? Do we need to install calcite and register those custom components?

Re: Zoom Buttons don't work in Angular Map Component

AndyGup — Tue, 23 Jul 2024 21:10:17 GMT

The button click not working was an Angular bug that's been fixed in zone.js version 0.14.5, so you'll need to upgrade to use the "@latest" version that your Angular install supports. If you aren't able to update zone.js, then the workaround isto disable zone.js monkey patching as documented here: https://github.com/Esri/jsapi-resources/tree/main/core-samples/jsapi-angular-cli#known-issues.

Re: Zoom Buttons don't work in Angular Map Component

AlagappanA — Mon, 14 Oct 2024 15:22:42 GMT

Hi @AndyGup , We tried all the steps given in https://github.com/Esri/jsapi-resources/tree/main/core-samples/jsapi-angular-cli#known-issues

We installed zone.js 0.14.5 version, then tried latest 0.14.10 version, then tried the workaround to disable monkey patching of DOM click event

Buttons on the map still didn't work. Any suggestions please ?

Re: Zoom Buttons don't work in Angular Map Component

AndyGup — Tue, 15 Oct 2024 23:22:17 GMT

@AlagappanA please provide a minimum reproducible app, here are the instructions: https://developers.arcgis.com/javascript/latest/troubleshooting/#minimal-reproducible-application. The Angular sample is a great starting place: https://github.com/Esri/jsapi-resources/tree/main/core-samples/jsapi-angular-cli.