Community
Select to view content in your preferred language

QueryFeatures() from Sublayer using Javascript API?

2051
1
08-17-2020 09:23 PM
DavidHarris1
by
Emerging Contributor
‎08-17-2020 09:23 PM
I am hoping to use createQuery() queryFeatures() methods on a sublayer of a MapImageLayer.  The documentation on SubLayers seems to suggest this would be possible. The code below mirrors an example from the following link: Query features from a FeatureLayer | ArcGIS API for JavaScript 4.16.  the mapLayer is a MapImageLayer with one sublayer.  I am hoping to load the values from the POSTCODE field into a dropdown menu, stored in the variable zipCodeSelect. 
mapLayer
          .when(function (){
            var subLayer = mapLayer.findSubLayerById(0);
            return subLayer.when(function () {
              var query = subLayer.createQuery();
              return subLayer.queryFeatures(query);
          })
        })
          .then(getZipCodes)
          .then(addToZipCodes);

          function getZipCodes(response) {
            var features = response.features;
            var zipCodes = features.map(function(feature){
              return feature.attributes.POSTCODE;
            });
            return zipCodes
          }

          function addToZipCodes(zipCodes) {
            zipCodes.sort();
            zipCodes.forEach(function (code) {
              var option = document.createElement("option");
              option.text = code;
              zipCodeSelect.add(option);
            });
          }
          return newValues
  });
0 Kudos
1 Reply
DavidHarris1
by
Emerging Contributor
‎08-19-2020 10:24 AM

I'm a bit new to this, but I ended up sorting this out using the createFeatureLayer() method on the sublayer for anybody having a similar issue.  I also changed the way I organized things quite a bit but for what it's worth, I included my code below. The selector widget sets a definition query on the map based on the values (that were manually loaded, along with an option for "Default Extent") and then pans to the centroid of the selected zip code.  This is for a 2d map feature in a SceneView with a different spatial reference than the default. If there are ways to clean this up would be happy to know. 

const mapLayer = new MapImageLayer({
          url: "https://gisprpxy.itd.state.ma.us/arcgisserver/rest/services/AGOL/ZIP_Codes_NT/MapServer"
});
const zipCodeSelect = document.getElementById('zip-code');
const defaultCam = new Camera({
        position: {
          x: -71.11,
          y: 42.38,
          z: 929,
          spatialReference: {
            wkid: 4326
          }
        },
        heading: 130,
        tilt: 75
      });
const outSpatialReference = new SpatialReference({
            wkid: 4326
          });
const cities = mapLayer.findSublayerById(0);
function setMapDefinitionExpression (event) {
            var zipCode = event.target.value;
            if (zipCode=='Default Extent') {
              cities.definitionExpression = "COUNTY = 'SUFFOLK'";
              view.camera=defaultCam;
            } else {
            cities.definitionExpression = `POSTCODE = '${zipCode.split('-')[0]}'`;
            return cities.createFeatureLayer()
            .then(function (featLayer){
              var query = featLayer.createQuery();
              query.where = cities.definitionExpression;
              var features = featLayer.queryFeatures(query);
              return features;
            })
            .then(function (response) {
              var features = response.features;
              projection.load().then(function () {
                features[0].geometry = projection.project(
                  features[0].geometry,
                  outSpatialReference
                )
                view.goTo({
                  target: features[0].geometry.centroid
                });
              });
            })
          }
        }
          zipCodeSelect.addEventListener("change", setMapDefinitionExpression);
0 Kudos