Community
Select to view content in your preferred language

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

168
2
a month ago
AllenHuang
by
Occasional Contributor
a month ago

Hi

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

AllenHuang_0-1724958211947.png

 

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

AllenHuang_1-1724958264538.png

 

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

 

 

0 Kudos
2 Replies
AndyGup
by Esri Regular Contributor
Esri Regular Contributor
a month ago

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. 

0 Kudos
AllenHuang
by
Occasional Contributor
4 weeks ago

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?

0 Kudos