Draw non-intersecting line

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample demonstrates how to prevent users from drawing self-intersecting polylines using the Draw API. 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 and mode:"click" parameters when user clicks on the Draw polyline button. User can only draw lines by clicking on the view. We listen to different events on the PolylineDrawAction and implement custom logic, preventing users from drawing self-intersecting polylines.

drawLineButton.onclick = function () {
  enableCreateLine(draw, view);
}

function enableCreateLine(draw, view) {
  // creates and returns an instance of PolyLineDrawAction
  // can only draw a line by clicking on the map
  var action = draw.create("polyline", {mode: "click"});

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

  // listen to vertex-add event on the polyline draw action
  action.on("vertex-add", updateVertices);

  // listen to vertex-remove event on the polyline draw action
  action.on("vertex-remove", updateVertices);

  // listen to cursor-update event on the polyline draw action
  action.on("cursor-update", createGraphic);

  // listen to draw-complete event on the polyline draw action
  action.on("draw-complete", updateVertices);
}