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
Solved! Go to 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); ... })
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
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?
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.
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?
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); ... })
Thanks just one more question, How about Draw toolbar? is that also a helper Class or has to come with UI?
Yep, its just a helper and easy to use also.
I would say nothing has a UI unless its under the 'esri/dijit/...' module.