topic Re: Issue when stacking draw toolbars for point and polyline in ArcGIS JavaScript Maps SDK Questions

Issue when stacking draw toolbars for point and polyline

AlexanderPleyer — Mon, 30 Oct 2017 12:46:55 GMT

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

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

Code:

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

Re: Issue when stacking draw toolbars for point and polyline

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:11:41 GMT

Alexander,

I would absolutely be a issue with unintended use. Here is how it should be done:

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width,user-scalable=no">

  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Maps Toolbar</title>

  <link rel="stylesheet" href="https://js.arcgis.com/3.22/dijit/themes/nihilo/nihilo.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
  <style>
    html,
    body,
    #mainWindow {
      font-family: sans-serif;
      height: 100%;
      width: 100%;
    }

    html,
    body {
      margin: 0;
      padding: 0;
    }

    #header {
      height: 80px;
      overflow: auto;
      padding: 0.5em;
    }
  </style>

  <script src="https://js.arcgis.com/3.22/"></script>
  <script>
    var map, symbol, mapClickEvt;

    require([
      "esri/map",
      "esri/toolbars/draw",
      "esri/graphic",

      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/symbols/SimpleFillSymbol",

      "dojo/parser", "dijit/registry",
      "dojo/on",

      "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
      "dijit/form/Button", "dijit/WidgetSet", "dojo/domReady!"
    ], function(
      Map, Draw, Graphic,
      SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
      parser, registry, on
    ) {
      parser.parse();

      map = new Map("map", {
        basemap: "streets",
        center: [-15.469, 36.428],
        zoom: 3
      });

      map.on("load", createToolbar);

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

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

      function activateTool() {
        mapClickEvt = map.on("click", function(evt){
          symbol = new SimpleMarkerSymbol();
          var graphic = new Graphic(evt.mapPoint, symbol);
          map.graphics.add(graphic);
        });
        polylineToolbar.activate(Draw["POLYLINE"]);
      }

      function addToMap(evt) {
        if(mapClickEvt){
          mapClickEvt.remove();
        }
        var symbol;
        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);
      }
    });
  </script>
</head>

<body class="nihilo">

  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
      <span>Draw:<br /></span>
      <button data-dojo-type="dijit/form/Button" id="draw">Point and Polyline</button>
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
  </div>

</body>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Issue when stacking draw toolbars for point and polyline

AlexanderPleyer — Thu, 02 Nov 2017 17:22:28 GMT

Thank you. Seems the most viable solution.

Re: Issue when stacking draw toolbars for point and polyline

RobertScheitlin__GISP — Thu, 02 Nov 2017 17:25:11 GMT

Alexander,

Glad to help. Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.