How to select a polygon from the Search widget

585
1
Jump to solution
01-28-2021 05:58 AM
YvesJrC
New Contributor II

Hi everyone, I'm currently customizing a Search widget in Web AppBuilder for developper and I would like to know how I can change the selected feature result to a polygon containing the point address from the search.

This is the workflow:
1: The user search for a specific address in the search bar.

2: The user select either a suggestion or press enter to do the search

3: The search widget get the coordinates of the place searched by the user.

4: For all polygon in the feature layer, find the first polygon that contain the point using the within function and return the polygon ID

5: Select the polygon with the objectid property found at step 4 instead of the new point created from the search result.

So far, there is only the step 5 I am not able to do. My understanding is that the selection is done somewhere else when this method is called:

        this.publishData({
          'searchResults': evt
        });

So I was guessing that I could change the evt variable by removing the point feature and replace it by the polygon but I am not sure this is the right way to do this. If it is, how can I get the polygon feature object when I only have it's objectId?

Thank you for your time


1 Solution

Accepted Solutions
YvesJrC
New Contributor II

Finally I was able to bypass my problem by doing this:


1: Disable the property "Show pop-up when the feature or location is found." in the widget setting

YvesJrC_0-1611947404264.png

2: Commented and added this code in the Widget.js:

            _source.autoNavigate = false;
            //if (source.panToScale || source.zoomScale) {
            //  _source.autoNavigate = false;
            //}

3: Used the following method to select the polygon with it's ID received as a parameter:

      _selectReseultPolygon: function(id){

        var borderColor = new Color([0255255]);
        var fillColor = new Color([255000]);
        var fillSymbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            borderColor2
          ),
          fillColor
        );

        layer = this.map._layers.sourceLayer
        var query = new queryTest();
        query.where = "FEATUREID='" + id +"'";
        var selectionMgr;
        this.map.graphics.clear();
        selectionMgr = SelectionManager.getInstance();
        arrayUtils.forEach(this.map._layerslang.hitch(thisfunction (layerObject) {
          selectionMgr.clearSelection(layerObject);  
        }));
          
        layer.selectFeatures(queryFeatureLayer.SELECTION_NEW);
        layer.on("selection-complete"lang.hitch(thisfunction() {
          globalFeature = layer.getSelectedFeatures()[0];
          globalGeometry = globalFeature.geometry;
          globalGraphic = new Graphic(globalGeometryfillSymbol);
          this.map.graphics.add(globalGraphic);
        }));
      },


4: Zoom on the selected polygon using this code:

          var centroid = null;
          var extent = null;

          var i;
          for (i = 0i < layer._graphicsVal.lengthi++) {
            if(layer._graphicsVal[i].attributes.objectid== id){
              centroid = layer._graphicsVal[i].geometry.getCentroid()
              extent = layer._graphicsVal[i].geometry.getExtent()
            }
          }

          if(typeof centroid !== "undefined"){
            mpPt = centroid;
            var scrPt = this.map.toScreen(mpPt);
            this.map.emit("click", { bubbles: truecancelable: truemapPoint: mpPt ,screenPoint: scrPt });
            this.map.setExtent(extenttrue);
          }

View solution in original post

1 Reply
YvesJrC
New Contributor II

Finally I was able to bypass my problem by doing this:


1: Disable the property "Show pop-up when the feature or location is found." in the widget setting

YvesJrC_0-1611947404264.png

2: Commented and added this code in the Widget.js:

            _source.autoNavigate = false;
            //if (source.panToScale || source.zoomScale) {
            //  _source.autoNavigate = false;
            //}

3: Used the following method to select the polygon with it's ID received as a parameter:

      _selectReseultPolygon: function(id){

        var borderColor = new Color([0255255]);
        var fillColor = new Color([255000]);
        var fillSymbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            borderColor2
          ),
          fillColor
        );

        layer = this.map._layers.sourceLayer
        var query = new queryTest();
        query.where = "FEATUREID='" + id +"'";
        var selectionMgr;
        this.map.graphics.clear();
        selectionMgr = SelectionManager.getInstance();
        arrayUtils.forEach(this.map._layerslang.hitch(thisfunction (layerObject) {
          selectionMgr.clearSelection(layerObject);  
        }));
          
        layer.selectFeatures(queryFeatureLayer.SELECTION_NEW);
        layer.on("selection-complete"lang.hitch(thisfunction() {
          globalFeature = layer.getSelectedFeatures()[0];
          globalGeometry = globalFeature.geometry;
          globalGraphic = new Graphic(globalGeometryfillSymbol);
          this.map.graphics.add(globalGraphic);
        }));
      },


4: Zoom on the selected polygon using this code:

          var centroid = null;
          var extent = null;

          var i;
          for (i = 0i < layer._graphicsVal.lengthi++) {
            if(layer._graphicsVal[i].attributes.objectid== id){
              centroid = layer._graphicsVal[i].geometry.getCentroid()
              extent = layer._graphicsVal[i].geometry.getExtent()
            }
          }

          if(typeof centroid !== "undefined"){
            mpPt = centroid;
            var scrPt = this.map.toScreen(mpPt);
            this.map.emit("click", { bubbles: truecancelable: truemapPoint: mpPt ,screenPoint: scrPt });
            this.map.setExtent(extenttrue);
          }