How to put WMS-Layers in the LayerList (ArcGIS Maps SDK for JavaScript)

KaiBehncke · ‎10-19-2023

Dear Users, I try to go along with the object "LayerList".

I want to implement 3 WMS-Layers.
All of them work fine.

const layer1 = new WMSLayer({
url: "https://gis.kreis-steinfurt.de/arcgis13/services/Geobasisdaten/Geobasisdaten_Kreissuebersichtskarte_...",
sublayers: [
{
name: "0"
}
], title: "DTK Kreis Steinfurt",
visible:true
});

const layer2 = new WMSLayer({
url: "https://gis.kreis-steinfurt.de/arcgis14/services/Umwelt/Umwelt_Gewaesser/MapServer/WMSServer",
sublayers: [
{
name: "0"
}
], title: "Gewaesser Kreis Steinfurt",
visible:true
});

const layer3 = new WMSLayer({
url: "http://xxxxxxxxxxxxxxxxxxx.intern/cgi-bin/mapserv?map=KLIMA",
sublayers: [
{
name: "Klima"
}
], title: "Klima",
visible:true
});

But when I try:
const map = new Map({
basemap: {
baseLayers: [layer3],
layers: [layer1,layer2]
}
});

I can see only the baselayer in the map?
What do I have to do, that the other layers are shown above the baselayer?

And how can I use the LayerList (I mean: Which code do I need)
to set the layers on and off?

Thank you very much, Kai

KaiBehncke · ‎10-24-2023

