Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1,user-scalable=no"
    />
    <!--
     ArcGIS API for JavaScript, https://js.arcgis.com
     For more information about the widgets-featuretable-map sample,
     read the original sample description at developers.arcgis.com.
     https://developers.arcgis.com/javascript/latest/sample-code/widgets-featuretable-map/index.html
     -->
    <title>
      FeatureTable widget with a map | Sample | ArcGIS API for JavaScript 4.19
    </title>

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

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

      #viewDiv {
        height: 50%;
        width: 100%;
      }

      #zoom {
        margin-bottom: 5px;
      }

      #actions {
        padding: 5px;
      }

      .container {
        height: 50%;
        width: 100%;
      }
    </style>
    <script>
      require([
        "esri/WebMap",
        "esri/views/MapView",
        "esri/core/watchUtils",
        "esri/layers/FeatureLayer",
        "esri/widgets/FeatureTable"
      ], function (WebMap, MapView, watchUtils, FeatureLayer, FeatureTable) {
        const features = [];
        const webmap = new WebMap({
          portalItem: {
            id: "3c245fe893234d4f85e4edaa41a9e0bf"
          }
        });

        let view = new MapView({
          container: "viewDiv",
          map: webmap,
          center: [-72.92, 43.28],
          zoom: 10,
          popup: {
            autoOpenEnabled: false
          } //disable popups
        });

        view.when(() => {
          const featureLayer = webmap.layers.getItemAt(0); //grabs the first layer in the map
          featureLayer.title = "USFS Recreational areas";

          // Create the feature table
          const featureTable = new FeatureTable({
            view: view, // required for feature highlight to work
            layer: featureLayer,
            // Autocast the FieldColumnConfigs
            fieldConfigs: [
              {
                name: "RECAREANAM",
                label: "Recreation area name",
                direction: "asc"
              },
              {
                name: "FORESTNAME",
                label: "Forest name"
              },
              {
                name: "OPENSTATUS",
                label: "Open status"
              },
              {
                name: "OPEN_SEASO",
                label: "Season begins"
              },
              {
                name: "RECAREADES",
                label: "Recreation description"
              },
              {
                name: "RESTRICTIO",
                label: "Restrictions"
              }
            ],
            container: document.getElementById("tableDiv")
          });

          // Add buttons to the mapView
          view.ui.add(document.getElementById("actions"), "top-right");

          // Listen for when the view is updated. If so, pass the new view.extent into the table's filterGeometry
          featureLayer.watch("loaded", () => {
            watchUtils.whenFalse(view, "updating", () => {
              // Get the new extent of view/map whenever map is updated.
              if (view.extent) {
                // Filter out and show only the visible features in the feature table
                featureTable.filterGeometry = view.extent;
              }
            });
          });

          // Listen for the table's selection-change event
          featureTable.on("selection-change", (changes) => {

            // If the selection is removed, remove the feature from the array
            changes.removed.forEach((item) => {
              const data = features.find((data) => {
                return data.feature === item.feature;
              });
              if (data) {
                features.splice(features.indexOf(data), 1);
              }
            });

            // If the selection is added, push all added selections to array
            changes.added.forEach((item) => {
              const feature = item.feature;
              features.push({
                feature: feature
              });
            });
          });

          // Listen for the click on the view and select any associated row in the table
          view.on("immediate-click", (event) => {
            view.hitTest(event).then((response) => {
              const candidate = response.results.find((result) => {
                return (
                  result.graphic &&
                  result.graphic.layer &&
                  result.graphic.layer === featureLayer
                );
              });
              // Select the rows of the clicked feature
              featureTable.clearSelection();
              candidate && featureTable.selectRows(candidate.graphic);
            });
          });

          const zoomBtn = document.getElementById("zoom");
          const fullExtentBtn = document.getElementById("fullextent");

          // Wire up button click event listeners
          zoomBtn.addEventListener("click", zoomToSelectedFeature);
          fullExtentBtn.addEventListener("click", fullExtent);

          // fires when "Zoom to selected feature(s)" button is clicked
          function zoomToSelectedFeature() {
            // Create a query off of the feature layer
            const query = featureLayer.createQuery();
            // Iterate through the features and grab the feature's objectID
            const featureIds = features.map((result) => {
              return result.feature.getAttribute(featureLayer.objectIdField);
            });
            // Set the query's objectId
            query.objectIds = featureIds;
            // Make sure to return the geometry to zoom to
            query.returnGeometry = true;
            // Call queryFeatures on the feature layer and zoom to the resulting features
            featureLayer.queryFeatures(query).then((results) => {
              view.goTo(results.features).catch((error) => {
                if (error.name != "AbortError") {
                  console.error(error);
                }
              });
            });
          }
          // Fires when "Full extent" button is clicked
          function fullExtent() {
            // Zooms to the full extent of the feature layer
            view.goTo(featureLayer.fullExtent).catch((error) => {
              if (error.name != "AbortError") {
                console.error(error);
              }
            });
          }
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div class="container">
      <div id="tableDiv"></div>
    </div>
    <div id="actions" class="esri-widget">
      <button class="esri-button" id="zoom">Zoom to selected feature(s)</button>
      <button class="esri-button" id="fullextent">Full extent</button>
    </div>
  </body>
</html>

              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console