topic Re: Setting the zoom level for my app's webmap in ArcGIS JavaScript Maps SDK Questions

Setting the zoom level for my app's webmap

LauraBusolo2 — Sat, 11 Dec 2021 07:50:02 GMT

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,

Re: Setting the zoom level for my app's webmap

RobertScheitlin__GISP — Sat, 11 Dec 2021 07:50:04 GMT

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

Re: Setting the zoom level for my app's webmap

LauraBusolo2 — Sat, 11 Dec 2021 07:50:07 GMT

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

Re: Setting the zoom level for my app's webmap

RobertScheitlin__GISP — Sat, 11 Dec 2021 07:50:10 GMT

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.

Re: Setting the zoom level for my app's webmap

LauraBusolo2 — Wed, 30 Aug 2017 21:46:31 GMT

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.

Re: Setting the zoom level for my app's webmap

RobertScheitlin__GISP — Wed, 30 Aug 2017 21:57:59 GMT

Laura,

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