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

Sketch Widget - get geometries

AzariaszTrzciński

Hi everyone!

I've got a code: JS Bin - Collaborative JavaScript Debugging, I can mark something, but how can I save my work so I could use it later? I would be great to have it in JSON format. Could someone help me?

Find more posts tagged with

Accepted answers

AzariaszTrzciński

Yeah! I did it!
If someone would to copy this is all the code: JS Bin - Collaborative JavaScript Debugging

All comments

AzariaszTrzciński

Yeah! I did it!
If someone would to copy this is all the code: JS Bin - Collaborative JavaScript Debugging

RobertScheitlin__GISP

Same thing check the event state for "complete"

sketch<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"update"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
  <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">.</SPAN>state <SPAN class="operator token">===</SPAN> <SPAN class="string token">'complete'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
    <SPAN class="comment token">//do something</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>

AzariaszTrzciński

It helps a lot! I also played with

sketch<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"update"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
	<SPAN class="punctuation token">.</SPAN><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>

but I realised that I really don't need to know about every single change. I only want to save done work. It should be like this:

user is adding / changing / deleting shapes
then click the button "Save my work"
program gather all geometries, convert to JSON or string
add to database

How to do that? Is it possible?

RobertScheitlin__GISP

sketch<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'create'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
  <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>state <SPAN class="operator token">===</SPAN> <SPAN class="string token">'complete'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
    console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="punctuation token">}</SPAN>
<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>

AzariaszTrzciński

Thank you for comment, I saw this method, but I still don't know how to get geometries?
In 3.21 version I used this code:

<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="comment token">//deactivate the toolbar and clear existing graphics </SPAN>
		tb<SPAN class="punctuation token">.</SPAN><SPAN class="token function">deactivate</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> 
		map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">enableMapNavigation</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
		
		<SPAN class="comment token">// figure out which symbol to use</SPAN>
		<SPAN class="keyword token">var</SPAN> symbol <SPAN class="operator token">=</SPAN> fillSymbol<SPAN class="punctuation token">;</SPAN>
		
		map<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation 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>geometry<SPAN class="punctuation token">,</SPAN> symbol<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
		<SPAN class="keyword token">var</SPAN> obj<SPAN class="operator token">=</SPAN>evt<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">.</SPAN>rings<SPAN class="punctuation token">;</SPAN>
		<SPAN class="keyword token">var</SPAN> poly_cords<SPAN class="operator token">=</SPAN><SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN>
		<SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN> <SPAN class="keyword token">var</SPAN> path <SPAN class="operator token">=</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> path <SPAN class="operator token"><</SPAN>obj<SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">;</SPAN> path <SPAN class="operator token">++</SPAN> <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
			<SPAN class="comment token">//For each point in the path...</SPAN>
			<SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN> <SPAN class="keyword token">var</SPAN> pt <SPAN class="operator token">=</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> pt <SPAN class="operator token"><</SPAN> obj<SPAN class="punctuation token">[</SPAN>path<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">;</SPAN> pt<SPAN class="operator token">++</SPAN> <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
				poly_cords<SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN>obj<SPAN class="punctuation token">[</SPAN>path<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">[</SPAN>pt<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">toFixed</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="operator token">+</SPAN><SPAN class="string token">', '</SPAN><SPAN class="punctuation token">;</SPAN>
				poly_cords<SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN>obj<SPAN class="punctuation token">[</SPAN>path<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">[</SPAN>pt<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">toFixed</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="operator token">+</SPAN><SPAN class="string token">' \n'</SPAN><SPAN class="punctuation token">;</SPAN>
			<SPAN class="punctuation token">}</SPAN>
			poly_cords<SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">'---\n'</SPAN><SPAN class="punctuation token">;</SPAN>
		<SPAN class="punctuation token">}</SPAN>
		document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'cords'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> poly_cords<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>‍</SPAN><SPAN>‍</SPAN></SPAN>

Now I even try:

sketch<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"draw-end"</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>
	console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"WORKS!"</SPAN><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>

but still nothing 😞 How can I get it?

RobertScheitlin__GISP

Azariasz,

You can use the toJSON and fromJSON method of the Graphics class. https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html#toJSON

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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