Is there any example that I can use to display features on side panel using Javascript API 4.3 ?
Thanks Thomas and Robert!,
Is it in the 4.3 api currently? When I try to reference it from my app, it says it can't be found. Is there a way to get ahold of the code if its not in the package? Thanks
Babara,
It is a class that has not be documented yet. I spoke the the dev team about this last month at the Dev Summit.
In the 4.3 api I don't see 'esri/symbols/support/symbolPreview', The only object under esri/symbols/support is JsonUtils. Where did you find symbolPreview? It sounds like it will generate the SVG descripter from an input symbol or graphic which is what I want to do. Thanks
My approach would be to add a listener to the collection of client side graphics.
You could do this like:
view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenLayerView</SPAN><SPAN class="punctuation token">(</SPAN>featureLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>layerView<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> layerView<SPAN class="punctuation token">.</SPAN>featuresView<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"change"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>changes<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> changes<SPAN class="punctuation token">.</SPAN>added<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>graphicAdded<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// add graphic to list. create a new html element, fill it with information</SPAN> <SPAN class="comment token">// from graphic, append it to list. give it a unique id based on the graphic.uid</SPAN> <SPAN class="comment token">// if you want to render the graphic's symbol, use renderer as shown above here</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN> changes<SPAN class="punctuation token">.</SPAN>removed<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>graphicRemoved<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// remove graphic from list. use graphic uid to find element to remove</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="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>
You can use the symbolPreview approach I mentioned above to get the symbol for a given graphic.
Yes, for each graphic on the map I want to place that feature in a list. I want to list the name and few attribute information along with the symbol on the list. I am looking something similar to the "Info Summary" widget in Web App Builder. The features on the map are added and deleted continuously.
What do you mean by list of features?
Do you mean that, for each graphic on the map (AKA feature), you want to want to place that feature in a list somewhere off the map? If so, what information do you want to include in that list? Do you want to see the symbol for each feature in the list?
If so you can pull in 'esri/symbols/support/symbolPreview' and use it like this:
<SPAN class="comment token">// feature</SPAN> <SPAN class="keyword token">var</SPAN> graphic<SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// reference to list HTML element</SPAN> <SPAN class="keyword token">var</SPAN> listRef<SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> symbol <SPAN class="operator token">=</SPAN> graphic<SPAN class="punctuation token">.</SPAN>symbol <SPAN class="operator token">?</SPAN> graphic<SPAN class="punctuation token">.</SPAN>symbol <SPAN class="punctuation token">:</SPAN> graphic<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>renderer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getSymbol</SPAN><SPAN class="punctuation token">(</SPAN>graphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> symbolPreview<SPAN class="punctuation token">.</SPAN><SPAN class="token function">renderPreviewHTML</SPAN><SPAN class="punctuation token">(</SPAN>symbol<SPAN class="punctuation token">,</SPAN><SPAN class="punctuation token">{</SPAN> opacity<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>svgElement <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> listRef<SPAN class="punctuation token">.</SPAN><SPAN class="token function">appendChild</SPAN><SPAN class="punctuation token">(</SPAN>svgElement<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>
If you want to continuously add and remove features from the list, you have several options. You could add a listener to the layerView's collection of graphics and add/remove items from the list as they are added and removed to this map.
If this seems too complicated the legend widget might be what you want though. It can be rendered off the map in whatever element you pass in.
But, how can I get the list on the side panel ? The events get updated everyday
Thank you Robert. I will explore it.
Naga,
Then I would look at this sample:
View padding | ArcGIS API for JavaScript 4.3
Not a popup. I have a feature service showing some events. I want to display a list of those events in the side panel.
What do you mean display features in the panel? Are you talking about the feature popup?
Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
