Multiple Draw objects causing tooltip cut-off

BhavinSanghani · ‎11-05-2014

It seems there is a bug in ArcGIS JS API (3.10) when instantiating multiple Draw objects and hovering over on the map. When it hover over, it shows tooltip cut-off (see attached).

Steps to reproduce:

1) Go to ArcGIS API for JavaScript Sandbox

2) Replace activateTool and createToolbar in this example with the following code

function activateTool() {

var tool = this.label.toUpperCase().replace(/ /g, "_");

toolbar = new Draw(map);

toolbar.activate(Draw[tool]);

toolbar.on("draw-end", addToMap);

toolbar.on("draw-complete", function(){

});

map.hideZoomSlider();

}

function createToolbar(themap) {

//toolbar = new Draw(map);

// toolbar.on("draw-end", addToMap);

}

3) Run the code.

4) Click on Circle and hover over the map. It will show tooltip properly.

5) Click on Freehand Polygon and hover over the map. It will show tooltip cut-off (see attached).

Can dev team confirm whether it's a bug? Is it not valid to create multiple instances of Draw object? I created in my application on click of the tool. Also, I need to create drawing tool for multiple functionality. e.g. If I click on toolbar icon in my application for one line tool then it will allow to sketch the drawing, whereas another toolbar icon will allow line tool to perform measurement. Callback functions are configured differently in both the cases. Instead of keeping track of action, I preferred to create another Draw object in separate function.

KellyHutchins · ‎11-11-2014

Try deactivating the tool before re-creating it. Here's a modified version of the sandbox.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Maps Toolbar</title>
    
    <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/nihilo/nihilo.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.11/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="http://js.arcgis.com/3.11/"></script>
    <script>
      var map, toolbar = null, symbol, geomTask;


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


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


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


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


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


        // loop through all dijits, connect onClick event
        // listeners for buttons to activate drawing tools
        registry.forEach(function(d) {
          // d is a reference to a dijit
          // could be a layout container or a button
          if ( d.declaredClass === "dijit.form.Button" ) {
            d.on("click", activateTool);
          }
        });


       function activateTool() {
         if(toolbar){
           toolbar.deactivate();
         }
          var tool = this.label.toUpperCase().replace(/ /g, "_");
          toolbar = new Draw(map);
          toolbar.activate(Draw[tool]);
          toolbar.on("draw-end", addToMap);
          toolbar.on("draw-complete", function(){
          });
          map.hideZoomSlider();
        }


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


        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);
        }
      });
    </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">Point</button>
      <button data-dojo-type="dijit/form/Button">Multi Point</button>
      <button data-dojo-type="dijit/form/Button">Line</button>
      <button data-dojo-type="dijit/form/Button">Polyline</button>
      <button data-dojo-type="dijit/form/Button">Polygon</button>
      <button data-dojo-type="dijit/form/Button">Freehand Polyline</button>
      <button data-dojo-type="dijit/form/Button">Freehand Polygon</button>
      <!--The Arrow,Triangle,Circle and Ellipse types all draw with the polygon symbol-->
      <button data-dojo-type="dijit/form/Button">Arrow</button>
      <button data-dojo-type="dijit/form/Button">Triangle</button>
      <button data-dojo-type="dijit/form/Button">Circle</button>
      <button data-dojo-type="dijit/form/Button">Ellipse</button>
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
  </div>


  </body>
</html>