Search code examples
arcgisarcgis-js-api

arcgis goTo feature and open popup


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]})


Solution

  • 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>