Uncaught TypeError: Cannot read property 'expand' of null at HTMLUListElement.onListClickHandler

1394
2
Jump to solution
05-05-2021 09:33 PM
LuisGarcia1
New Contributor

Hi everyone, having trouble using the side panel function within my map. Its purpose is to allow users to click on the side panel for a specific location (service names), and then it'll zoom to that location. The problem is that it is not happening.

 

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Services Locations</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>

<script>
  require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer","esri/widgets/Search","esri/tasks/Locator","esri/widgets/Home"], 
  function(Map, MapView, FeatureLayer, Search, Locator, Home) {
    const map = new Map({
      basemap: "dark-gray-vector"
    });

    const view = new MapView({
      container: "sceneDiv",
      map: map,
      center: [-111.772, 39.774], 
      zoom: 6,
      padding: {
        right: 300
      }
    });
        const listNode = document.getElementById("service_graphics");

        /********************
         * Add feature layer
         ********************/

        // Create the PopupTemplate
        const popupTemplate = {
          // autocasts as new PopupTemplate()
          title: "Organization Name: {Name_of_organization}",
          content: [
            {
              type: "fields",
              fieldInfos: [
                {
                  fieldName: "Address",
                  label: "Address",
                  format: {
                    places: 0,
                    digitSeparator: true
                  }
                },
                {
                  fieldName: "Website",
                  label: "Website",
                  format: {
                    places: 0,
                    digitSeparator: true
                  }
                },
                {
                  fieldName: "Contact_Information_Business_Ho",
                  label: "Phone",
                  format: {
                    places: 0,
                    digitSeparator: true
                  }
                }
              ]
            }
          ]
        };

        // Create the FeatureLayer using the popupTemplate
        const featureLayer = new FeatureLayer({
          url: "*****************************************",
          outFields: ["Name_of_organization", "City"], // used by queryFeatures
          popupTemplate: popupTemplate
        });
        map.add(featureLayer);

        let graphics;

        view.whenLayerView(featureLayer).then(function(layerView) {
          layerView.watch("updating", function(value) {
            if (!value) {
              // wait for the layer view to finish updating

              // query all the features available for drawing.
              layerView
                .queryFeatures({
                  geometry: view.extent,
                  returnGeometry: true,
                  orderByFields: ["Name_of_organization"]
                })
                .then(function(results) {
                  graphics = results.features;

                  const fragment = document.createDocumentFragment();

                  graphics.forEach(function(result, index) {
                    const attributes = result.attributes;
                    const name = attributes.Name_of_organization;

                    // Create a list organizational names
                    const li = document.createElement("li");
                    li.classList.add("panel-result");
                    li.tabIndex = 0;
                    li.setAttribute("data-result-id", index);
                    li.textContent = name;

                    fragment.appendChild(li);
                  });
                  // Empty the current list
                  listNode.innerHTML = "";
                  listNode.appendChild(fragment);
                })
                .catch(function(error) {
                  console.error("query failed: ", error);
                });
            }
          });
        });

        // listen to click event on the name of organization name
        listNode.addEventListener("click", onListClickHandler);

        function onListClickHandler(event) {
          const target = event.target;
          const resultId = target.getAttribute("data-result-id");

          // get the graphic corresponding to the clicked zip code
          const result = resultId && graphics && graphics[parseInt(resultId, 10)];

          if (result) {
            // open the popup at the centroid of zip code polygon
            // and set the popup's features which will populate popup content and title.

            view.goTo(result.geometry.extent.expand(2)).then(function() {
              view.popup.open({
                features: [result],
                location: result.geometry.center
              });
            })
            .catch(function(error){
              if (error.name != "AbortError"){
                console.error(error);
              }
            });
          }
        }
        const searchWidget = new Search({
          view: view,
          allPlaceholder: "Search Terms or address",
          searchAllEnabled: true,
          includeDefaultSources: false,
          sources: [
            {
              layer: featureLayer,
              searchFields: ["GBV", "Sexuality_served", "Age_Groups_Services_support_", "Additional_GBV", "Name_of_organization", "Gender_Served_"],
              displayField: "Name_of_organization",
              exactMatch: false,
              outFields: ["Name_of_organization"],
              name: "GBV Search Terms or Organization Name",
              zoomScale: 50000,
              placeholder: "example: Minor",
              maxResults: 6,
              maxSuggestions: 6,
              suggestionsEnabled: true,
            },
            {
              locator: new Locator({ url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }),
              singleLineFieldName: "SingleLine",
              name: "Custom Geocoding Service",
              placeholder: "Search Geocoder",
              maxResults: 3,
              maxSuggestions: 6,
              suggestionsEnabled: false,
              minSuggestCharacters: 0
              }]
        });

        var homeWidget = new Home({
          view: view
            });

        // Add the search widget to the top right corner of the view
        view.ui.add(searchWidget, {
          position: "top-right"
        }),
        view.ui.add(homeWidget, "top-right");
      });
  </script>

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

  .panel-container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .panel-side {
    padding: 2px;
    box-sizing: border-box;
    width: 300px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    overflow: auto;
    z-index: 60;
  }

  .panel-side h3 {
    padding: 0 20px;
    margin: 20px 0;
  }

  .panel-side ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .panel-side li {
    list-style: none;
    padding: 10px 20px;
  }

  .panel-result {
    cursor: pointer;
    margin: 2px 0;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .panel-result:hover,
  .panel-result:focus {
    color: orange;
    background-color: rgba(0, 0, 0, 0.75);
  }

</style>

</head>

<body>
<div class="panel-container">
  <div class="panel-side esri-widget">
    <h3>Sevices Available</h3>
    <ul id="service_graphics">
      <li>Loading&hellip;</li>
    </ul>
  </div>
  <div id="sceneDiv"></div>
</div>
</body>
</html>

 The error happens at around line 135 

Tags (3)
0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Honored Contributor

Your problem is that the geometry you're trying to expand is a point. Since a point has no extent, you can't expand on it. If you substitute a polygon or polyline feature service, then your code works as expected. You'll just have to use just the point's geometry to pan to it

view.goTo(result).then(function () {

or use a zoom level

view.goTo({ target: result, zoom: 15 }).then(function () {

 

View solution in original post

2 Replies
KenBuja
MVP Honored Contributor

Your problem is that the geometry you're trying to expand is a point. Since a point has no extent, you can't expand on it. If you substitute a polygon or polyline feature service, then your code works as expected. You'll just have to use just the point's geometry to pan to it

view.goTo(result).then(function () {

or use a zoom level

view.goTo({ target: result, zoom: 15 }).then(function () {

 

KenBuja
MVP Honored Contributor

If this post answered your question, please click the "Accept as Solution" button to help others who may have this question.

0 Kudos