MapImageLayer - raster data source | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

This sample demonstrates how to create a sublayer in a MapImageLayer from a raster located in a registered workspace.

      // Create a MapImageLayer instance with two sublayers. Both are
      // rasters. The first comes from a registered database and the second
      // is a map service layer.
      const layer = new MapImageLayer({
        url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Elevation/GlacierBay/MapServer",
        minScale: 2000000,
        sublayers: [
          {
            id: 1,
            title: "hillshade",
            source: {
              // Indicates the source of the sublayer is a dynamic data layer.
              type: "data-layer",
              // This object defines the data source of the layer.
              // In this case it's a raster located in a registered workspace.
              dataSource: {
                type: "raster",
                workspaceId: "GlacierBayID",
                dataSourceName: "gb_hillshade",
              },
            },
          },
          {
            id: 0,
            title: "dem",
          },
        ],
      });

This app contains two raster sublayers in Glacier Bay National Park, Alaska. One is a hillshade and the other is a digital elevation model (DEM) created by the USGS in May 2016. The DEM has a resolution of five meters and was was used to create the hillshade. Move the slider to observe the satellite imagery below the hillshade. Comparing the image against the detailed hillshade allows you to observe how some glaciers in the area may have receded since the satellite image was taken.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>MapImageLayer - raster data source | Sample | ArcGIS Maps SDK for JavaScript</title>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

    <style>
      .padding-1 {
        padding: 1rem;
      }
    </style>
  </head>

  <body>
    <calcite-shell>
      <arcgis-map center="-136.85, 58.49" zoom="13">
        <arcgis-zoom slot="top-left"></arcgis-zoom>
      </arcgis-map>
      <calcite-panel slot="footer">
        <calcite-label class="padding-1" alignment="center">
          Digital Elevation Model (DEM) opacity
          <calcite-slider
            id="opacity-slider"
            min="0"
            value="1"
            max="1"
            step=".05"
            label-handles
            ticks=".1"></calcite-slider>
        </calcite-label>
      </calcite-panel>
    </calcite-shell>
    <script type="module">
      // Import the required modules from the Maps SDK.
      const [Map, MapImageLayer] = await $arcgis.import([
        "@arcgis/core/Map.js",
        "@arcgis/core/layers/MapImageLayer.js",
      ]);

      // Create a MapImageLayer instance with two sublayers. Both are
      // rasters. The first comes from a registered database and the second
      // is a map service layer.
      const layer = new MapImageLayer({
        url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Elevation/GlacierBay/MapServer",
        minScale: 2000000,
        sublayers: [
          {
            id: 1,
            title: "hillshade",
            source: {
              // Indicates the source of the sublayer is a dynamic data layer.
              type: "data-layer",
              // This object defines the data source of the layer.
              // In this case it's a raster located in a registered workspace.
              dataSource: {
                type: "raster",
                workspaceId: "GlacierBayID",
                dataSourceName: "gb_hillshade",
              },
            },
          },
          {
            id: 0,
            title: "dem",
          },
        ],
      });

      // Create the Map and add the MapImageLayer to it.
      const map = new Map({
        basemap: "hybrid",
        layers: [layer],
      });
      document.querySelector("arcgis-map").map = map;

      // Get the opacity slider element.
      const opacitySlider = document.querySelector("#opacity-slider");

      // Update the opacity of the DEM sublayer based on the slider value.
      opacitySlider.addEventListener("calciteSliderChange", () => {
        layer.opacity = Number(opacitySlider.value);
      });
    </script>
  </body>
</html>