Zoom Scale - ArcGIS.com - Basic Viewer Template

372
6
02-07-2012 08:37 AM
deleted-user-FYWnb7WVNuhY
New Contributor III
In arcgis.com I created a web map that consumes multiple map and feature services.  I then created a web application from this web map using the basic viewer web template.  I am hosting this template on our server so that I can customize the geocoder.

My problem is that when I type in an address (611 Walker or 6510 Westview Dr) it zooms out to the scale of the county and requires you to manually zoom to the address you typed in.  Instead of just zooming directly to the location.

I tried inserting this little ditty "map.centerAndZoom(geom,19)" but I cant seem to find the correct place to place it.  I am beginning to wonder if this is just a downfall of using a template. 

Does anyone know of a way to zoom to a location using the templates?

Thank you in advance!
Tags (2)
0 Kudos
6 Replies
MikeMinami
Esri Notable Contributor
We have made some changes to how the zoom works for the next release of the template that will determine the 'best fit extent' for the resulting address and zoom to that. Currently, the template uses a hardcoded a zoom level. Here�??s the updated code if you want to try it this in your app. You'll need to replace the existing findLocation and showResults functions in layout.js with these.


//use the locator to find the input location
 function findLocation() {
  var searchText = dojo.byId('searchField').value;
  //clear any existing map graphics
  map.graphics.clear();
  
  var address = {};
  address[configOptions.placefinder.singlelinefieldname] = searchText;

    var options = {
      address:address,
      outFields:["*"]
    };
  
  locator.addressToLocations(options);

}
//display the location results on the map 
function showResults(candidates) {
  var candidate;
  var geom;
  //hide the info window if displayed
  if(map.infoWindow.isShowing){
    map.infoWindow.clearFeatures();
    map.infoWindow.hide();
  }
  var zoomExtent;
  dojo.every(candidates, function (candidate) {
    if (candidate.score > 80) {
      geom = candidate.location;
      map.infoWindow.setTitle(i18n.tools.search.title);
      map.infoWindow.setContent(candidate.address);
      map.infoWindow.show(geom);
      zoomExtent = new esri.geometry.Extent(candidate.attributes.West_Lon, candidate.attributes.South_Lat,candidate.attributes.East_Lon, candidate.attributes.North_Lat, new esri.SpatialReference({wkid:4326}));
      
      
      console.log(zoomExtent.toJson());
      return false; //break out of loop after one candidate with score greater  than 80 is found.
    }
  });
  if (geom !== undefined) {
    //if the extent is constrained check to see if geocode result is within extent.If it is then zoom otherwise don't.
    if((configOptions.constrainmapextent === 'true' || configOptions.constrainmapextent === true) && !webmapExtent.contains(geom)){
      dojo.byId('searchField').value = i18n.tools.search.errors.missingLocation;
      map.infoWindow.hide();
    }else{ 
        map.setExtent(esri.geometry.geographicToWebMercator(zoomExtent));
    }
  }else{
    //no matches found
    dojo.byId('searchField').value = i18n.tools.search.errors.missingLocation;
  }
}


Thanks,

Mike
0 Kudos
MelissaPrindiville
New Contributor III
Hi Mike,

I am also trying to set the zoom level for the locator search.  What am I missing?  I am utilizing the basic viewer template (2.8 javascript api).  Which I think included your code sample.  However I am still unable to change the zoom level I even added.  if (geom !== undefined) {
    map.centerAndZoom(geom,12); to the layout.js

I know if is probable very simple.  help
0 Kudos
KellyHutchins
Esri Frequent Contributor
Melissa is your app publicly available? If so can you send us the url so we can check out the changes you've made.

Kelly


Hi Mike,

I am also trying to set the zoom level for the locator search.  What am I missing?  I am utilizing the basic viewer template (2.8 javascript api).  Which I think included your code sample.  However I am still unable to change the zoom level I even added.  if (geom !== undefined) {
    map.centerAndZoom(geom,12); to the layout.js

I know if is probable very simple.  help
0 Kudos
MelissaPrindiville
New Contributor III
I don't have a public url as of yet.  Attached find the layout.js if that would help.
0 Kudos
KellyHutchins
Esri Frequent Contributor
Melissa,

The problem is that you use map.centerAndZoom before the line that sets the map's extent to the extent returned from the locator (see bold line). If you want to zoom to a specific level then you could comment out the map.setExtent line and add yours.
if (geom !== undefined) {
    map.centerAndZoom(geom,12);

    //if the extent is constrained check to see if geocode result is within extent.If it is then zoom otherwise don't.
    if ((configOptions.constrainmapextent === 'true' || configOptions.constrainmapextent === true) && !webmapExtent.contains(geom)) {
        dojo.byId('searchField').value = i18n.tools.search.errors.missingLocation;
        map.infoWindow.hide();
    } else {
        map.setExtent(esri.geometry.geographicToWebMercator(zoomExtent));
    }
} else {
    //no matches found
    dojo.byId('searchField').value = i18n.tools.search.errors.missingLocation;
}
}
0 Kudos
MelissaPrindiville
New Contributor III
Awesome.  See simple. 😄  Thanks for your assistance.
0 Kudos