Draw Toolbar issues when loading dojox/mobile library

TimothyNyman — Wed, 07 Dec 2016 19:20:22 GMT

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:

https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=graphics_add

Here are the steps:

Add ANY of the following three lines to the “require”

"dojox/mobile/View"
"dojox/mobile/ScrollableView"
"dojox/mobile/ScrollablePane"

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>

<html>

<head>

<title>Shapes and Symbols</title>

<style>

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

}

</style>

var map, tb;

require([

"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!",

"dojox/mobile/View"

], 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 http://raphaeljs.com/icons/#talkq for more examples

var markerSymbol = new SimpleMarkerSymbol();

markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");

markerSymbol.setColor(new Color("#00FFFF"));

// lineSymbol used for freehand polyline, polyline and line.

var lineSymbol = new CartographicLineSymbol(

CartographicLineSymbol.STYLE_SOLID,

new Color([255,0,0]), 10,

CartographicLineSymbol.CAP_ROUND,

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'),

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

if ( evt.target.id === "info" ) {

return;

}

var tool = evt.target.id.toLowerCase();

map.disableMapNavigation();

tb.activate(tool);

});

}

function addGraphic(evt) {

//deactivate the toolbar and clear existing graphics

//tb.deactivate();

map.enableMapNavigation();

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

}

});

</script>

</head>

<body>

<div>Select a shape then draw on map to add graphic</div>

<button id="Point">Point</button>

<button id="Multipoint">Multipoint</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>

</body>

</html>

topic Draw Toolbar issues when loading dojox/mobile library in ArcGIS JavaScript Maps SDK Questions

Draw Toolbar issues when loading dojox/mobile library