This sample shows how to display an instance of a hosted ImageryTileLayer in a Map component. The ImageryTileLayer in this sample shows the National Land Cover Database (NLCD) 2016 land cover types for the contiguous United States. Tiled imagery layers can be published and hosted in ArcGIS Online. These layers are image services generated from one or more image files. If an ImageryTileLayer is created using multiple images, the images are mosaicked together into a single image. Source images and raster files are converted to Cloud Raster Format (CRF) when uploaded to your ArcGIS Online organization. See the Publish hosted imagery layers document for more information on hosting your raster data.

How it works

When the application starts, the UI allows the user to specify the land cover type to display and the spatialReference of the Map component. The user can choose a spatial reference from a drop-down menu. The Map component’s spatialReference is updated with the selected spatial reference as shown below, and layers are projected to match it:

      // Reproject the data to the projection selected by the user.
      const wkidSelect = document.getElementById("projectWKID");
      wkidSelect.addEventListener("calciteSelectChange", () => {
        viewElement.spatialReference = new SpatialReference({
          wkid: Number(wkidSelect.selectedOption?.value ?? initialWKID),
        });
      });

When the user chooses a land cover type, we update the layer’s renderer to display the selected land cover type as shown below. The land cover types are displayed in a Calcite Radio Button Group component on the right side of the application.

      // Create a renderer for the selected land cover type.
      function changeLandCoverType(landType) {
        const uvr = new UniqueValueRenderer({
          field: "NLCD_Land",
          uniqueValueInfos: [],
        });
        landType.categories.forEach((value, i) => {
          const uniqueValue = new UniqueValueInfo({
            value,
            symbol: new SimpleFillSymbol({
              color: landType.color[i],
            }),
          });
          uvr.uniqueValueInfos.push(uniqueValue);
        });
        return uvr;
      }