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

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

<SPAN class="keyword token">var</SPAN> schoolMarker <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleMarkerSymbol</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 schoolMarker<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setStyle</SPAN><SPAN class="punctuation token">(</SPAN>SimpleMarkerSymbol<SPAN class="punctuation token">.</SPAN>STYLE_CIRCLE<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 schoolMarker<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setSize</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">8</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 schoolMarker<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setOutline</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 schoolMarker<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setColor</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">156</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="keyword token">var</SPAN> schoolGraphicLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">GraphicsLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 schoolGraphicLayer<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">=</SPAN> <SPAN class="string token">'SchoolGLayer'</SPAN><SPAN class="punctuation token">;</SPAN>

 map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addLayer</SPAN><SPAN class="punctuation token">(</SPAN>schoolGraphicLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> addGraphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">addGraphic</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> schoolMarker <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleMarkerSymbol</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> graphic <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>mapPoint<SPAN class="punctuation token">,</SPAN> schoolMarker<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; schoolGraphicLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>graphic<SPAN class="punctuation token">)</SPAN>
 <SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

Najděte více příspěvků označených jako

Accepted answers

Drew

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

All comments

BehrouzHosseini

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

Drew

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

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

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

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

 <SPAN class="keyword token">var</SPAN> schoolMarker <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleMarkerSymbol</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 schoolMarker<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setStyle</SPAN><SPAN class="punctuation token">(</SPAN>SimpleMarkerSymbol<SPAN class="punctuation token">.</SPAN>STYLE_CIRCLE<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 schoolMarker<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setSize</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">8</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 schoolMarker<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setOutline</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 schoolMarker<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setColor</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">156</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="keyword token">var</SPAN> schoolGraphicLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">GraphicsLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 schoolGraphicLayer<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">=</SPAN> <SPAN class="string token">'SchoolGLayer'</SPAN><SPAN class="punctuation token">;</SPAN>
 map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addLayer</SPAN><SPAN class="punctuation token">(</SPAN>schoolGraphicLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> addGraphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="keyword token">function</SPAN> <SPAN class="token function">addGraphic</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="keyword token">var</SPAN> mp <SPAN class="operator token">=</SPAN> webMercatorUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">webMercatorToGeographic</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>mapPoint<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="keyword token">var</SPAN> lat <SPAN class="operator token">=</SPAN> mp<SPAN class="punctuation token">.</SPAN>x<SPAN class="punctuation token">;</SPAN>
 <SPAN class="keyword token">var</SPAN> long <SPAN class="operator token">=</SPAN> mp<SPAN class="punctuation token">.</SPAN>y<SPAN class="punctuation token">;</SPAN>
 console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>lat<SPAN class="punctuation token">,</SPAN> long<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="keyword token">var</SPAN> point <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Point</SPAN><SPAN class="punctuation token">(</SPAN>lat<SPAN class="punctuation token">,</SPAN> long<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="keyword token">var</SPAN> graphic <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN>point<SPAN class="punctuation token">,</SPAN> schoolMarker<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 schoolGraphicLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>graphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

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

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.