Thank you very much, meanwhile I found a solution:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />

    <title>LayerList widget with actions | Sample | ArcGIS Maps SDK for JavaScript 4.27</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.27/"></script>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/GroupLayer",
        "esri/layers/MapImageLayer",
        "esri/widgets/LayerList",
        "esri/widgets/Slider",
		"esri/layers/WMSLayer"
      ], (Map, MapView, GroupLayer, MapImageLayer, LayerList, Slider,WMSLayer) => {


		
		
		  const DTK_Kreis = new WMSLayer({
          url: "https://...../MapServer/WMSServer",
          sublayers: [
            {
              name: "0"
            }
          ], title: "WMS_Kreis_DTK"
        });
		
		
		


		
		
				  const gewaesserLayer = new WMSLayer({
          url: ",,,,,,,,,,,,,,,,,,,,,,,,,",
          sublayers: [
            {
              name: "0"
            }
          ], title: "Gewaesser",
		    visible:false
        });

        // Create GroupLayer with the two MapImageLayers created above
        // as children layers.

        const demographicGroupLayer = new GroupLayer({
          title: "Testdaten",
          visible: true,
          visibilityMode: "exclusive",
          layers: [DTK_Kreis, gewaesserLayer],
          opacity: 0.75
        });

        // Create a map and add the group layer to it

        const map = new Map({
          basemap: "gray-vector",
          layers: [demographicGroupLayer]
        });

        // Add the map to a MapView

        const view = new MapView({
          center: [7.718995,52.27677],
          zoom: 12,
          container: "viewDiv",
          map: map
        });

        // Creates actions in the LayerList.

        async function defineActions(event) {
          // The event object contains an item property.
          // is is a ListItem referencing the associated layer
          // and other properties. You can control the visibility of the
          // item, its title, and actions using this object.

          const item = event.item;

          await item.layer.when();

          if (item.title === "Testdaten") {
            // An array of objects defining actions to place in the LayerList.
            // By making this array two-dimensional, you can separate similar
            // actions into separate groups with a breaking line.

            item.actionsSections = [
              [
                {
                  title: "Go to full extent",
                  className: "esri-icon-zoom-out-fixed",
                  id: "full-extent"
                },
                {
                  title: "Layer information",
                  className: "esri-icon-description",
                  id: "information"
                }
              ],
              [
                {
                  title: "Increase opacity",
                  className: "esri-icon-up",
                  id: "increase-opacity"
                },
                {
                  title: "Decrease opacity",
                  className: "esri-icon-down",
                  id: "decrease-opacity"
                }
              ]
            ];
          }

          // Adds a slider for updating a group layer's opacity
          if(item.children.length > 1 && item.parent){
            const slider = new Slider({
              min: 0,
              max: 1,
              precision: 2,
              values: [ 1 ],
              visibleElements: {
                labels: true,
                rangeLabels: true
              }
            });

            item.panel = {
              content: slider,
              className: "esri-icon-sliders-horizontal",
              title: "Change layer opacity"
            }

            slider.on("thumb-drag", (event) => {
              const { value } = event;
              item.layer.opacity = value;
            })
          }
        }

        view.when(() => {
          // Create the LayerList widget with the associated actions
          // and add it to the top-right corner of the view.

          const layerList = new LayerList({
            view: view,
            // executes for each ListItem in the LayerList
            listItemCreatedFunction: defineActions
          });

          // Event listener that fires each time an action is triggered

          layerList.on("trigger-action", (event) => {
            // The layer visible in the view at the time of the trigger.
            const visibleLayer = DTK_Kreis.visible ? DTK_Kreis : gewaesserLayer;

            // Capture the action id.
            const id = event.action.id;

            if (id === "full-extent") {
              // if the full-extent action is triggered then navigate
              // to the full extent of the visible layer
              view.goTo(visibleLayer.fullExtent)
              .catch((error) => {
                if (error.name != "AbortError"){
                  console.error(error);
                }
              });
            } else if (id === "information") {
              // if the information action is triggered, then
              // open the item details page of the service layer
              window.open(visibleLayer.url);
            } else if (id === "increase-opacity") {
              // if the increase-opacity action is triggered, then
              // increase the opacity of the GroupLayer by 0.25

              if (demographicGroupLayer.opacity < 1) {
                demographicGroupLayer.opacity += 0.25;
              }
            } else if (id === "decrease-opacity") {
              // if the decrease-opacity action is triggered, then
              // decrease the opacity of the GroupLayer by 0.25

              if (demographicGroupLayer.opacity > 0) {
                demographicGroupLayer.opacity -= 0.25;
              }
            }
          });

          // Add widget to the top right corner of the view
          view.ui.add(layerList, "top-right");
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

View solution in original post

BrandonPrice1 · ‎10-20-2023

The curly brace should be after baselayers followed by a comma I think instead of after layers.

const map = new Map({
    basemap: {
        baseLayers: [layer3]
    },
    layers: [layer1,layer2]
});

Here is a sample to use for the layerlist: https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-layerlist

KaiBehncke · ‎10-24-2023

Thank you very much, meanwhile I found a solution:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />

    <title>LayerList widget with actions | Sample | ArcGIS Maps SDK for JavaScript 4.27</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.27/"></script>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/GroupLayer",
        "esri/layers/MapImageLayer",
        "esri/widgets/LayerList",
        "esri/widgets/Slider",
		"esri/layers/WMSLayer"
      ], (Map, MapView, GroupLayer, MapImageLayer, LayerList, Slider,WMSLayer) => {


		
		
		  const DTK_Kreis = new WMSLayer({
          url: "https://...../MapServer/WMSServer",
          sublayers: [
            {
              name: "0"
            }
          ], title: "WMS_Kreis_DTK"
        });
		
		
		


		
		
				  const gewaesserLayer = new WMSLayer({
          url: ",,,,,,,,,,,,,,,,,,,,,,,,,",
          sublayers: [
            {
              name: "0"
            }
          ], title: "Gewaesser",
		    visible:false
        });

        // Create GroupLayer with the two MapImageLayers created above
        // as children layers.

        const demographicGroupLayer = new GroupLayer({
          title: "Testdaten",
          visible: true,
          visibilityMode: "exclusive",
          layers: [DTK_Kreis, gewaesserLayer],
          opacity: 0.75
        });

        // Create a map and add the group layer to it

        const map = new Map({
          basemap: "gray-vector",
          layers: [demographicGroupLayer]
        });

        // Add the map to a MapView

        const view = new MapView({
          center: [7.718995,52.27677],
          zoom: 12,
          container: "viewDiv",
          map: map
        });

        // Creates actions in the LayerList.

        async function defineActions(event) {
          // The event object contains an item property.
          // is is a ListItem referencing the associated layer
          // and other properties. You can control the visibility of the
          // item, its title, and actions using this object.

          const item = event.item;

          await item.layer.when();

          if (item.title === "Testdaten") {
            // An array of objects defining actions to place in the LayerList.
            // By making this array two-dimensional, you can separate similar
            // actions into separate groups with a breaking line.

            item.actionsSections = [
              [
                {
                  title: "Go to full extent",
                  className: "esri-icon-zoom-out-fixed",
                  id: "full-extent"
                },
                {
                  title: "Layer information",
                  className: "esri-icon-description",
                  id: "information"
                }
              ],
              [
                {
                  title: "Increase opacity",
                  className: "esri-icon-up",
                  id: "increase-opacity"
                },
                {
                  title: "Decrease opacity",
                  className: "esri-icon-down",
                  id: "decrease-opacity"
                }
              ]
            ];
          }

          // Adds a slider for updating a group layer's opacity
          if(item.children.length > 1 && item.parent){
            const slider = new Slider({
              min: 0,
              max: 1,
              precision: 2,
              values: [ 1 ],
              visibleElements: {
                labels: true,
                rangeLabels: true
              }
            });

            item.panel = {
              content: slider,
              className: "esri-icon-sliders-horizontal",
              title: "Change layer opacity"
            }

            slider.on("thumb-drag", (event) => {
              const { value } = event;
              item.layer.opacity = value;
            })
          }
        }

        view.when(() => {
          // Create the LayerList widget with the associated actions
          // and add it to the top-right corner of the view.

          const layerList = new LayerList({
            view: view,
            // executes for each ListItem in the LayerList
            listItemCreatedFunction: defineActions
          });

          // Event listener that fires each time an action is triggered

          layerList.on("trigger-action", (event) => {
            // The layer visible in the view at the time of the trigger.
            const visibleLayer = DTK_Kreis.visible ? DTK_Kreis : gewaesserLayer;

            // Capture the action id.
            const id = event.action.id;

            if (id === "full-extent") {
              // if the full-extent action is triggered then navigate
              // to the full extent of the visible layer
              view.goTo(visibleLayer.fullExtent)
              .catch((error) => {
                if (error.name != "AbortError"){
                  console.error(error);
                }
              });
            } else if (id === "information") {
              // if the information action is triggered, then
              // open the item details page of the service layer
              window.open(visibleLayer.url);
            } else if (id === "increase-opacity") {
              // if the increase-opacity action is triggered, then
              // increase the opacity of the GroupLayer by 0.25

              if (demographicGroupLayer.opacity < 1) {
                demographicGroupLayer.opacity += 0.25;
              }
            } else if (id === "decrease-opacity") {
              // if the decrease-opacity action is triggered, then
              // decrease the opacity of the GroupLayer by 0.25

              if (demographicGroupLayer.opacity > 0) {
                demographicGroupLayer.opacity -= 0.25;
              }
            }
          });

          // Add widget to the top right corner of the view
          view.ui.add(layerList, "top-right");
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>