Looping through all FeatureLayers in map using ArcGIS API for JavaScript

Question

I have featurelayers and I need to loop through all my featurelayers (in my map), to apply the Editor widget "esri/widgets/Editor", to the layers in my map (uploaded from ArcGIS Server online), because I need to add (edit, delete, update capibilities to my featurelayers in the same document).

Could you guide me?

Here is my code, I have this error message, when I run it

"Uncaught (in promise) TypeError: view.map.loadAll is not a function at code.html: 410 "

I understand now that this method is for a WebMap), but how to do with my featurelayers (I only have featurelayers). Here is all the code '''

                let mypopup = {
                title: "{Loc_Eng}",
                content: [{
                    type: "fields",
                    fieldInfos: [{
                        fieldName: "Total_Pop",
                        label: "Population"
                    }, {
                        fieldName: "Total_M",
                        label: "Male"
                    }, {
                        fieldName: "Total_Fe",
                        label: "Female"
                    }]
                }]
            };



            //Localities
            let featureLayer1 = new FeatureLayer({
                url: "https://services6.arcgis.com/nEMEkLg8rZV7Ijyb/ArcGIS/rest/services/SudanMap/FeatureServer/2",
                popupTemplate: mypopup,

            });

            //Rivers
            let featureLayer2 = new FeatureLayer({
                url: "https://services6.arcgis.com/nEMEkLg8rZV7Ijyb/ArcGIS/rest/services/SudanMap/FeatureServer/0",
                minScale: 100000000

            });


            let map1 = new Map({
                basemap: "satellite",
                ground: "world-elevation",
                
            });
            map1.add(featureLayer1)
            map1.add(featureLayer2)

            let view1 = new MapView({
                map: map1,
                container: "viewDiv",
                center: [29.4917691, 14.5844444],
                zoom: 4
            });

            view1.when(() => {
                view1.map.loadAll().then(() => {
                    view1.map.forEach((layer) => {
                    if (layer.type === "feature") {
                        switch (layer.geometryType) {
                            case "polygon":
                                polygonLayer = layer;
                                break;
                            case "polyline":
                                lineLayer = layer;
                                break; 
                            case "point":
                                pointLayer = layer;
                                break;
                        }
                    }
                });

                // Create layerInfos for layers in Editor. This
                // sets the fields for editing.

                const pointInfos = {
                    layer: pointLayer,
                    fieldConfig: [{
                        name: "LOCALITY",
                        label: "Locality"
                    }, {
                        name: "SETTLEMENT",
                        label: "SETTLEMENT"
                    }]
                };

                const polyInfos = {
                    layer: polygonLayer,
                    fieldConfig: [{
                        name: "DATE_ ",
                        label: "DATE"
                    }, {
                        name: "NAME",
                        label: "NAME"
                    }]
                };

                const editor = new Editor({
                    view: view,
                    
                    layerInfos: [{
                        layer: pointLayer,
                        fieldConfig: [pointInfos]
                    }, {
                        layer: lineLayer,
                        fieldConfig: [lineInfos]
                    }, {
                        layer: polygonLayer,
                        fieldConfig: [polyInfos]
                    }],
                    // Set the snapping options for the Editor. By default, snapping is enabled. This can be toggled on/off using the CTRL key.
                    snappingOptions: {
                        enabled: true,
                        selfEnabled: true,
                        featureEnabled: true,
                        featureSources: [{
                            layer: pointLayer
                        }, {
                            layer: lineLayer
                        }, {
                            layer: polygonLayer
                        }]
                    }
                });
                // Add widget to top-right of the view
                view1.ui.add(editor, "top-right");
            });
        });
     });

</script>

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

<span id="help-window"></span>
<style>
    #help-window {
        font-size: 20px;
        font-weight: bold;
        font-family: sans-serif;
        color: white
    }
</style>

'''

How to do it ? (the comment doesn't accept my code) because of the limited number of chars — Abir ELTAIEF
– Abir ELTAIEF, Commented Jul 14, 2021 at 13:22
I can't because it is about another thing that I added when I received an answer on my previous post, so I should continue after the answer (not in the same post) — Abir ELTAIEF
– Abir ELTAIEF, Commented Jul 14, 2021 at 13:27

kenbuja · Accepted Answer · 2021-07-14 15:30:34Z

Take a look at Editor widget with configurations sample

In it, the code uses this line to cycle through all the layers:

 view.map.layers.forEach((layer) => {

Update:

Here is a sample that cycles through your layers in a map.

<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport"
        content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>
    Intro to FeatureLayer | Sample | ArcGIS API for JavaScript 4.20
  </title>

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

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

  <script>
    require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer"], (
      Map,
      MapView,
      FeatureLayer
    ) => {
      const map = new Map({
        basemap: "hybrid"
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,

        extent: {
          // autocasts as new Extent()
          xmin: 17.0884,
          ymin: 13.0153,
          xmax: 43.3005,
          ymax: 23.8466,
          spatialReference: 4326
        }
      });

      /********************
       * Add feature layers
       ********************/

      const fl1 = new FeatureLayer({
        url:
          "https://services6.arcgis.com/nEMEkLg8rZV7Ijyb/ArcGIS/rest/services/SudanMap/FeatureServer/0"
      });
      const fl2 = new FeatureLayer({
        url:
          "https://services6.arcgis.com/nEMEkLg8rZV7Ijyb/ArcGIS/rest/services/SudanMap/FeatureServer/1"
      });
      const fl3 = new FeatureLayer({
        url:
          "https://services6.arcgis.com/nEMEkLg8rZV7Ijyb/ArcGIS/rest/services/SudanMap/FeatureServer/2"
      });

      map.addMany([fl1, fl2, fl3]);

      view.when(() => {
        console.log("Loaded");
        view.map.layers.forEach((layer) => {
          if (layer.type == 'feature') {
            switch (layer.geometryType) {
              case "polygon":
                console.log(layer.title + ": Polygon");
                break;
              case "polyline":
                console.log(layer.title + ": Line");
                break;
              case "point":
                console.log(layer.title + ": Point");
                break;
              default:
                console.log("Other");
            }
          }
        });
      });

    });
  </script>
</head>

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

it doesn't work, it gives me this message error: Uncaught TypeError: r.load is not a 4.20:1879 function at w.B._createLayerView (4.20:1879) at E.A.z._doWork [as callback] (4.20:1875) at u (4.20:168) at 4.20:172 — Abir ELTAIEF
– Abir ELTAIEF, Commented Jul 14, 2021 at 14:53
and for the example Editor widget with configurations, I already seen it but it is also for WebMap (not for seperated featureLayers on a Map) — Abir ELTAIEF
– Abir ELTAIEF, Commented Jul 14, 2021 at 14:54
thank you, I will try it and get back to you (Big thank you) — Abir ELTAIEF
– Abir ELTAIEF, Commented Jul 14, 2021 at 15:38
I find the issue (with help), we don't need to loop trough the layers. The Editor-Widget itself checks the editable layers and add them to the widget — Abir ELTAIEF
– Abir ELTAIEF, Commented Jul 15, 2021 at 9:03

Stack Exchange Network

Looping through all FeatureLayers in map using ArcGIS API for JavaScript

1 Answer 1

Your Answer

Linked

Hot Network Questions

Looping through all FeatureLayers in map using ArcGIS API for JavaScript

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Hot Network Questions