// Create a MapImageLayer for a USA Map Service containing cities,
      // highways, railroads, and states.
      // Configure initial visibility for each sublayer.
      const layer = new MapImageLayer({
        url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
        sublayers: [
          {
            id: 2,
            visible: true,
          },
          {
            id: 4,
            visible: false,
            title: "Railroads",
            renderer,
            source: {
              // Specify that this sublayer uses a dynamic data source.
              type: "data-layer",
              // Define the data source for the sublayer:
              // here, a feature class table from a file geodatabase is referenced.
              dataSource: {
                type: "table",
                workspaceId: "MyDatabaseWorkspaceIDSSR2", // Workspace name
                dataSourceName: "ss6.gdb.Railroads", // Table name
              },
            },
          },
          {
            id: 1,
            visible: true,
          },
          {
            id: 0,
            visible: true,
          },
        ],
      });

      // After the layer loads, synchronize the Calcite list UI
      // with the current sublayer visibility.
      await layer.loadAll();
      layer.sublayers?.forEach((sublayer) => {
        const listItem = document.querySelector(`calcite-list-item[value="${sublayer.id}"]`);
        if (listItem) {
          listItem.selected = sublayer.visible;
        }
      });

      // When the Calcite list selection changes, update each sublayer's visibility
      // to match the selected state of its corresponding list item.
      document.querySelector("calcite-list").addEventListener("calciteListChange", () => {
        const listItems = document.querySelectorAll("calcite-list-item");
        listItems.forEach((listItem) => {
          const sublayer = layer.findSublayerById(Number(listItem.value));
          if (sublayer) {
            sublayer.visible = listItem.selected;
          }
        });
      });