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?

Finde mehr Beiträge mit dem Tag

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

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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