AnsweredAssumed Answered

Draw Toolbar issues when loading dojox/mobile library

Question asked by tnyman on Dec 7, 2016

We’ve built an application that uses Esri’s draw toolbar to place markup on a map.  However, when we load any of the following dojox/mobile libraries, the behavior of the polyline and polygon drawing becomes unstable for ipad touch device users:

  • dojox/mobile/View
  • dojox/mobile/ScrollableView
  • dojox/mobile/ScrollablePane


We tested the addition of the libraries using the ArcGIS sandbox at this URL:

Here are the steps:

  1. Add ANY of the following three lines to the “require”
  • "dojox/mobile/View"
  • "dojox/mobile/ScrollableView"
  • "dojox/mobile/ScrollablePane"
  1. Comment out the following line within the addGraphic() method (this is done so users can draw multiple lines without having to re-select the Polyline button):
  • tb.deactivate();


The behavior we see when using an Ipad device, after making the changes above:

  • Attempting to draw either a polyline or polygon – requires the user to double-tap to end the graphic (and execute the addGraphic method).
  • After double-tapping, the markup continues to try to draw a new polyline or polygon at the point that the initial graphic ended.  Thus double-tapping does not stop the drawing of graphics – but rather begins drawing an unwanted new one.
  • The instability around double-tapping to stop drawing a graphic only becomes an issue when the "dojox/mobile/View" line is added.


The following is the full sandbox code with the changes highlighted in yellow:


<!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 {





      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/Color", "dojo/dom", "dojo/on", "dojo/domReady!",


      ], function(

        Map, Draw,

        SimpleMarkerSymbol, SimpleLineSymbol,

        PictureFillSymbol, CartographicLineSymbol,


        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(


          new SimpleLineSymbol(


            new Color('#000'),







        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) {

            if ( === "info" ) {



            var tool =;






        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>



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