How to Make Point Graphic Added to Map Ediotable

[BehrouzHosseini]

Using ArcGIS JavaScript 3.19 I am trying to create my own tool instead of using ArcGIS Toolbar. I am able to add some graphics (point) on the map using this code

var schoolMarker = new SimpleMarkerSymbol();
 schoolMarker.setStyle(SimpleMarkerSymbol.STYLE_CIRCLE);
 schoolMarker.setSize(8);
 schoolMarker.setOutline(null);
 schoolMarker.setColor(new Color([156, 255, 0, 1]));

var schoolGraphicLayer = new GraphicsLayer();
 schoolGraphicLayer.id = 'SchoolGLayer';

 map.addLayer(schoolGraphicLayer);

map.on("click", addGraphic);
function addGraphic(evt) {
    var schoolMarker = new SimpleMarkerSymbol();
    var graphic = new Graphic(evt.mapPoint, schoolMarker);
    schoolGraphicLayer.add(graphic)
 }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

now what I need is to  Make the Points Editable(Moveable)  Can you please let me know how to fix this? Thanks

[Drew]

Make Editable 

Look at the Edit Toolbar to make this happen.

To get the Lat/Long 

Well this depends on your data and what coordinate system its in.
You can get the X and Y of your data from your 'evt.mapPoint' object (evt.mapPpoint.x)  - review  the Point object for all details.

If you want lat and long and your data is in WebMercator you will want to use the webMercatorUtils - specifically the webMercatorToGeographic function.

Drew

[BehrouzHosseini]

Thanks Andrew,

As I mentioned already I am not willing to use the Toolbar (Edit or Draw) so can you please let me know how I can do this without using the toolbar?

I also updated the code to

 var schoolMarker = new SimpleMarkerSymbol();
 schoolMarker.setStyle(SimpleMarkerSymbol.STYLE_CIRCLE);
 schoolMarker.setSize(8);
 schoolMarker.setOutline(null);
 schoolMarker.setColor(new Color([156, 255, 0, 1]));
 var schoolGraphicLayer = new GraphicsLayer();
 schoolGraphicLayer.id = 'SchoolGLayer';
 map.addLayer(schoolGraphicLayer);
 map.on("click", addGraphic);

function addGraphic(evt) {
 var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
 var lat = mp.x;
 var long = mp.y;
 console.log(lat, long);
 var point = new Point(lat, long);
 var graphic = new Graphic(point, schoolMarker);
 schoolGraphicLayer.add(graphic);
 }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

and now I am able to get the lat and long values but still not sure how to make them editable?

[Drew]

Can I ask why you are not willing to use the edit toolbar?
It does not physically 'edit' the data.

"The Edit toolbar is a helper class that provides functionality to move graphics or modify individual vertices, i.e., edit the geometry of existing graphics. 

[BehrouzHosseini]

well I would like to use my own custom UI (in front end) but using the Draw and Edit toolbar I have to add and use all UI from the ESRI, am I right?

[Drew · Accepted solution]

Also.. The Edit Toolbar is not a physical toolbar.. it has no UI (user interface).

It's just a helper class to move and modify graphics.

Sample to move and scale a graphic

require([
  "esri/toolbars/edit", ... 
], function(Edit, ... ) {
  var editToolbar = new Edit( ... );
  //Combine tools 
  editToolbar.activate(Edit.MOVE | Edit.SCALE, evt.graphic);
  ...
})

[BehrouzHosseini]

Thanks just one more question, How about Draw toolbar? is that also a helper Class or has to come with UI?

[Drew]

Yep, its just a helper and easy to use also.

I would say nothing has a UI unless its under the 'esri/dijit/...' module.