ESRI JS API 3.14 - Drag Multiple Graphics at a Time

Drag multiple graphics at a time

by Alex Azuero

HTML

<script src="https://js.arcgis.com/3.14/init.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/3.14/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
<script type="text/javascript">
  var dojoConfig = {
    async: true
  };

</script>
<div id="search"></div>
<div id="map"></div>

CSS

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 100%;
  width: 100%;
  margin: 0px;
}

#search {
  display: block;
  position: absolute;
  z-index: 2;
  top: 20px;
  left: 74px;
}

JavaScript

require([
  'esri/arcgis/utils',
  'esri/layers/GraphicsLayer',
  "esri/toolbars/edit",
  'esri/graphic',
  'esri/symbols/SimpleMarkerSymbol',
  'esri/Color',
  'esri/geometry/Point',
  "dojo/dom-construct",
  "dojo/_base/event"
], function(
  arcgisUtils, GraphicsLayer, Edit, Graphic, SimpleMarkerSymbol, Color, Point, domConstruct, event
) {
	// started with https://developers.arcgis.com/javascript/jssamples/toolbar_edit.html
  var map, editToolbar;

  // symbol to be used globally:
  var sms = new SimpleMarkerSymbol().setSize(30).setStyle(SimpleMarkerSymbol.STYLE_CIRCLE).setColor(new Color([255, 0, 0, 0.5]));

  var glMain = new GraphicsLayer();
  var glTemp = new GraphicsLayer();

  var createGraphics = function() {
    // create random points for demo
    for (var i = 0; i < 10; i++) {
      var pt = new Point(getRandomInt(-130, -80), getRandomInt(30, 50));
      var graphic = new Graphic(pt, sms);
      glMain.add(graphic);
    }
  }

  var createToolbar = function() {
    createGraphics();
    editToolbar = new Edit(map);

    // click handlers
    //Activate the toolbar when you click on a graphic
    glMain.on("click", function(evt) {
      console.log('activating');
      event.stop(evt);
      activateToolbar(evt.graphic);
    });

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

  var getRandomInt = function(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  
  var activateToolbar = function(graphic) {
    console.log('activate toolbar', graphic);
    editToolbar.activate(Edit.MOVE, graphic);
  }
  
  
  
  
  var createMapOptions = {
    mapOptions: {
      slider: true
    },
    geometryServiceURL: "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"
  };

  var webMapItemID = "623c6136154d4a1bbbfecab6f01c48a4"; // blank map
  deferred =...