Map Lagging on Drag and Drop Movement

[KhaledAttiyat]

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);

[AndyGup]

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.c....

[KhaledAttiyat]

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.

[AndyGup]

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.

[KhaledAttiyat]

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.

[AndyGup]

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.

[arahman_mdmajid]

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

[AndyGup]

@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-jitte....

[arahman_mdmajid]

@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.... 

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 

[AndyGup]

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.