Setting the zoom level for my app's webmap

[LauraBusolo2]

I have a JS application, and I want to set the zoom level to be a certain level when a user uses the Search Widget. At the moment, once the user searches for something, it zooms in way too much than required. Here's a snippet of what I added, that didn't work. There's a global variable for "CvepWebMapId", with the web map's ID.

// Creating map using the CvepWebMap variable
arcgisUtils.createMap(CvepWebMapId, "map").then(function (response) {

    mapMain = response.map;
    mapMain.setBasemap("topo");
    mapMain.getLayer('defaultBasemap').setVisibility(false);
    maxZoom: 11,

[RobertScheitlin__GISP]

Laura,

   You would add your own SelectResult event handler to the Search dijit and in that event handler you would call the maps centerAndZoom or get the graphics event and expand it and then set the maps extent.

_onSelectResult: function(e) {  
  var result = e.result;  
  var pt = result.feature.geometry.getCentroid();  
  map.centerAndZoom(pt, 2); //Change this to suit your needs
}‍‍‍‍‍

[LauraBusolo2]

Yea,

I've tried doing that but with no success. I'm a newbie at this.

// Creating the search widget
var search = new Search({
    map: mapMain,
    enableButtonMode: true, //enables the search widget to display as a single button
    enableLabel: false,
    enableInfoWindow: true,
    showInfoWindowOnSelect: false
},

    //center and zoom test
    onSelectResult, function(e) {
    var result = e.result;
    var pt = result.feature.geometry.getCentroid();
    map.centerAndZoom(pt, 8); 
}
//end of test

    dom.byId("search"));



//setting the source's searchExtent to the extent specified for the map
search.sources[0].searchExtent = extentInitial;

var sources = search.get('sources');
//Push the sources used to search, by default the ArcGIS Online World geocoder is included. In addition there is a feature layer of Academies. The Academies search is set up to find the "NAME".
sources.push({
    featureLayer: lyrAcademies,
    searchFields: ['NAME'],
    displayField: 'NAME',
    exactMatch: false,
    outFields: ['NAME', 'No_of_students', 'Industry', 'Descr', 'District'],
    name: 'Academies',
    placeholder: 'Hospital Academy',
    maxResults: 5,
    maxSuggestions: 5,

    //Creating InfoTemplate, with several academy fields
    infoTemplate: new InfoTemplate('Academies', 'Academy name: ${NAME}</br>No. of Students: ${No_of_students}</br>Sector: ${Industry}</br>Sector Description: ${Descr}</br>School District: ${District}'),
    enableSuggestions: true,
    minCharacters: 0
});

search.set('sources', sources);
//start the search widget
search.startup();

[RobertScheitlin__GISP · Accepted solution]

Laura,

   OK, here is how you would do it:

// Creating the search widget
var search = new Search({
    map: mapMain,
    enableButtonMode: true, //enables the search widget to display as a single button
    enableLabel: false,
    enableInfoWindow: true,
    showInfoWindowOnSelect: false
}, dom.byId("search"));

on(search, "select-result", onSelectResult);

//center and zoom test
function onSelectResult(e){
    var result = e.result;
    var pt = result.feature.geometry.getCentroid();
    map.centerAndZoom(pt, 8); 
}
//end of test
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This assumes you have "dojo/on" require in your require list.

[LauraBusolo2]

Thanks, Robert. Unfortunately, it hasn't changed anything. Just lost one of the search criteria/sources for the feature layer

lyrAcademies.

 I've tried to move the code to the bottom, but neither works.

[RobertScheitlin__GISP]

Laura,

  That does not make much sense. Can you provide your full code for review?