Rotate symbol with map

BerendVeldkamp

It seems that between version 4.9 and 4.10, display of a graphic's symbol was changed so that it's rotation is always relative to the screen rather than the mapview.

I have added some features to a graphicslayer that I want to point in a certain compass direction, which obviously does not work now. Is there an option to override the default behavior, and set the angle relative to the mapview's rotation?

UndralBatsukh

Hi there, 

You can watch View's rotation property and set the graphic's symbol to match the view.rotation as shown below:

view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">watch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"rotation"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>r<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
  graphic<SPAN class="punctuation token">.</SPAN>symbol <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
    type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"picture-marker"</SPAN><SPAN class="punctuation token">,</SPAN>
    url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"http://static.arcgis.com/images/Symbols/Transportation/RedTriangleDaymark.png"</SPAN><SPAN class="punctuation token">,</SPAN>
    width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">60</SPAN><SPAN class="punctuation token">,</SPAN>
    height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">40</SPAN><SPAN class="punctuation token">,</SPAN>
    yoffset<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">20</SPAN><SPAN class="punctuation token">,</SPAN>
    angle<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">.</SPAN>rotation
  <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">"view rotation: "</SPAN><SPAN class="punctuation token">,</SPAN> Math<SPAN class="punctuation token">.</SPAN><SPAN class="token function">round</SPAN><SPAN class="punctuation token">(</SPAN>r<SPAN class="punctuation token">)</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><SPAN class="string token">"symbol angle: "</SPAN><SPAN class="punctuation token">,</SPAN> graphic<SPAN class="punctuation token">.</SPAN>symbol<SPAN class="punctuation token">.</SPAN>angle<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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Here is a simple app that shows how to rotate the symbol when view rotates.

-Undral