I have some problem with sticking draggable SVG to ArcGIS map, using D3.js. Let's assume that I had latitude:-34.42507,longitude: 150.89315 to place some point that the SVG would be stick.
Here the point of code:
<SPAN class="keyword token">var</SPAN> newg <SPAN class="operator token">=</SPAN> svg<SPAN class="punctuation token">.</SPAN><SPAN class="token function">append</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"g"</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="token function">data</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>x<SPAN class="punctuation token">:</SPAN> width <SPAN class="operator token">/</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">,</SPAN> y<SPAN class="punctuation token">:</SPAN> height <SPAN class="operator token">/</SPAN> <SPAN class="number token">2</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> dragline <SPAN class="operator token">=</SPAN> newg<SPAN class="punctuation token">.</SPAN><SPAN class="token function">append</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"line"</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="token function">attr</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"x1"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>d<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">return</SPAN> d<SPAN class="punctuation token">.</SPAN>x <SPAN class="operator token">+</SPAN> <SPAN class="punctuation token">(</SPAN>width <SPAN class="operator token">-</SPAN> <SPAN class="number token">20</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="token function">attr</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"y1"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>d<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">return</SPAN> d<SPAN class="punctuation token">.</SPAN>y <SPAN class="operator token">+</SPAN> <SPAN class="punctuation token">(</SPAN>height <SPAN class="operator token">-</SPAN> <SPAN class="number token">20</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="token function">attr</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"x2"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">700</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="token function">attr</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"y2"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">465</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="token function">attr</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"stroke-width"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="token function">attr</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"stroke"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"gray"</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="token function">attr</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"width"</SPAN><SPAN class="punctuation token">,</SPAN>width<SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="token function">attr</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"height"</SPAN><SPAN class="punctuation token">,</SPAN>height<SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="token function">attr</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"cursor"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"move"</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="token function">call</SPAN><SPAN class="punctuation token">(</SPAN>drag<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>When I drag the map, the SVG is stay on the screen, exactly with screen coodinates. What I want is the line is sticked with the coordinates.
What I supposed to do to insert coordinates and make them stick with maps? Thanks a lot.
