topic Render list of CIM Symbols in Web Style in ArcGIS JavaScript Maps SDK Questions

Render list of CIM Symbols in Web Style

JoshGore — Mon, 07 Nov 2022 21:32:08 GMT

I'd like to render a list of every symbol in a web style, similar to the sketch widget in the Map Viewer. I've tried creating a list of web style symbols and then using fetchCIMSymbol to get the related data, fetched symbols are then used by renderPreviewHTML.

Is there a better way of doing this? My current method is quite slow as each 'fetchCIMSymbol' call will go off and fetch the style item data, so the fetchCIMSymbol calls don't run in parallel.

Re: Render list of CIM Symbols in Web Style

AnneFitz — Tue, 08 Nov 2022 02:08:56 GMT

Hi @JoshGore - If your Web Style symbols have a thumbnail defined, you can just load those as the preview initially, and then convert the symbol to a CIMSymbol once the user selects the symbol in your styler widget. This might be faster than converting them all to CIM symbols initially.

That snippet can be found in this sample in our documentation: https://developers.arcgis.com/javascript/latest/sample-code/cim-marker-placement/

Re: Render list of CIM Symbols in Web Style

JoshGore — Tue, 08 Nov 2022 19:35:25 GMT

Thanks Anne, I'd missed that sample!
I got around the above by using the undocumented "webStyleSymbolUtils" as follows:

fetchSymbols = async () => { const data = await this.portalItem.fetchData(); const symbols = await Promise.all( data.items.map(async item => { const webSymbol = new WebStyleSymbol({ styleUrl: `${this.portalItem.itemUrl}/data`, name: item.name, }); // const symbol = await webSymbol.fetchCIMSymbol(); const symbol = await webStyleSymbolUtils.fetchSymbolFromStyle( { data, baseUrl: this.portalItem.itemUrl, styleUrl: `${this.portalItem.itemUrl}/data`, }, item.name, { portal: this.portalItem.portal }, 'cimRef', ); return { symbol, name: webSymbol.name }; }), ); return symbols; };