Intro to WCSLayer | Sample | ArcGIS Maps SDK for JavaScript

This sample shows how to add an instance of WCSLayer to a map. The WCSLayer contains data from LANDFIRE about fires in the contiguous United States (CONUS).

The RasterStretchRenderer is applied to the layer to change the data visualization.

      // Create raster-stretch renderer using three standard deviations and multipart color ramps.
      const renderer = {
        type: "raster-stretch",
        stretchType: "standard-deviation",
        customStatistics: [{ min: -3, max: 37, avg: 1, stddev: 1 }],
        numberOfStandardDeviations: 3,
        colorRamp: {
          type: "multipart",
          colorRamps: [
            { fromColor: [0, 0, 255], toColor: [0, 255, 255] },
            { fromColor: [0, 255, 255], toColor: [255, 255, 0] },
            { fromColor: [255, 255, 0], toColor: [255, 0, 0] },
          ],
        },
      };

<!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>Intro to WCSLayer | Sample | ArcGIS Maps SDK for JavaScript</title>  <script type="module" src="https://js.arcgis.com/5.0/"></script> <style> html, body { height: 100%; margin: 0; } </style> </head> <body> <arcgis-map center="-120, 10" zoom="1"> <calcite-loader label="Awaiting the layer to load" type="determinate-value"></calcite-loader> <arcgis-zoom slot="top-left"></arcgis-zoom> <arcgis-expand expand-tooltip="Legend" slot="bottom-left"> <arcgis-legend></arcgis-legend> </arcgis-expand> </arcgis-map> <script type="module"> const [Extent, Map, WCSLayer] = await $arcgis.import([ "@arcgis/core/geometry/Extent.js", "@arcgis/core/Map.js", "@arcgis/core/layers/WCSLayer.js", ]); const viewElement = document.querySelector("arcgis-map"); const loader = document.querySelector("calcite-loader"); // Create, apply, and constrain the map extent. const initialExtent = new Extent({ xmin: -16602555, ymin: 868940, xmax: -5057506, ymax: 8285167, spatialReference: { wkid: 3857 }, }); viewElement.extent = initialExtent; viewElement.constraints = { geometry: initialExtent, minScale: 50000000 }; // Create raster-stretch renderer using three standard deviations and multipart color ramps. const renderer = { type: "raster-stretch", stretchType: "standard-deviation", customStatistics: [{ min: -3, max: 37, avg: 1, stddev: 1 }], numberOfStandardDeviations: 3, colorRamp: { type: "multipart", colorRamps: [ { fromColor: [0, 0, 255], toColor: [0, 255, 255] }, { fromColor: [0, 255, 255], toColor: [255, 255, 0] }, { fromColor: [255, 255, 0], toColor: [255, 0, 0] }, ], }, }; // Create the WCS layer with a renderer and custom parameters. const layer = new WCSLayer({ url: "https://edcintl.cr.usgs.gov/geoserver/landfire_wcs/conus_2024/wcs", title: "Fires in the Contiguous United States", opacity: 0.5, renderer: renderer, // Define the coordinate reference system for subsetting requests and returned imagery. customParameters: { SUBSETTINGCRS: "http://www.opengis.net/def/crs/EPSG/0/3857", OUTPUTCRS: "http://www.opengis.net/def/crs/EPSG/0/3857", }, }); // Create the map and add the WCS layer to it. const map = new Map({ basemap: "gray-vector", layers: [layer] }); viewElement.map = map; // Update the loader value periodically until the LayerView is ready. const intervalID = setInterval( () => (loader.value < 100 ? (loader.value += 10) : clearInterval(intervalID)), 900, ); await viewElement.whenLayerView(layer); loader.value = 100; // Mark the loader as complete when the layer has loaded. </script> </body> </html>