Customizing Zoom Level

6640
29
Jump to solution
03-17-2017 09:11 AM
deleted-user-iwYtitJHBIyn
New Contributor II

Hello,

I am hoping this will be a pretty easy fix.  Not so easy for me.

In using the Search widget we can type in a Parcel Address and zoom to that parcel.  I would like to modify the zoom level because it goes in way too far for us.

I am in the configure portion for the Search widget.  Unfortunately there is no place to change the Zoom Scale for my Parcel Address search source.  I can modify the Name, Placeholder Text, Search Fields, Display Field, Maximum Suggestions, Maximum Results, etc...but nothing concerning scale.  Am I looking in the right place?

Thanks

Jeff

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Jeff,

   Based on the code you are showing me it looks correct.

Changing the C:\gis\Applications\WebAppBuilderforArcGIS_2.2\client\stemapp\widgets\Search\Widget.js will only affect newly created apps. If you are wanting to change an existing app then you have to change the Widget.js in that apps widget folder.

View solution in original post

29 Replies
BrianFausel
Occasional Contributor III

I'd be interested in any responses to this question as well.  This might need to be added as an "Idea."  You can control the zoom scale if the feature service referenced by the search is a Point.  But not if it is a Line or Polygon.

RobertScheitlin__GISP
MVP Emeritus

I have answered this in the past. See this thread:

https://community.esri.com/thread/175998 

0 Kudos
deleted-user-iwYtitJHBIyn
New Contributor II

Robert,

Could you show me specifically where to place your code and how it should read?  Please see below...

Thanks.

Jeff

 _onSelectResult: function(e) {
        var result = e.result;
        if (!(result && result.name)) {
          return;
        }
        var dataSourceIndex = e.sourceIndex;
        var sourceResults = this.searchResults[dataSourceIndex];
        var dataIndex = 0;
        var that = this;

        var getGraphics = function(layer, fid) {
          var graphics = layer.graphics;
          var gs = array.filter(graphics, function(g) {
            return g.attributes[layer.objectIdField] === fid;
          });
          return gs;
        };
        var showPopupByFeatures = function(features) {
          var location = null;
          that.map.infoWindow.setFeatures(features);
          if (features[0].geometry.type === "point") {
            location = features[0].geometry;
          } else {
            location = features[0].geometry.getExtent().getCenter();
          }
          that.map.infoWindow.show(location, {
            closetFirst: true
          });
        };

        for (var i = 0, len = sourceResults.length; i < len; i++) {
          if (jimuUtils.isEqual(sourceResults, result)) {
            dataIndex = i;
            break;
          }
        }
        query('li', this.searchResultsNode)
          .forEach(lang.hitch(this, function(li) {
            html.removeClass(li, 'result-item-selected');
            var title = html.getAttr(li, 'title');
            var dIdx = html.getAttr(li, 'data-index');
            var dsIndex = html.getAttr(li, 'data-source-index');

            if (title === result.name &&
              dIdx === dataIndex.toString() &&
              dsIndex === dataSourceIndex.toString()) {
              html.addClass(li, 'result-item-selected');
            }
          }));

        var layer = this.map.getLayer(e.source._featureLayerId);

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Jeff,

  It is pretty straight forward (lines 51 and 52):

      _onSelectResult: function(e) {
        var result = e.result;
        if (!(result && result.name)) {
          return;
        }
        var dataSourceIndex = e.sourceIndex;
        var sourceResults = this.searchResults[dataSourceIndex];
        var dataIndex = 0;
        var that = this;

        var getGraphics = function(layer, fid) {
          var graphics = layer.graphics;
          var gs = array.filter(graphics, function(g) {
            return g.attributes[layer.objectIdField] === fid;
          });
          return gs;
        };
        var showPopupByFeatures = function(features) {
          var location = null;
          that.map.infoWindow.setFeatures(features);
          if (features[0].geometry.type === "point") {
            location = features[0].geometry;
          } else {
            location = features[0].geometry.getExtent().getCenter();
          }
          that.map.infoWindow.show(location, {
            closetFirst: true
          });
        };

        for (var i = 0, len = sourceResults.length; i < len; i++) {
          if (jimuUtils.isEqual(sourceResults[i], result)) {
            dataIndex = i;
            break;
          }
        }
        query('li', this.searchResultsNode)
          .forEach(lang.hitch(this, function(li) {
            html.removeClass(li, 'result-item-selected');
            var title = html.getAttr(li, 'title');
            var dIdx = html.getAttr(li, 'data-index');
            var dsIndex = html.getAttr(li, 'data-source-index');

            if (title === result.name &&
              dIdx === dataIndex.toString() &&
              dsIndex === dataSourceIndex.toString()) {
              html.addClass(li, 'result-item-selected');
            }
          }));

        var pt = result.feature.geometry.getCentroid();
        this.map.centerAndZoom(pt, 12); //Change this to suit your needs
0 Kudos
deleted-user-iwYtitJHBIyn
New Contributor II

Robert,

I've changed the "12" to different values (50, 500, etc...) but nothing seems to effect my zoom level.  Please see code placement below.  Ideally I would like to mimic the zoom level that illustrates using the ESRI World Geocoder.  Not quite sure what that is.

Can you tell me what I am doing wrong?

Thanks.

Jeff

 if (title === result.name &&
              dIdx === dataIndex.toString() &&
              dsIndex === dataSourceIndex.toString()) {
              html.addClass(li, 'result-item-selected');
            }
          }));
   
  var pt = result.feature.geometry.getCentroid();
        this.map.centerAndZoom(pt, 12); //Change this to suit your needs
  
   },

        var layer = this.map.getLayer(e.source._featureLayerId);

        if (layer) {
          var gs = getGraphics(layer, e.result.feature.__attributes[layer.objectIdField]);
          if (gs.length > 0) {
            showPopupByFeatures(gs);

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Jeff,

   The 12 is a zoom level not a scale. The Basemap sets the maps LODs (scale levels) and those are what you set the number to. 1 is zoomed out a global scale and 16 or 21 is zoomed into building level depending on the basemap used.

0 Kudos
deleted-user-iwYtitJHBIyn
New Contributor II

Robert,

I've changed the value to both 1 and 2 in the Search Widget.js file and the zoom level remains up close and personal.  You mentioned the basemap sets the maps scale levels.  Is there something and/or somewhere else I need to modify besides editing the Search Widget.js file?

Thanks.

Jeff

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Jeff,

   When I tested this put in line 49 and 50 like I mentioned here:

https://community.esri.com/message/673763-re-customizing-zoom-level?commentID=673763#comment-673763 

And I set the number to be 2 or 1 the zoom went to the world scale just fine. So i am not sure what you are doing wrong.

0 Kudos
deleted-user-iwYtitJHBIyn
New Contributor II

Robert,

Do I have the new code in the correct position?  Any errors before or after the code?

if (title === result.name &&
              dIdx === dataIndex.toString() &&
              dsIndex === dataSourceIndex.toString()) {
              html.addClass(li, 'result-item-selected');
            }
          }));
   
  var pt = result.feature.geometry.getCentroid();
        this.map.centerAndZoom(pt, 2); //Change this to suit your needs
  
   },

        var layer = this.map.getLayer(e.source._featureLayerId);

        if (layer) {
          var gs = getGraphics(layer, e.result.feature.__attributes[layer.objectIdField]);
          if (gs.length > 0) {
            showPopupByFeatures(gs);

0 Kudos