topic Re: 4.30 zoom and home widgets not working with embedded map. Click event different compare to static map in ArcGIS JavaScript Maps SDK Questions

4.30 zoom and home widgets not working with embedded map. Click event different compare to static map

AllenHuang — Thu, 29 Aug 2024 19:08:56 GMT

I recently started using ArcGIS JS SDK 4.30 and I notice that the Zoom and Home stopped working. My map is embedded into Drupal by loading the JS and CSS URL with javascript and generate a map view on the fly after both JS and CSS load events are confirmed.

When the map is a stand-alone application, there are no problems with the Zoom and Home widgets.

I attempted to trace the click event after the widget are generated on both the stand-alone and Drupal maps. I looked at the Zoom-In and Zoom-Out code block

<calcite-button class="esri-widget--button" title="Zoom in" alignment="center" appearance="solid" kind="neutral" icon-start="plus" scale="m" type="button" width="auto"></calcite-button>

And I found that the click event I get from Chrome Dev console getEventListeners($0) are different

Stand-alone map where Zoom and Home are working

Here is the on the fly map where the zoom and home widget are not working

If you look at the FunctionLocation object, the stand-alone map is executing line 4.30/2691 but the on the fly map is executing zone.js:1724

Can someone explain to me why this happening and maybe give me some pointers on how I can get around it?

Allen

Re: 4.30 zoom and home widgets not working with embedded map. Click event different compare to static map

AndyGup — Thu, 29 Aug 2024 21:16:09 GMT

Hi @AllenHuang, This might be related to a known Angular bug that affected the SDK's widget buttons. Make sure you are running zone.js 0.14.5 or greater. For more info: https://github.com/Esri/jsapi-resources/tree/main/core-samples/jsapi-angular-cli#known-issues.

Re: 4.30 zoom and home widgets not working with embedded map. Click event different compare to static map

AllenHuang — Fri, 30 Aug 2024 13:44:02 GMT

Hi @AndyGup

Thank you for getting back to me so quickly.

I forgot to mention that I'm loading the 4.30 SDK by CDN so I am loading whatever zone.js that CDN loads for me.

I not building the map as an Angular component. I am only using Angular to load the ArcGIS JS and CSS with createElement('link') and createElement('script') after a page is created.

So Angular is probably interfering with the widget. I'll look into it.

One other thing of note. I found out that this issue only happened 4.29 and later. What is the main difference between between 4.29 and the older version? How are older versions not affected by the same Angular bug?