topic Re: Compass widget not working in angular in ArcGIS JavaScript Maps SDK Questions

Compass widget not working in angular

ErsiLover — Fri, 01 Dec 2023 14:05:45 GMT

Hello I have an issue with a compass widget, the issue is that even though I rotate the map and the click on the compass it doesn't rotate back so that north is up. This is my code:

(my typescript):

import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';

import Map from '@arcgis/core/Map.js';

import MapView from '@arcgis/core/views/MapView.js';

import Compass from '@arcgis/core/widgets/Compass';

export class AppComponent implements OnInit{

@ViewChild('mapViewNode', { static: true }) private mapViewEl!: ElementRef;

map!: Map;

mapView!: MapView;

compass!: Compass;

ngOnInit() {

this.initializeMap();

}

initializeMap(): MapView {

this.map = new Map({

basemap: 'hybrid',

});

this.mapView = new MapView({

container: this.mapViewEl.nativeElement,

map: this.map,

zoom: 7,

center: [17, 44.3],

});

let compass = new Compass({

view: this.mapView,

});

this.mapView.ui.add(compass, 'top-left');

return this.mapView;

}

this is my html:

<div #mapViewNode></div>

this is the example:

I click on the compass but nothing happens, any idea why?

Re: Compass widget not working in angular

AndyGup — Fri, 01 Dec 2023 16:55:05 GMT

Thanks for reporting, I am able to repro on 4.28 and 4.29-next. We'll take a closer look.

Re: Compass widget not working in angular

AndyGup — Fri, 01 Dec 2023 18:48:19 GMT

This appears to be related to a known issue with Calcite: https://github.com/Esri/jsapi-resources/tree/main/esm-samples/jsapi-angular-cli#known-issues. Try disabling the zone.js monkey patching for click events. Here's a diff that shows what you need to do https://github.com/Esri/jsapi-resources/issues/481#issuecomment-1687048980.

Re: Compass widget not working in angular

ErsiLover — Mon, 04 Dec 2023 10:21:43 GMT

If I understood correctly I need to add "src/zone-flags.js" to angular.json in polyfills before zone.js and this is how it looks for me:

but the compass is still not working as expected did I miss something?

Re: Compass widget not working in angular

AndyGup — Mon, 04 Dec 2023 18:27:50 GMT

I have a TODO to clarify these steps on the jsapi-resources repo. Here they are in case you missed something. Note, I verified these steps on Angular 17, since we only test against the latest production version of frameworks.

Create src/zone-flags.ts file, and then add this:

(window as any).__zone_symbol__UNPATCHED_EVENTS = ['click'];

In angular.json, make this adjustment:

"polyfills": [ "src/zone-flags", "zone.js" ],

In tsconfig.app.json make this adjustment:

"files": [ "src/zone-flags.ts", "src/main.ts" ],

Re: Compass widget not working in angular

ErsiLover — Wed, 06 Dec 2023 11:54:49 GMT

Thank you 🙂

Re: Compass widget not working in angular

AndyGup — Wed, 01 May 2024 21:15:17 GMT

The Angular bug has been fixed in zone.js version 0.14.5. We recommend updating zone.js if you are having issues with the SDK's widgets. https://github.com/Esri/jsapi-resources/tree/main/esm-samples/jsapi-angular-cli#known-issues