I have modified the Measurement widget to keep a session based history of the measurements the user has made. When a user clicks on a history item, it should display the geometry associated with that history item as a GraphicsLayer on the map. I am using knockout to manage the history items and to retrieve measurement metadata when a history item is clicked.
At this point, both my Polygons (for area) and Points (for location) work just fine with the SimpleFillSymbol() and the SimpleMarkerSymbol(), respectively. However, the Polyline geometry returned from a distance measurement is not displaying on the map with the SimpleLineSymbol().
Here's the code:
<SPAN class="kwd">var</SPAN><SPAN class="pln"> graphicLayerId </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"measurementHistoryGraphicsLayer"</SPAN><SPAN class="pun">;</SPAN><SPAN class="pln"> </SPAN>
<SPAN class="kwd">function</SPAN><SPAN class="pln"> addGraphicsLayerToMap</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">graphicsLayer</SPAN><SPAN class="pun">)</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">{</SPAN><SPAN class="pln"> </SPAN>
<SPAN class="kwd"> var</SPAN><SPAN class="pln"> lay </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> getGraphicsLayerFromMap</SPAN><SPAN class="pun">();</SPAN><SPAN class="pln"><BR /></SPAN>
<SPAN class="kwd"> <CODE><SPAN class="kwd"> </SPAN>if (lay !== undefined) {
<SPAN class="pln"><CODE><SPAN class="kwd"> <CODE><SPAN class="kwd"> </SPAN>lay.clear();
<SPAN class="pln"><CODE><SPAN class="kwd"> <CODE><SPAN class="kwd"> </SPAN>lay.add(graphicsLayer);
<SPAN class="pln"><CODE><SPAN class="kwd"> <CODE><SPAN class="kwd"> </SPAN>map.removeLayer(lay);
<SPAN class="pun"><CODE><SPAN class="kwd"> </SPAN>}
<SPAN class="pln"><CODE><SPAN class="kwd"> </SPAN>map.addLayer(graphicsLayer);
<SPAN class="pun">}</SPAN><SPAN class="pln"> </SPAN>
<SPAN class="kwd">function</SPAN><SPAN class="pln"> createGraphicFromGeometry</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">viewModel</SPAN><SPAN class="pun">)</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">{</SPAN><SPAN class="pln"> </SPAN>
<SPAN class="com"> //Determine the symbol type</SPAN>
<SPAN class="pln"></SPAN><SPAN class="kwd"> var</SPAN><SPAN class="pln"> symbol</SPAN><SPAN class="pun">;</SPAN><SPAN class="pln"> </SPAN>
<SPAN class="kwd"> switch</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">viewModel</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">activeTool</SPAN><SPAN class="pun">)</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">{</SPAN><SPAN class="pln"> </SPAN>
<SPAN class="kwd"> case</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"area"</SPAN><SPAN class="pun">:</SPAN><SPAN class="pln"> </SPAN>
<SPAN class="pln"> symbol </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> </SPAN><SPAN class="kwd">new</SPAN><SPAN class="pln"> esri</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">symbol</SPAN><SPAN class="pun">.</SPAN><SPAN class="typ">SimpleFillSymbol</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">esri</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">symbol</SPAN><SPAN class="pun">.</SPAN><SPAN class="typ">SimpleFillSymbol</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">STYLE_SOLID</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="kwd">new</SPAN><SPAN class="pln"> esri</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">symbol</SPAN><SPAN class="pun">.</SPAN><SPAN class="typ">SimpleLineSymbol</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">esri</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">symbol</SPAN><SPAN class="pun">.</SPAN><SPAN class="typ">SimpleLineSymbol</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">STYLE_SOLID</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="kwd">new</SPAN><SPAN class="pln"> esri</SPAN><SPAN class="pun">.</SPAN><SPAN class="typ">Color</SPAN><SPAN class="pun">([</SPAN><SPAN class="lit">255</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">0</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">0</SPAN><SPAN class="pun">]),</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">2</SPAN><SPAN class="pun">),</SPAN><SPAN class="pln"> </SPAN><SPAN class="kwd">new</SPAN><SPAN class="pln"> esri</SPAN><SPAN class="pun">.</SPAN><SPAN class="typ">Color</SPAN><SPAN class="pun">([</SPAN><SPAN class="lit">255</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">0</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">0</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">0.25</SPAN><SPAN class="pun">]));</SPAN><SPAN class="pln"> </SPAN>
<SPAN class="kwd"> break</SPAN><SPAN class="pun">;</SPAN><SPAN class="pln"> </SPAN>
<SPAN class="pun"> <CODE><SPAN class="pln"></SPAN><SPAN class="kwd">case</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"distance"</SPAN><SPAN class="pun">:</SPAN>
<SPAN class="pun"><CODE><SPAN class="pln">symbol </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> </SPAN><SPAN class="kwd">new</SPAN><SPAN class="pln"> esri</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">symbol</SPAN><SPAN class="pun">.</SPAN><SPAN class="typ">SimpleLineSymbol</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">esri</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">symbol</SPAN><SPAN class="pun">.</SPAN><SPAN class="typ">SimpleLineSymbol</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">STYLE_SOLID</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="kwd">new</SPAN><SPAN class="pln"> esri</SPAN><SPAN class="pun">.</SPAN><SPAN class="typ">Color</SPAN><SPAN class="pun">([</SPAN><SPAN class="lit">255</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">0</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">0</SPAN><SPAN class="pun">]),</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">3</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln"><BR /></SPAN>
<SPAN class="pun"><CODE><SPAN class="kwd"> break</SPAN><SPAN class="pun">;</SPAN><SPAN class="pln"><BR /> </SPAN><SPAN class="kwd">case</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"location"</SPAN><SPAN class="pun">:</SPAN><SPAN class="pln"><BR /> symbol </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> </SPAN><SPAN class="kwd">new</SPAN><SPAN class="pln"> esri</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">symbol</SPAN><SPAN class="pun">.</SPAN><SPAN class="typ">SimpleMarkerSymbol</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">esri</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">symbol</SPAN><SPAN class="pun">.</SPAN><SPAN class="typ">SimpleMarkerSymbol</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">STYLE_SQUARE</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">10</SPAN><SPAN class="pun">, new </SPAN><SPAN class="pln">esri</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">symbol</SPAN><SPAN class="pun">.</SPAN><SPAN class="typ">SimpleLineSymbol</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">esri</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">symbol</SPAN><SPAN class="pun">.</SPAN><SPAN class="typ">SimpleLineSymbol</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">STYLE_SOLID</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="kwd">new</SPAN><SPAN class="pln"> esri</SPAN><SPAN class="pun">.</SPAN><SPAN class="typ">Color</SPAN><SPAN class="pun">([</SPAN><SPAN class="lit">255</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">0</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">0</SPAN><SPAN class="pun">]),</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">3</SPAN><SPAN class="pun">),</SPAN><SPAN class="pln"><BR /> </SPAN><SPAN class="kwd">new</SPAN><SPAN class="pln"> esri</SPAN><SPAN class="pun">.</SPAN><SPAN class="typ">Color</SPAN><SPAN class="pun">([</SPAN><SPAN class="lit">0</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">255</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">0</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">0.25</SPAN><SPAN class="pun">]));</SPAN><SPAN class="pln"><BR /> </SPAN><SPAN class="kwd">break</SPAN><SPAN class="pun">;</SPAN><SPAN class="pln"><BR /> </SPAN><SPAN class="pun">}</SPAN><SPAN class="pln"><BR /> </SPAN><SPAN class="kwd">var</SPAN><SPAN class="pln"> graphic </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> </SPAN><SPAN class="kwd">new</SPAN><SPAN class="pln"> esri</SPAN><SPAN class="pun">.</SPAN><SPAN class="typ">Graphic</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">viewModel</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">geometry</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> symbol</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">{</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"extent"</SPAN><SPAN class="pun">:</SPAN><SPAN class="pln"> viewModel</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">extent</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"unitName"</SPAN><SPAN class="pun">:</SPAN><SPAN class="pln"> viewModel</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">unitName </SPAN><SPAN class="pun">});</SPAN><SPAN class="pln"><BR /> </SPAN><SPAN class="kwd">return</SPAN><SPAN class="pln"> graphic</SPAN><SPAN class="pun">;</SPAN><SPAN class="pln"><BR /></SPAN><SPAN class="pun">}</SPAN>
<SPAN class="kwd">function</SPAN><SPAN class="pln"> createGraphicsLayerFromGraphic</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">graphic</SPAN><SPAN class="pun">)</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">{</SPAN><SPAN class="pln"><BR /> </SPAN><SPAN class="kwd">var</SPAN><SPAN class="pln"> graphicLayer </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> </SPAN><SPAN class="kwd">new</SPAN><SPAN class="pln"> esri</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">layers</SPAN><SPAN class="pun">.</SPAN><SPAN class="typ">GraphicsLayer</SPAN><SPAN class="pun">({</SPAN><SPAN class="pln"> id</SPAN><SPAN class="pun">:</SPAN><SPAN class="pln"> graphicLayerId </SPAN><SPAN class="pun">});</SPAN><SPAN class="pln"><BR /> graphicLayer</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">add</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">graphic</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln"><BR /> graphicLayer</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">setRenderer</SPAN><SPAN class="pun">(</SPAN><SPAN class="kwd">new</SPAN><SPAN class="pln"> esri</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">renderer</SPAN><SPAN class="pun">.</SPAN><SPAN class="typ">SimpleRenderer</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">graphic</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">symbol</SPAN><SPAN class="pun">));</SPAN><SPAN class="pln"><BR /> </SPAN><SPAN class="kwd">return</SPAN><SPAN class="pln"> graphicLayer</SPAN><SPAN class="pun">;</SPAN><SPAN class="pln"><BR /></SPAN><SPAN class="pun">}</SPAN><SPAN class="pln"><BR /><BR /></SPAN><SPAN class="kwd">function</SPAN><SPAN class="pln"> getGraphicsLayerFromMap</SPAN><SPAN class="pun">()</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">{</SPAN><SPAN class="pln"><BR /> </SPAN><SPAN class="kwd">return</SPAN><SPAN class="pln"> map</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">getLayer</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">graphicLayerId</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln"><BR /></SPAN><SPAN class="pun">}</SPAN><SPAN class="pln"><BR /><BR />$</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">document</SPAN><SPAN class="pun">).</SPAN><SPAN class="pln">on</SPAN><SPAN class="pun">(</SPAN><SPAN class="str">'click'</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">'#emv_measurement_history .list-group-item'</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="kwd">function</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">()</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">{</SPAN><SPAN class="pln"><BR /> $</SPAN><SPAN class="pun">(</SPAN><SPAN class="str">'#emv_measurement_history .list-group-item.list-group-item-info'</SPAN><SPAN class="pun">).</SPAN><SPAN class="pln">removeClass</SPAN><SPAN class="pun">(</SPAN><SPAN class="str">'list-group-item-info'</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln"><BR /> $</SPAN><SPAN class="pun">(</SPAN><SPAN class="kwd">this</SPAN><SPAN class="pun">).</SPAN><SPAN class="pln">addClass</SPAN><SPAN class="pun">(</SPAN><SPAN class="str">'list-group-item-info'</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln"><BR /> </SPAN><SPAN class="kwd">var</SPAN><SPAN class="pln"> measurementData </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> ko</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">mapping</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">toJS</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">ko</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">dataFor</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">$</SPAN><SPAN class="pun">(</SPAN><SPAN class="kwd">this</SPAN><SPAN class="pun">)[</SPAN><SPAN class="lit">0</SPAN><SPAN class="pun">]));</SPAN><SPAN class="pln"><BR /> </SPAN><SPAN class="kwd">var</SPAN><SPAN class="pln"> graphic </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> createGraphicFromGeometry</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">measurementData</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln"><BR /> </SPAN><SPAN class="kwd">var</SPAN><SPAN class="pln"> graphicsLayer </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> createGraphicsLayerFromGraphic</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">graphic</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln"><BR /> addGraphicsLayerToMap</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">graphicsLayer</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln"><BR /> map</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">setExtent</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">measurementData</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">extent</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln"><BR /></SPAN><SPAN class="pun">});</SPAN>
<SPAN class="pln"> <BR /></SPAN>Like I said, this works fine for both area and location, but distance does not seem to work. I've even tried adding a hard-coded polyline value in there are creating a SimpleLineSymbol from that without success.
For additional information, here is the Polyline info:
<SPAN class="pun">[</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">[</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">[</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">2591769.2297164765</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">5236836.417134136</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">],</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">[</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">2573584.2281166334</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">4620357.96034264</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">],</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">[</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">2557384.1428811993</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">4038303.8136230526</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">],</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">[</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">3124973.8484519687</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">4260007.60486125</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">],</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">[</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">3714518.451309448</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">4454862.77067183</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">],</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">[</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">4324318.833989203</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">4618552.510359674</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">],</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">[</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">4666465.839330839</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">4693607.843734423</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">],</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">[</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">5013294.285789721</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">4757423.375729576</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">]</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">]</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">]</SPAN>
And the spatial reference is set to 102100.