AnsweredAssumed Answered

custom map tool javasctipt

Question asked by Dave.J on Jun 7, 2016
Latest reply on Jun 26, 2016 by ppapadopoulosmarathondata-gr-esridist

Hi, I am new to ArcGIS JavaScript API, I would like to create custom tool on my web app, I search internet, it seems all I can find is custom widget, for example I want to develop custom tool when click the map just display the x, y values in a custom dialog showing where the mouse clicked, and query the feature layer. how can I get started? The following is the sample I took from esri website and I want to add my custom tool to the group, but it does not work. I don't know what I did wrong here, Can anyone help? Thank you in advance.




<!DOCTYPE html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Shapes and Symbols</title>
    <link rel="stylesheet" href="">
      #info {
        top: 20px;color: #444;height: auto;  font-family: arial;right: 20px;  margin: 5px;
        padding: 10px;  position: absolute;  width: 115px;  z-index: 40;  border: solid 2px #666;
        border-radius: 4px;   background-color: #fff;
      html, body, #mapDiv {    padding:0;    margin:0;      height:100%;  }
      button {  display: block;  }

    <script src=""></script>
      var map, tb;
        "esri/map", "esri/toolbars/draw",
        "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
        "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol",
        "esri/graphic", "esri/Color", "dojo/dom", "dojo/on", "dojo/domReady!"
      ], function(
        Map, _Draw,
        SimpleMarkerSymbol, SimpleLineSymbol, PictureFillSymbol, CartographicLineSymbol,
        _Graphic, Color, dom, on
      ) {
        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-25.312, 34.307],
          zoom: 3
        map.on("load", initToolbar);

        // markerSymbol is used for point and multipoint, see for more examples
        var markerSymbol = new SimpleMarkerSymbol();
        markerSymbol.setColor(new Color("#00FFFF"));

        // lineSymbol used for freehand polyline, polyline and line.
        var lineSymbol = new CartographicLineSymbol(
          new Color([255,0,0]), 10,
          CartographicLineSymbol.JOIN_MITER, 5

        // fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol
        // the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png
        var fillSymbol = new PictureFillSymbol("images/mangrove.png",
          new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color('#000'),1), 42, 42);

        function initToolbar() {
          tb = new _Draw(map);
          tb.on("draw-end", addGraphic);

          // event delegation so a click handler is not
          // needed for each individual button
          on(dom.byId("info"), "click", function(evt) {
            //alert(; //show up
            if ( === "info" ) {
            var tool =;


            if(tool != "mycustomtool")




                  on(map, "click", function Map_Click()  {  alert("custom tool");  } )  //this will never show up



        function addGraphic(evt) {
          //deactivate the toolbar and clear existing graphics

          // 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;

 _Graphic(evt.geometry, symbol));
    <div id="info">
      <div>Select a shape then draw on map to add graphic</div>
      <button id="Point">Point</button>
      <button id="Multipoint">Multipoint</button>
      <button id="Line">Line</button>
      <button id="Polyline">Polyline</button>
      <button id="FreehandPolyline">Freehand Polyline</button>
      <button id="Triangle">Triangle</button>
      <button id="Extent">Rectangle</button>
      <button id="Circle">Circle</button>
      <button id="Ellipse">Ellipse</button>
      <button id="Polygon">Polygon</button>
      <button id="FreehandPolygon">Freehand Polygon</button>
      <button id="MyCustomeTool">Custom tool</button>

    <div id="mapDiv"></div>