arcgis goTo feature and open popup

Question

I am new to Arcgis maps and using ArcGIS Javascript 4.2 library. Currently the features are showing up on the map and I am trying to go to feature and open it's popup programmatically. below is my code to query the features which is working fine.

                var query = layer.createQuery();
                query.where = "key= " + dataItem.key+ "";
                query.returnGeometry = true;
                query.returnCentroid = true;
                query.returnQueryGeometry = true;
                layer.queryFeatures(query).then(function (results) {
                //I am getting the feature results here.
                //trying to navigate to feature and open popup
                });

Note: I tried using the following code from documentation which is working fine but I don't have the center as the features are polylines in my case. view.goTo({center: [-126, 49]})

Can you please help me out at this question https://stackoverflow.com/questions/69642934/get-click-of-corresponding-map-marker-in-react-js — Deep Kakkar, Oct 20 '21 at 12:30

score 2 · Accepted Answer · answered Sep 08 '21 at 04:07

First, View goTo method has several options, including just using a geometry wich I think would be a better option for your case, zoom to a polyline.

Second to open the popup you just need to use the open method and you can pass there the features to show.

Check this example I put for you, has both suggestions,

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS API for JavaScript Hello World App</title>
  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    #selectDiv {
      height: 30px;
      width: 100%;
      margin: 5px;
    }
    #cableNameSelect {
      height: 30px;
      width: 300px;
    }
    #cableGoToButton {
      height: 30px;
      width: 100px;
    }
    #viewDiv {
      height: 500px;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css">
</head>

<body>
  <div id="selectDiv">
    <select id="cableNameSelect"></select>
    <button id="cableGoToButton">GO TO</button>
  </div>
  <div id="viewDiv">
  </div>
  <script src="https://js.arcgis.com/4.15/"></script>

  <script>
    require([
      'esri/Map',
      'esri/views/MapView',
      'esri/layers/FeatureLayer'
    ], function (Map, MapView, FeatureLayer) {

      const cableNameSelect = document.getElementById("cableNameSelect");
      const cableGoToButton = document.getElementById("cableGoToButton");

      const map = new Map({
        basemap: 'hybrid'
      });

      const view = new MapView({
        container: 'viewDiv',
        map: map,
        zoom: 10,
        center: {
          latitude: 47.4452,
          longitude: -121.4234
        }
      });
      view.popup.set("dockOptions", {
        buttonEnabled: false,
        position: "top-right"
      });

      const layer = new FeatureLayer({
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/cables/FeatureServer/0",
        popupTemplate: {
          title: "{NAME}",
          outFields: ["*"],
          content: [{
            type: 'fields',
            fieldInfos: [
              {
                fieldName: "length"
              },
              {
                fieldName: "owners"
              },
              {
                fieldName: "rfs"
              }
            ]
          }],
        }
      });

      map.add(layer);

      layer.queryFeatures({
        where: "1=1",
        outFields: ["Name"],
        returnGeometry: false
      }).then(function(results) {
        for(const graphic of results.features) {
          cableNameSelect.appendChild(new Option(graphic.attributes.Name, graphic.attributes.Name));
        }
      });

      cableGoToButton.onclick = function() {
        if (!cableNameSelect.value) {
          return;
        }
        cableGoToButton.disabled = true;
        layer.queryFeatures({
          where: `Name='${cableNameSelect.value}'`,
          outFields: ["*"],
          returnGeometry: true
        }).then(function (results) {
          cableGoToButton.disabled = false;
          if (!results.features) {
            return;
          }
          view.goTo(results.features[0].geometry);
          view.popup.open({
            features: [results.features[0]]
          })
        })
      };

    });
  </script>
</body>

</html>

Can you please help me out at this question https://stackoverflow.com/questions/69642934/get-click-of-corresponding-map-marker-in-react-js — Deep Kakkar, Oct 20 '21 at 12:28

arcgis goTo feature and open popup

1 Answers1