Setting the zoom level for my app's webmap

1808
5
Jump to solution
08-29-2017 08:11 PM
LauraBusolo2
New Contributor III

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,
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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.

View solution in original post

0 Kudos
5 Replies
RobertScheitlin__GISP
MVP Emeritus

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
}
0 Kudos
LauraBusolo2
New Contributor III

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();
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.

0 Kudos
LauraBusolo2
New Contributor III

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Laura,


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

0 Kudos