0

I want to stack two different geometry draw toolbars with the ArcGIS API for JavaScript namely a point and a polyline.

The goal is to create a point with the first click and simultaneously start the polyline draw mode so that the polyline start and the point overlie each other.

I created a sample which partially works but the last part of the polyline is not recognized and won't be drawn to the map:

codepen sample

      map.on("load", createToolbar);

  function createToolbar(themap) {
    pointToolbar = new Draw(map);
    pointToolbar.on("draw-end", addToMap);
    polylineToolbar = new Draw(map);
    polylineToolbar.on("draw-end", addToMap);
  }

  on(dojo.byId('draw'), 'click', activateTool);

  function activateTool() {
    pointToolbar.activate(Draw["POINT"]);
    polylineToolbar.activate(Draw["POLYLINE"]);
  }

  function addToMap(evt) {
    var symbol;
    if (evt.geometry.type == "point") {
      pointToolbar.deactivate();
    } else if (evt.geometry.type == "polyline") {
      polylineToolbar.deactivate();
    }
    switch (evt.geometry.type) {
      case "point":
      case "multipoint":
        symbol = new SimpleMarkerSymbol();
        break;
      case "polyline":
        symbol = new SimpleLineSymbol();
        break;
      default:
        symbol = new SimpleFillSymbol();
        break;
    }
    var graphic = new Graphic(evt.geometry, symbol);
    map.graphics.add(graphic);

Is this a bug because of not intended use in the ArcGIS API or is there a way to fix this?

0

I believe it's a bug of not intended use and there is a way to fix this.

Intercept and insert in a var, the last geometry Point, which is the Point created when the user double-clicks. Then, add this Point to the path of the Polyline.

First, rename the event draw-end to draw-complete, as it's deprecated, according to the documentation https://developers.arcgis.com/javascript/3/jsapi/draw-amd.html#events

You can also write the geometry type on activation of the toolbar this way :

function activateTool() {
  pointToolbar.activate(Draw.POINT);
  polylineToolbar.activate(Draw.POLYLINE);
}

Now the interception of the last Point, on double-click :

var lastPoint;
on(map, 'dbl-click', function(e){
  lastPoint= e.mapPoint;
});

Finally, let's add it to the Polyline:

function addToMap(evt) {
  var symbol;
  var geometry = evt.geometry;
  switch (geometry.type) {
    case "point":
    case "multipoint":
      pointToolbar.deactivate();
      symbol = new SimpleMarkerSymbol();
      break;
    case "polyline":
      polylineToolbar.deactivate();
      geometry.insertPoint(0, geometry.paths[0].length, lastPoint);
      symbol = new SimpleLineSymbol();
      break;
    default:
      symbol = new SimpleFillSymbol();
      break;
  }
  var graphic = new Graphic(geometry, symbol);
  map.graphics.add(graphic);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.