Select to view content in your preferred language

Customizing Zoom Level

7926
29
Jump to solution
03-17-2017 09:11 AM
deleted-user-iwYtitJHBIyn
Deactivated User

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
29 Replies
RobertScheitlin__GISP
MVP Emeritus

Jeff,

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

0 Kudos
deleted-user-iwYtitJHBIyn
Deactivated User

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?

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

0 Kudos
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.

deleted-user-iwYtitJHBIyn
Deactivated User

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

0 Kudos
deleted-user-iwYtitJHBIyn
Deactivated User

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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);
        }
0 Kudos
deleted-user-iwYtitJHBIyn
Deactivated User

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

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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);
        }
0 Kudos
deleted-user-iwYtitJHBIyn
Deactivated User

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Jeff,

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

0 Kudos