Render list of CIM Symbols in Web Style

JoshGore

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.

 

const itemId = "1fbb242c54e4415d9b8e8a343ca7a9d0";
const item = new PortalItem({ id: itemId });
await item.load();
const itemData = await item.fetchData();
const symbolNames = itemData.items.map((item) => item.name);
const styleUrl =
  "https://local-maps.maps.arcgis.com/sharing/rest/content/items/1fbb242c54e4415d9b8e8a343ca7a9d0/data";
// const firstSymbol = await new WebStyleSymbol({
//   styleUrl,
//   name: symbolNames[0],
// }).fetchCIMSymbol();
const symbols = await Promise.all(
  symbolNames.map((name) => new WebStyleSymbol({ styleUrl, name }))
);

 

JoshGore

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;
  };