topic Re: Issue with draw toolbar activation in ArcGIS JavaScript Maps SDK Questions

Issue with draw toolbar activation

Abdul_AzizMuhammad_Abdul_Majid — Sun, 12 Dec 2021 06:33:34 GMT

Hi,

I am having issue with the toolbar activation at the line 12 in the below code

toolbar.activate(Draw[tool]);‍‍

I am getting this error when checking the web console:

Uncaught TypeError: toolbar.activate is not a function

After further looking/debugging into the developer tool, it seems that the activateTool() function is calling before the createToolbar().

Below is my code sample

map.on('load', createToolbar);

function createToolbar(themap) {
    toolbar = new Draw(map);
    toolbar.on("draw-end", addToMap);
}‍‍‍‍‍‍
on(dom.byId("point"), "click", activateTool('point'));
on(dom.byId("polyline"), "click", activateTool('polyline'));

function activateTool(toolName) {
    var tool = toolName.toUpperCase().replace(/ /g, "_");
    toolbar.activate(Draw[tool]);
    map.hideZoomSlider();
}

function addToMap(evt) {
    var symbol;
    toolbar.deactivate();
    map.showZoomSlider();
    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);
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Thanks to those that can help and thanks to those that helped with the previous question.

Re: Issue with draw toolbar activation

RobertScheitlin__GISP — Wed, 06 Feb 2019 13:29:49 GMT

Abdul,

What does your codes require array and vars look like (the beginning of your code)?

Re: Issue with draw toolbar activation

KevinTientcheu3 — Sun, 12 Dec 2021 06:33:36 GMT

Hello Abdul,

As Robert asked, I am also not sure about why you are using a list on line 12 for Draw. However, playing with the sample code from the ArcGIS API for JavaScript Sandbox I was able to get something that I think is what you are looking for. Below is the edited code from the sandbox. It is different from yours in structure but accomplishes the same thing:

map.on("load", createToolbar);

        //---Define your symbols as needed (marker symbol, lineSymbol, fillSymbol)---//

        function createToolbar() {
          toolbar = new Draw(map);
          toolbar.on("draw-end", addGraphic);

          // event delegation so a click handler is not
          // needed for each individual button
          on(dom.byId("buttons"), "click", function(evt) {
            if ( evt.target.id === "buttons" ) {
              return;
            }
            var tool = evt.target.id.toLowerCase();
            map.hideZoomSlider();
            toolbar.activate(tool);
          });
        }

        function addGraphic(evt) {
          //deactivate the toolbar and clear existing graphics 
          toolbar.deactivate(); 
          map.showZoomSlider();

          // figure out which symbol to use
          var symbol;
          if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
            symbol = markerSymbol;
          } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {
            symbol = lineSymbol;
          }
          else {
            symbol = fillSymbol;
          }

          map.graphics.add(new Graphic(evt.geometry, symbol));
        }
      });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Below is what the HTML might look like:

<div id="buttons">
      <div>Select a shape then draw on map to add graphic</div>
      <button id="Point">Point</button>
      <button id="Polyline">Polyline</button>
 </div>‍‍‍‍‍

I hope it helps!

Re: Issue with draw toolbar activation

JayakumarPD — Mon, 28 Mar 2022 07:52:21 GMT

hi, this is easy, instead of using the default sample given by esri.

on(dom.byId("buttons"), "click", function (evt) { map.on("click", function (evt) { console.log(tool); var pointCordinates = webMercatorUtils.webMercatorToGeographic(evt.mapPoint); console.log(pointCordinates); })

I have challenge of saving the coordinates into database, for point I have taken like this. But how to take the coordinates for polyline.