topic Re: How to Make Point Graphic Added to Map Ediotable in ArcGIS JavaScript Maps SDK Questions

How to Make Point Graphic Added to Map Ediotable

BehrouzHosseini — Sun, 12 Dec 2021 05:23:21 GMT

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

Re: How to Make Point Graphic Added to Map Ediotable

Drew — Tue, 17 Jan 2017 18:40:28 GMT

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

Re: How to Make Point Graphic Added to Map Ediotable

BehrouzHosseini — Sun, 12 Dec 2021 05:23:24 GMT

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?

Re: How to Make Point Graphic Added to Map Ediotable

Drew — Tue, 17 Jan 2017 19:01:32 GMT

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.

Re: How to Make Point Graphic Added to Map Ediotable

BehrouzHosseini — Tue, 17 Jan 2017 19:07:55 GMT

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?

Re: How to Make Point Graphic Added to Map Ediotable

Drew — Sun, 12 Dec 2021 05:23:27 GMT

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);
  ...
})

Re: How to Make Point Graphic Added to Map Ediotable

BehrouzHosseini — Tue, 17 Jan 2017 19:15:06 GMT

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

Re: How to Make Point Graphic Added to Map Ediotable

Drew — Tue, 17 Jan 2017 19:18:00 GMT

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

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