topic Re: Map Lagging on Drag and Drop Movement in ArcGIS JavaScript Maps SDK Questions

Map Lagging on Drag and Drop Movement

KhaledAttiyat — Wed, 02 Dec 2020 12:21:16 GMT

am working on Angular 11 project having arcgis javascript version 4.17

when doing Drag and Drop on the map it self by the mouse, there is a kind of lagging that happens on it. the movement is not smoothly done.
note it is not something with the internet connection,

Code:

const properties: esri.MapProperties = {

basemap: this.basemap

};

this.map = new EsriMap(properties);

const map_view_properties: esri.MapViewProperties = {

container: this.mapViewEl.nativeElement,

center: this.homeService.mapCenter,

zoom: this.homeService.mapZoomLevel,

// tslint:disable-next-line: object-literal-shorthand

map: this.map,

};

this.view = new EsriMapView(map_view_properties);

Re: Map Lagging on Drag and Drop Movement

AndyGup — Fri, 04 Dec 2020 19:21:27 GMT

Hi, have you tried to reproduce the issue in a non-Angular, plain old HTML/JavaScript app? Do you have a public sample I can take a look at?

Depending on what your code is doing, there's a slim possibility you could be running into a component change detection issue. An easy thing to try is to run your mapping code outside of Angular, for example: https://github.com/Esri/angular-cli-esri-map/blob/arcgis-webpack-angular/src/app/esri-map/esri-map.component.ts#L159.

Re: Map Lagging on Drag and Drop Movement

KhaledAttiyat — Tue, 08 Dec 2020 08:41:24 GMT

Hello Andy, @AndyGup
thank you for help, i've tried your solution but it is the same. note that i have used the same technique you had on the Link.
it seems the problem exist when i apply multi layar in the map.

Re: Map Lagging on Drag and Drop Movement

AndyGup — Tue, 08 Dec 2020 16:42:45 GMT

Gotcha, can you share a stackblitz or, preferably a non-Angular codepen that reproduces the issue? You'll need to share a working example so we can figure this out.

Re: Map Lagging on Drag and Drop Movement

KhaledAttiyat — Wed, 09 Dec 2020 09:49:35 GMT

Please Find the Example in this Link:
https://codepen.io/KhaledKaizen/pen/vYXXXqV?editors=1000
you only have to drag and drop the map right, left, up and down, it will be noticed more with the zoom in, the map will be like Pixelated in movement.

Re: Map Lagging on Drag and Drop Movement

AndyGup — Wed, 09 Dec 2020 17:37:53 GMT

Oh! We usually refer to that action as panning and zooming. Typically "drag and drop" indicates using the cursor to lift individual features from one location and set them down in another location on the map.

I was not able to see pixelation other than some temporary and normal fading-in as the various map tiles loaded. One suggestion is to verify your CPU and memory usage while panning and zooming.

Re: Map Lagging on Drag and Drop Movement

arahman_mdmajid — Mon, 11 Apr 2022 12:42:19 GMT

Is there any way to avoid or fix this issue in an Angular application?

Re: Map Lagging on Drag and Drop Movement

AndyGup — Mon, 11 Apr 2022 21:52:54 GMT

@arahman_mdmajidplease provide a simple codepen, github or stackblitz that we can use to test/reproduce your issue. I suspect the original reported issue was not related to Angular.

[Updated} Duplicate posting: https://community.esri.com/t5/arcgis-api-for-javascript-questions/basemap-pan-and-zoom-lagging-jittery/m-p/1162985#M76972.

Re: Map Lagging on Drag and Drop Movement

arahman_mdmajid — Tue, 12 Apr 2022 12:24:18 GMT

@AndyGup, thank you for your response.

When I started adding code to a sample Stackblitz repo, I found that until I added all the layers to my map. The map was very smooth. When I started creating multiple layers from a collection of services in a JSON file and added them to the map, it became slow and laggy.

for (var layer in this.servicesArray) { var layerTitle = this.servicesArray[layer].name_ar; var layerId = this.servicesArray[layer].name_en; var test = new MapImageLayer({ url: this.servicesArray[layer].serviceLayers, title: layerTitle, id: layerId, visible: false }); map.add(test); }

The problem is also mentioned in this post here: https://community.esri.com/t5/arcgis-api-for-javascript-questions/reduce-lag-and-improve-performance-when-load-multi/m-p/156554.

I cannot share an example of it since it contains sensitive layer URLs.

I also tried creating all the layers, pushing them into an array, and using the 'addMany()' methods for the array. But it also does not solve the issue.

I have also turned the layer visibility off at the time of creation.

I would appreciate it if other collaborators can also provide suggestions to resolve this issue. @ReneRubalcava @UndralBatsukh @KenBuja

Re: Map Lagging on Drag and Drop Movement

AndyGup — Tue, 12 Apr 2022 16:31:17 GMT

Hi @arahman_mdmajid since you can't share the layers, the best approach is to open a support ticket. Tech Support can do a deep dive investigation to document the issue and try to recreate it.