topic Re: Customizing Zoom Level in ArcGIS Web AppBuilder Questions

Customizing Zoom Level

deleted-user-iwYtitJHBIyn — Fri, 17 Mar 2017 16:11:09 GMT

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

Re: Customizing Zoom Level

BrianFausel — Fri, 17 Mar 2017 16:20:49 GMT

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.

Re: Customizing Zoom Level

RobertScheitlin__GISP — Fri, 17 Mar 2017 17:34:35 GMT

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

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

Re: Customizing Zoom Level

deleted-user-iwYtitJHBIyn — Fri, 17 Mar 2017 22:26:11 GMT

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;

        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);

Re: Customizing Zoom Level

RobertScheitlin__GISP — Fri, 10 Dec 2021 22:08:59 GMT

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

Re: Customizing Zoom Level

deleted-user-iwYtitJHBIyn — Mon, 20 Mar 2017 14:47:59 GMT

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);

Re: Customizing Zoom Level

RobertScheitlin__GISP — Mon, 20 Mar 2017 15:04:50 GMT

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.

Re: Customizing Zoom Level

deleted-user-iwYtitJHBIyn — Mon, 20 Mar 2017 15:17:26 GMT

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

Re: Customizing Zoom Level

RobertScheitlin__GISP — Mon, 20 Mar 2017 15:48:13 GMT

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.

Re: Customizing Zoom Level

deleted-user-iwYtitJHBIyn — Mon, 20 Mar 2017 16:20:43 GMT

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);

Re: Customizing Zoom Level

RobertScheitlin__GISP — Mon, 20 Mar 2017 16:29:09 GMT

Jeff,

You seem to, except I have no idea where the }, right after those line came from. That should not be there.

Re: Customizing Zoom Level

deleted-user-iwYtitJHBIyn — Mon, 20 Mar 2017 16:39:10 GMT

Robert,

I removed the "}," as you suggested and now have the following code (please see below). Is this correct?

My edits are being made in the following directory C:\gis\Applications\WebAppBuilderforArcGIS_2.2\client\stemapp\widgets\Search\Widget.js...using Notepad++. Is this the correct directory?

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

Re: Customizing Zoom Level

RobertScheitlin__GISP — Mon, 20 Mar 2017 16:59:34 GMT

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.

Re: Customizing Zoom Level

deleted-user-iwYtitJHBIyn — Mon, 20 Mar 2017 17:54:00 GMT

Robert,

The code works perfectly. I had inadvertently made my edits to all new applications going forward instead of modifying my individual app widget folders. Thank you for sticking with me on this inquiry. Much appreciated.

Jeff

Re: Customizing Zoom Level

deleted-user-iwYtitJHBIyn — Tue, 21 Mar 2017 17:51:10 GMT

Robert,

There appears to be a new wrinkle in the Search code modifications. Upon initial run the user types in the address in the Search and the appropriate zoom level comes up with the parcel and pop-up. This is great!

However, if the user pans to look at nearby area but decides to go back to the original parcel and clicks the search again it will not go back to the original parcel but just cycles. At that point the user must return to the default extent to access the original parcel again. Any ideas on this issue? Please let me know if I need to explain further.

Thanks.

Jeff

Re: Customizing Zoom Level

RobertScheitlin__GISP — Fri, 10 Dec 2021 22:09:02 GMT

Jeff,

Try this then:

        var pt = result.feature.geometry.getCentroid();
        if(this.map.getScale < 12){
          this.map.centerAndZoom(pt, 12); //Change this to suit your needs
        }else{
          this.map.centerAt(pt);
        }‍‍‍‍‍‍

Re: Customizing Zoom Level

deleted-user-iwYtitJHBIyn — Wed, 22 Mar 2017 14:26:41 GMT

Robert,

I tried the code. Please see below for placement and correctness. Upon run I type in an address and it zooms to the parcel unfortunately just as close as the original. You can pan away from this parcel and re-hit the search and it takes you back to the parcel without cycling so that's good. In the original code I used "5" that seemed to work. Unfortunately in using this code it seems to ignore the backing off of the zoom. Am I doing something incorrect?

Thanks.

Jeff

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

  var pt = result.feature.geometry.getCentroid();
        if(this.map.getScale < 5){
          this.map.centerAndZoom(pt, 5); //Change this to suit your needs
        }else{
          this.map.centerAt(pt);

  }

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);
          } else {
            var handle = on(layer, 'update-end', lang.hitch(this, function() {
              if (this.domNode) {
                var gs = getGraphics(layer, e.result.feature.__attributes[layer.objectIdField]);
                if (gs.length > 0) {
                  showPopupByFeatures(gs);
                }
              }

Re: Customizing Zoom Level

RobertScheitlin__GISP — Fri, 10 Dec 2021 22:09:05 GMT

Jeff,

Here is the correction to my last code which did not work:

        var pt = result.feature.geometry.getCentroid();
        if(this.map.getLevel() !== 5){
          this.map.centerAndZoom(pt, 5); //Change this to suit your needs
        }else{
          this.map.centerAt(pt);
        }‍‍‍‍‍‍

Re: Customizing Zoom Level

deleted-user-iwYtitJHBIyn — Wed, 22 Mar 2017 14:48:49 GMT

Robert,

Please see inserted new code for placement and correctness. This code takes us back to the original issue. The zoom level comes in great starting at the default screen. I should also add that if you, at that point of zoom, decide to perform a new search and type a new address into the search it does fine to locate the next parcel at the nice zoom level. However, as before, if you decide to pan away from the current selected parcel (pop-up and all) and then hit the search to go back to the parcel you left the screen cycles and never goes back. It is at that point you must come all the way out to the default screen and re-perform your search.

Thanks.

Jeff

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

  var pt = result.feature.geometry.getCentroid();
        if(this.map.getLevel() !== 5){
          this.map.centerAndZoom(pt, 5); //Change this to suit your needs
        }else{
          this.map.centerAt(pt);
        }

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

Re: Customizing Zoom Level

RobertScheitlin__GISP — Wed, 22 Mar 2017 15:00:13 GMT

Jeff,

Placement looks fine. I am not seeing that odd behavior on my end though. I am not sure what to tell you.