Stack draw toolbars with ArcGIS API for JavaScript

Question

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?

• PolyGeo: Cross-posted as stackoverflow.com/q/46933199/820534

Answer 1

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);
}