Sketch update validation
Note: Support for 3D on mobile devices may vary, view the system requirements for more information.
In the current version of the API, you can use the SketchViewModel to draw and update geometries of temporary graphics in a 2D MapView. The SketchViewModel does not have a user interface component. Instead it will provide the logic for the Sketch widget, which will be added in a future release.
This sample demonstrates how to update a polygon geometry of a temporary graphic. SketchViewModel's update operations include moving, rotating and scaling an entire geometry or moving one or more vertices of the geometry.
How it works
This application allows a user to update an existing polygon and check whether the updated geometry intersects any neighboring polygon features or the boundary polygon.
First, select the graphic polygon and update its geometry. While updating, the application checks whether the updated geometry intersects any existing school buffer polygons. The application also checks to make sure that the updated geometry is within the contained boundary polygon. If these conditions are true
, the application changes the symbol of the new development graphic and notifies the user that the update is invalid. If a user tries to cancel or complete the update operation while the updated geometry is invalid, the sketchViewModel's update() method is called. This gives the user a chance to correct any invalid updates.
// Listen to sketchViewModel events to make sure that the new development polygon graphic
// does not intersect school buffers or is contained by the boundary polygon. If it does,
// change the new development polygon graphic symbol to an invalid symbol and give the user a chance
// to correct the invalid update.
sketchViewModel.on("update-init", checkGraphicUpdate);
sketchViewModel.on("move-start", checkGraphicUpdate);
sketchViewModel.on("move", checkGraphicUpdate);
sketchViewModel.on("move-complete", checkGraphicUpdate);
sketchViewModel.on("scale-start", checkGraphicUpdate);
sketchViewModel.on("scale", checkGraphicUpdate);
sketchViewModel.on("scale-complete", checkGraphicUpdate);
sketchViewModel.on("rotate-start", checkGraphicUpdate);
sketchViewModel.on("rotate", checkGraphicUpdate);
sketchViewModel.on("rotate-complete", checkGraphicUpdate);
sketchViewModel.on("reshape-start", checkGraphicUpdate);
sketchViewModel.on("reshape", checkGraphicUpdate);
sketchViewModel.on("reshape-complete", checkGraphicUpdate);
sketchViewModel.on("update", checkGraphicUpdate);
sketchViewModel.on("undo", checkGraphicUpdate);
sketchViewModel.on("redo", checkGraphicUpdate);
// Event handler for update-cancel and update-complete events
sketchViewModel.on("update-cancel", graphicUpdateEnded);
sketchViewModel.on("update-complete", graphicUpdateEnded);
// Called from various sketchViewModel update events
function checkGraphicUpdate(event) {
// update the new development graphic geometry to match the update geometry
newDevelopmentGraphic.geometry = event.geometry;
// Check if the new development graphic geometry intersects school buffers
// or the boundary polygon. If it does, change the graphic symbol to indicate
// the update is invalid.
intersects = geometryEngine.intersects(buffers, newDevelopmentGraphic.geometry);
contains = geometryEngine.contains(boundaryPolygon, newDevelopmentGraphic.geometry);
newDevelopmentGraphic.symbol = (intersects) || (!contains) ? invalidSymbol : validSymbol
}
// Called from sketchViewModel's update-cancel and update-complete events.
function graphicUpdateEnded(event) {
// If the updated graphic intersects school buffers or is not contained
// by the boundary polygon, change the graphic symbol and Pass the invalid
// graphic to sketchViewModel.update method.
if ((!contains) || (intersects)) {
newDevelopmentGraphic.symbol = invalidSymbol;
sketchViewModel.update(newDevelopmentGraphic);
}
}