Draw polyline

This sample demonstrates how to prevent users from drawing self-intersecting polylines using the Draw. To start drawing, click the button located just below the zoom controls.

The draw experience is built upon specific classes referred to as draw actions. A Draw action uses view events to generate a set of coordinates from which different types of geometries can be created. Each geometry type has a corresponding draw action class.

After initializing an instance of Draw, call draw.create() and a reference to a relevant draw action will be returned.

In this example, draw.create() is method is called with polyline parameter when user clicks on the Draw polyline button. We listen to different events on the PolylineDrawAction and implement custom logic, preventing users from drawing self-intersecting polylines.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// draw polyline button
document.getElementById("line-button").onclick = () => {
  view.graphics.removeAll();

  // creates and returns an instance of PolyLineDrawAction
  const action = draw.create("polyline");

  // focus the view to activate keyboard shortcuts for sketching
  view.focus();

  // listen polylineDrawAction events to give immediate visual feedback
  // to users as the line is being drawn on the view.
  action.on(["vertex-remove", "cursor-update", "redo", "undo"], updateVertices);
})