Filter widget not showing up and edit widget not working

SusanSeymour · ‎08-01-2019

I am trying to add a filter widget using API for JavaScript 4.12. I am new to this and I may be missing a step, but the filter icon does not show up at all. The list of choices for the filter shows up but I can’t click on any of them. Also, I can’t get the edit widget to work either. It doesn’t show up at all. I’d appreciate any help or advice. I’ve attached my code since it is rather long to add to the thread. Thanks.

RobertScheitlin__GISP · ‎08-01-2019

Susan,

The editor widget will not show if there are no editable layers in the map. You need to change your

racesDynamicLayer from ...MapServer to ...FeatureServer in the url.

Here is your code with some things fixed (i.e. expand), but you still have a way to go on this:

<html>

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

  <title>Runners Search App</title>

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

    .esri-editor .esri-item-list__scroller {
      max-height: 350px;
    }
  </style>

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

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/WMSLayer",
      "esri/widgets/Locate",
      'esri/widgets/Search',
      "esri/widgets/BasemapToggle",
      "esri/widgets/Editor",
      "esri/layers/FeatureLayer",
      "esri/widgets/LayerList",
      "esri/widgets/Expand"

    ], function (Map, MapView, WMSLayer, Locate, Search, BasemapToggle, Editor, FeatureLayer, LayerList, Expand) {
      let RunnersRaceFinderAppView;

      var map = new Map({
        basemap: "streets"
      });

      var radar = new WMSLayer({
        url: "https://nowcoast.noaa.gov/arcgis/services/nowcoast/radar_meteo_imagery_nexrad_time/MapServer/WMSServer?request=GetCapabilities&service=WMS",

      });

      map.add(radar)

      // Add feature layer
      var racesDynamicLayer = new FeatureLayer({
        url: "https://gis-server-02.usc.edu:6443/arcgis/rest/services/smseymou/RunnersRaceFinderApp/FeatureServer"

      });

      map.add(racesDynamicLayer)


      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 6,
        center: [-98.803057, 37.467330]

      });

      var locateBtn = new Locate({
        view: view
      });
      view.ui.add(locateBtn, {
        position: "top-left"
      });

      var layerList = new LayerList({
        view: view
      });

      var searchWidget = new Search({
        view: view
      });
      view.ui.add(searchWidget, {
        position: "top-right"
      });

      var basemapToggle = new BasemapToggle({
        view: view,
        nextBasemap: "satellite"

      });

      view.ui.add(basemapToggle, "bottom-right");

      // Adds widget below other elements in the top left corner of the view
      view.ui.add(layerList, {
        position: "top-right"
      });

      view.when(function () {
        view.popup.autoOpenEnabled = false; //disable popups

        // Create the Editor
        let editor = new Editor({
          view: view
        });

        // Add widget to top-right of the view
        view.ui.add(editor, "top-right");
      });


      const Race_TypeNodes = document.querySelectorAll(`.Race_Type-item`);
      const Race_TypeElement = document.getElementById("seasons-filter");

      // click event handler for Race_Type choices
      Race_TypeElement.addEventListener("click", filterByRace_Type);

      // User clicked on Winter, Spring, Summer or Fall
      // set an attribute filter on flood warnings layer view
      // to display the warnings issued in that Race_Type
      function filterByRace_Type(event) {
        const selectedRace_Type = event.target.getAttribute("data-Race_Type");
        RunnersRaceFinderAppView.filter = {
          where: "Race_Type = '" + selectedRace_Type + "'"
        };
      }

      view.whenLayerView(racesDynamicLayer).then(function (layerView) {
        // flash flood warnings layer loaded
        // get a reference to the flood warnings layerview
        Race_TypeView = layerView;

        // set up UI items
        Race_TypeElement.style.visibility = "visible";
        const Race_TypeExpand = new Expand({
          view: view,
          content: Race_TypeElement,
          expandIconClass: "esri-icon-filter",
          group: "top-left"
        });
        //clear the filters when user closes the expand widget
        Race_TypeExpand.watch("expanded", function () {
          if (!Race_TypeExpand.expanded) {
            Race_TypeView.filter = null;
          }
        });

        view.ui.add(Race_TypeExpand, "top-left");

      });


    });
  </script>
</head>

<body>
  <div id="viewDiv">
  </div>
  <div id="editorDiv"></div>
  <div class="responsive">
    <div class="gallery">
      <a target="_blank" href="http://www.google.com">
        <img src="Screenshots/Survey123.png" alt="Survey123" width="200" height="200">
      </a>
      <div class="desc">Click here to add a race</div>
    </div>
  </div>
  <div class="clearfix"></div>
  <div style="padding:6px;"></div>
  <div id="seasons-filter" class="esri-widget">
    <div class="season-item visible-season" data-season="5K">5K</div>
    <div class="season-item visible-season" data-season="10K">10K</div>
    <div class="season-item visible-season" data-season="Half Marathon">Half Marathon</div>
    <div class="season-item visible-season" data-season="Marathon">Marthon</div>
    <div class="season-item visible-season" data-season="Ultra Marathon">Ultra Marthon</div>
    <div class="season-item visible-season" data-season="Triathlon">Triathlon</div>
    <div class="season-item visible-season" data-season="Cross Country">Cross Country</div>
    <div class="season-item visible-season" data-season="Stage">Stage</div>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎08-01-2019

