topic Re: Arcgis Javascript API 4.14 Moving marker symbol in the Graphics Layer in Angular 8 is not smooth in ArcGIS JavaScript Maps SDK Questions

Arcgis Javascript API 4.14 Moving marker symbol in the Graphics Layer in Angular 8 is not smooth

MarkGlass — Fri, 02 Apr 2021 16:13:40 GMT

We have an app with a simple implementation of ESRI Arcgis Javascript API (arcgis-js-api v4.14.0) with esri-loader v2.13.0.We are using Angular 8 and JDK 11, .

The application displays a topographical map in an Angular dialog window. The user may add/delete marker symbols on the map using a left mouse-click. The user may also move the marker symbol by left mouse-click on the marker symbol and dragging the marker symbol.

My Question has to do with the dragging behavior. It's choppy and easily lost if the user moves too fast.

return loadModules([ 'esri/Map', 'esri/views/MapView', 'esri/Graphic', 'esri/layers/GraphicsLayer', ]) .then(([Map, MapView, Graphic, GraphicsLayer]) => { ..... this.mapView.on('drag', (event:DragEvent) => { event.stopPropagation(); this.mapView.hitTest(event) .then((response) => { if (response.results.length > 1) { const graphic = response.results[0].graphic; const mapPoint = response.results[0].mapPoint; const location = this.getLocationFromMapPoint(mapPoint); const pointGraphic: esri.Graphic = this.getGraphic(Graphic, location); this.removePin(graphic); this.addPin(pointGraphic); } }); })

removePin(graphic) removes the pin(i.e. marker symbol) from the graphic layer and addPin places a new pin in the graphic layer.

Is there a better way to move the marker symbol?

Re: Arcgis Javascript API 4.14 Moving marker symbol in the Graphics Layer in Angular 8 is not smooth

ReneRubalcava — Fri, 02 Apr 2021 21:59:03 GMT

If you are looking to move graphics around the map, the easiest way is to use the SketchViewModel, it can manage that for you.

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html

Re: Arcgis Javascript API 4.14 Moving marker symbol in the Graphics Layer in Angular 8 is not smooth

MarkGlass — Mon, 05 Apr 2021 16:24:09 GMT

Thank you for your quick response. I took a look at the link you sent back and tried to envision how it might work with what I've done already. I did another search for examples based on Sketchview but am still not able to see how I can use SketchViewModel to resolve my problem.

Can you provide an example how SketchViewModel can be used in conjunction with a WebView using JSAPI 4.14?

Thank you

Re: Arcgis Javascript API 4.14 Moving marker symbol in the Graphics Layer in Angular 8 is not smooth

BlakeTerhune — Mon, 05 Apr 2021 17:46:32 GMT

Check this one out.

Sketch update validation | ArcGIS API for JavaScript

Re: Arcgis Javascript API 4.14 Moving marker symbol in the Graphics Layer in Angular 8 is not smooth

AndyGup — Mon, 05 Apr 2021 21:56:42 GMT

If the SketchViewModel runs slower in Angular than in a vanilla JS app, and there aren't any errors in the console, it's possible the performance issue is related to zone.js and Angular's built-in component change detection. There are two primary ways to try and address these types of issues.

You can move to a manual change detection pattern within your map component, there is a lot of info about this on the web, here is one example of how to do it.

Or, you can also try running your code outside of the Angular "zone", similar to this super basic, pseudo-example:

this.zone.runOutsideAngular(() => { // Initialize MapView here this.initializeMap().then(() => { // The map has been initialized . . . // For non-map-related component events, run them outside the Zone this.zone.run(() => { console.log('mapView ready: '); }); }); });