Edit graphics on GraphicsLayer

FrankyFergus — Sat, 11 Dec 2021 13:05:42 GMT

Hello,

I would like some help please.

I have an application which enables a user to draw a polyline on a map. Through JavaScript, on draw end this polyline is added as a graphic on a graphics layer. What I can't figure out is how can a user edit the vertices of this polyline once it has been added to the GraphicsLayer?

This is my code so far:

if (evt.geometry.type === "polyline") {

  if (map.getScale() < MAP_SCALE) {

  var symbol = new SimpleMarkerSymbol();
  var fillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NULL,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 0, 128]), 3));

  symbol = fillSymbol;

  polylineLayerGL = new GraphicsLayer();


  pipeGraphic = new Graphic(evt.geometry, symbol);
  polylineLayerGL.add(pipeGraphic);
  map.addLayer(polylineLayerGL);


  pipeCount += 1;


  //custAttribInsp(evt);
  } else {                
       return;
}

To edit:

function initEditor(evt) {
  console.log("initEditing", evt);
  // var map = this;
  var currentLayer = null;
  var layers = arrayUtils.map(evt.layers, function(result) {
  return result.layer;
  });
  console.log("layers", layers);


  var editToolbar = new Edit(map);
  editToolbar.on("deactivate", function(evt) {
  currentLayer.applyEdits(null, [evt.graphic], null);
  });


  arrayUtils.forEach(layers, function(layer) {
  var editingEnabled = false;
  layer.on("dbl-click", function(evt) {
  event.stop(evt);
  if (editingEnabled === false) {
  editingEnabled = true;
  editToolbar.activate(Edit.EDIT_VERTICES , evt.graphic);
  } else {
  currentLayer = this;
  editToolbar.deactivate();
  editingEnabled = false;
  }
  });


  layer.on("click", function(evt) {
  event.stop(evt);
  if (evt.ctrlKey === true || evt.metaKey === true) {  //delete feature if ctrl key is depressed
  layer.applyEdits(null,null,[evt.graphic]);
  currentLayer = this;
  editToolbar.deactivate();
  editingEnabled=false;
  }
  });
  });


  var templatePicker = new TemplatePicker({
  featureLayers: layers,
  rows: "auto",
  columns: 2,
  grouping: true,
  style: "height: auto; overflow: auto;"
  }, "templatePickerDiv");


  templatePicker.startup();


  var drawToolbar = new Draw(map);


  var selectedTemplate;
  templatePicker.on("selection-change", function() {
  if( templatePicker.getSelected() ) {
  selectedTemplate = templatePicker.getSelected();
  }
  switch (selectedTemplate.featureLayer.geometryType) {
  case "esriGeometryPoint":
  drawToolbar.activate(Draw.POINT);
  break;
  case "esriGeometryPolyline":
  drawToolbar.activate(Draw.POLYLINE);
  break;
  case "esriGeometryPolygon":
  drawToolbar.activate(Draw.POLYGON);
  break;
  }
  });


  drawToolbar.on("draw-end", function(evt) {
  drawToolbar.deactivate();
  editToolbar.deactivate();
  var newAttributes = lang.mixin({}, selectedTemplate.template.prototype.attributes);
  var newGraphic = new Graphic(evt.geometry, null, newAttributes);
  selectedTemplate.featureLayer.applyEdits([newGraphic], null, null);
  });

  }

However, nothing is happening. Any suggestions please.@

Thanks

frank

topic Edit graphics on GraphicsLayer in ArcGIS JavaScript Maps SDK Questions

Edit graphics on GraphicsLayer