HTML Preview
<body>
  <calcite-shell>
    <calcite-navigation slot="header">
      <calcite-navigation-logo slot="logo" />
    </calcite-navigation>
    <div id="viewDiv"></div>
  </calcite-shell>
  
  <script>
    require(["esri/WebMap", "esri/widgets/LayerList", "esri/views/MapView"], (
      WebMap,
      LayerList,
      MapView
    ) => {
      const webMap = new WebMap({
        portalItem: {
          id: "e691172598f04ea8881cd2a4adaa45ba",
        },
      });
      const view = new MapView({
        container: "viewDiv",
        map: webMap,
        zoom: 4,
      });
      view.when(() => {
        const portalItem = view.map.portalItem;
        const navigationLogo = document.querySelector(
          "calcite-navigation-logo"
        );
        navigationLogo.heading = portalItem.title;
        navigationLogo.description = portalItem.snippet;
        navigationLogo.thumbnail = portalItem.thumbnailUrl;
        const layer = view.map.layers.find(
          (layer) => layer.id === "Accidental_Deaths_8938"
        );
        layer.popupTemplate.title = "Accidental Deaths";
        const layerList = new LayerList({
          view,
        });
        view.ui.add(layerList, "top-right");
        layerList.listItemCreatedFunction = (event) => {
          const item = event.item;
          if (item.layer.type !== "group") {
            item.panel = {
              content: "legend",
            };
          }
        };
      });
    });
  </script>
</body>
Powered by Esri