topic Re: Edit Toolbar and Measure tool bar not working together in ArcGIS JavaScript Maps SDK Questions

Edit Toolbar and Measure tool bar not working together

RobertKirkwood — Thu, 18 Oct 2018 16:54:16 GMT

Edit Toolbar and Measure tool bar not working together. When one is activated it messes up the other. Any suggestions?

<!DOCTYPE html>
<html>
<head>
<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>Edit Tools</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.26/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.26/esri/css/esri.css">
<style>
html, body, #mainWindow {
font-family: sans-serif;
height: 100%;
width: 100%;
}
html, body {
margin: 0;
padding: 0;
}
#mainWindow {
visibility: hidden;
}
</style>

require([
"esri/map",
"esri/toolbars/edit",
"esri/graphic",
"esri/dijit/Measurement",

"esri/geometry/Point",
"esri/geometry/Polyline",
"esri/geometry/Polygon",

"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/TextSymbol",

"dojo/_base/event",
"dojo/parser",
"dojo/dom",
"dojo/dom-style",
"dijit/registry",
"dijit/Menu",

"dijit/form/ToggleButton",
"dijit/form/DropDownButton",
"dijit/CheckedMenuItem",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
Map, Edit, Graphic,Measurement,
Point, Polyline, Polygon,
SimpleLineSymbol, SimpleFillSymbol, TextSymbol,
event, parser, dom, domStyle, registry, Menu
) {
parser.parse();

domStyle.set(registry.byId("mainWindow").domNode, "visibility", "visible");

map = new Map("map", {
basemap: "streets",
center: [3.955, 59.338],
zoom: 3
});

map.on("load", createToolbar);

var measurement = new Measurement({
map: map
}, dom.byId("measurementDiv"));
measurement.startup();

function createToolbar() {
addGraphics();
editToolbar = new Edit(map);

//Activate the toolbar when you click on a graphic
map.graphics.on("click", function(evt) {
event.stop(evt);
activateToolbar(evt.graphic);
});

//deactivate the toolbar when you click outside a graphic
map.on("click", function(evt){
editToolbar.deactivate();
});
}

measurement.on("measure-end", function (evt) {
this.setTool(evt.area, false);
});
function addGraphics() {
//add pre-defined geometries to map
var polygonSymbol = new SimpleFillSymbol();
var polylineSymbol = new SimpleLineSymbol();
var text = new TextSymbol("Editable Text");
text.font.setSize("20pt");

var polygon = new Polygon({
"rings": [
[
[-4226661, 8496372],
[-3835304, 8731187],
[-2269873, 9005137],
[-1213208, 8613780],
[-1017529, 8065879],
[-1213208, 7478843],
[-2230738, 6891806],
[-2935181, 6735263],
[-3522218, 6891806],
[-3952711, 7165757],
[-4265797, 7283164],
[-4304933, 7635386],
[-4304933, 7674521],
[-4226661, 8496372]
]
],
"spatialReference": {
"wkid": 102100
}
});
var arrow = new Polygon({
"rings": [
[
[9862211, 6617856],
[8922952, 5522055],
[8922952, 5991684],
[6105178, 5991684],
[6105178, 7087485],
[8922952, 7087485],
[8922952, 7557114],
[9862211, 6617856]
]
],
"spatialReference": {
"wkid": 102100
}
});

map.graphics.add(new Graphic(polygon, polygonSymbol));
map.graphics.add(new Graphic(arrow, polygonSymbol));

}

</html>

Re: Edit Toolbar and Measure tool bar not working together

RobertScheitlin__GISP — Thu, 18 Oct 2018 19:58:35 GMT

Robert,

Did you get this figured out?

Re: Edit Toolbar and Measure tool bar not working together

RobertKirkwood — Thu, 18 Oct 2018 20:33:37 GMT

Yes, a colleague of mine helped out. here is the .js

require([
"esri/map",
"esri/toolbars/edit",
"esri/graphic",
"esri/dijit/Measurement",
"esri/units",

"esri/geometry/Point",
"esri/geometry/Polyline",
"esri/geometry/Polygon",

"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/TextSymbol",

"dojo/_base/event",
"dojo/parser",
"dojo/dom",
"dojo/dom-style",
"dijit/registry",
"dijit/Menu",
"esri/config",

"dijit/form/ToggleButton",
"dijit/form/DropDownButton",
"dijit/CheckedMenuItem",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
Map,
Edit,
Graphic,
Measurement,
Units,
Point,
Polyline,
Polygon,
SimpleLineSymbol,
SimpleFillSymbol,
TextSymbol,
event,
parser,
dom,
domStyle,
registry,
Menu,
esriConfig
) {

var editToolbar, map, measureToolbar

parser.parse();
domStyle.set(registry.byId("mainWindow").domNode, "visibility", "visible");
esriConfig.defaults.geometryService = new esri.tasks.GeometryService("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Geometry/GeometryServer");

map = new Map("map", {
basemap: "streets",
center: [3.955, 59.338],
zoom: 3
});

map.on("load", function() {
addTestingGraphics()
createMeasurementTool()
createEditingToolbar()
})

function activateToolbar(graphic) {
var tool = Edit.MOVE|Edit.EDIT_VERTICES|Edit.SCALE|Edit.ROTATE
editToolbar.activate(tool, graphic);
}

function createMeasurementTool() {
measureToolbar = new Measurement({
map: map,
defaultAreaUnit: Units.SQUARE_MILES,
defaultLengthUnit: Units.KILOMETERS
}, dom.byId("measurementDiv") )
measureToolbar.startup()
measureToolbar.on("measure-start",function(){
console.log("measuring has started")
measureToolbar._isActive = true
})
measureToolbar.on("measure-end",function(){
console.log("measuring has ended")
measureToolbar._isActive = false
})
measureToolbar.on("tool-change",function(){
console.log("measuring tool has changed, tool is reset")
measureToolbar._isActive = false
})
}

function createEditingToolbar() {
editToolbar = new Edit(map)
map.graphics.on("click", function(evt) {
if (!measureToolbar._isActive) {
event.stop(evt)
activateToolbar(evt.graphic)
}

})
map.on("click", function(evt){
editToolbar.deactivate()
})
}

})