Susan,

The editor widget will not show if there are no editable layers in the map. You need to change your

racesDynamicLayer from ...MapServer to ...FeatureServer in the url.

Here is your code with some things fixed (i.e. expand), but you still have a way to go on this:

<html>

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

  <title>Runners Search App</title>

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

    .esri-editor .esri-item-list__scroller {
      max-height: 350px;
    }
  </style>

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

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/WMSLayer",
      "esri/widgets/Locate",
      'esri/widgets/Search',
      "esri/widgets/BasemapToggle",
      "esri/widgets/Editor",
      "esri/layers/FeatureLayer",
      "esri/widgets/LayerList",
      "esri/widgets/Expand"

    ], function (Map, MapView, WMSLayer, Locate, Search, BasemapToggle, Editor, FeatureLayer, LayerList, Expand) {
      let RunnersRaceFinderAppView;

      var map = new Map({
        basemap: "streets"
      });

      var radar = new WMSLayer({
        url: "https://nowcoast.noaa.gov/arcgis/services/nowcoast/radar_meteo_imagery_nexrad_time/MapServer/WMSServer?request=GetCapabilities&service=WMS",

      });

      map.add(radar)

      // Add feature layer
      var racesDynamicLayer = new FeatureLayer({
        url: "https://gis-server-02.usc.edu:6443/arcgis/rest/services/smseymou/RunnersRaceFinderApp/FeatureServer"

      });

      map.add(racesDynamicLayer)


      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 6,
        center: [-98.803057, 37.467330]

      });

      var locateBtn = new Locate({
        view: view
      });
      view.ui.add(locateBtn, {
        position: "top-left"
      });

      var layerList = new LayerList({
        view: view
      });

      var searchWidget = new Search({
        view: view
      });
      view.ui.add(searchWidget, {
        position: "top-right"
      });

      var basemapToggle = new BasemapToggle({
        view: view,
        nextBasemap: "satellite"

      });

      view.ui.add(basemapToggle, "bottom-right");

      // Adds widget below other elements in the top left corner of the view
      view.ui.add(layerList, {
        position: "top-right"
      });

      view.when(function () {
        view.popup.autoOpenEnabled = false; //disable popups

        // Create the Editor
        let editor = new Editor({
          view: view
        });

        // Add widget to top-right of the view
        view.ui.add(editor, "top-right");
      });


      const Race_TypeNodes = document.querySelectorAll(`.Race_Type-item`);
      const Race_TypeElement = document.getElementById("seasons-filter");

      // click event handler for Race_Type choices
      Race_TypeElement.addEventListener("click", filterByRace_Type);

      // User clicked on Winter, Spring, Summer or Fall
      // set an attribute filter on flood warnings layer view
      // to display the warnings issued in that Race_Type
      function filterByRace_Type(event) {
        const selectedRace_Type = event.target.getAttribute("data-Race_Type");
        RunnersRaceFinderAppView.filter = {
          where: "Race_Type = '" + selectedRace_Type + "'"
        };
      }

      view.whenLayerView(racesDynamicLayer).then(function (layerView) {
        // flash flood warnings layer loaded
        // get a reference to the flood warnings layerview
        Race_TypeView = layerView;

        // set up UI items
        Race_TypeElement.style.visibility = "visible";
        const Race_TypeExpand = new Expand({
          view: view,
          content: Race_TypeElement,
          expandIconClass: "esri-icon-filter",
          group: "top-left"
        });
        //clear the filters when user closes the expand widget
        Race_TypeExpand.watch("expanded", function () {
          if (!Race_TypeExpand.expanded) {
            Race_TypeView.filter = null;
          }
        });

        view.ui.add(Race_TypeExpand, "top-left");

      });


    });
  </script>
</head>

<body>
  <div id="viewDiv">
  </div>
  <div id="editorDiv"></div>
  <div class="responsive">
    <div class="gallery">
      <a target="_blank" href="http://www.google.com">
        <img src="Screenshots/Survey123.png" alt="Survey123" width="200" height="200">
      </a>
      <div class="desc">Click here to add a race</div>
    </div>
  </div>
  <div class="clearfix"></div>
  <div style="padding:6px;"></div>
  <div id="seasons-filter" class="esri-widget">
    <div class="season-item visible-season" data-season="5K">5K</div>
    <div class="season-item visible-season" data-season="10K">10K</div>
    <div class="season-item visible-season" data-season="Half Marathon">Half Marathon</div>
    <div class="season-item visible-season" data-season="Marathon">Marthon</div>
    <div class="season-item visible-season" data-season="Ultra Marathon">Ultra Marthon</div>
    <div class="season-item visible-season" data-season="Triathlon">Triathlon</div>
    <div class="season-item visible-season" data-season="Cross Country">Cross Country</div>
    <div class="season-item visible-season" data-season="Stage">Stage</div>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

SusanSeymour · ‎08-01-2019

It is definitely a work in progress but I appreciate the help. Thank you.

RobertScheitlin__GISP · ‎08-01-2019

Susan,

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.