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?
Solved! Go to Solution.
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: ');
});
});
});
If you are looking to move graphics around the map, the easiest way is to use the SketchViewModel, it can manage that for you.
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
Check this one out.
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: ');
});
});
});