nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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,

Find more posts tagged with

Accepted answers

rscheitlin

Laura,

OK, here is how you would do it:

<SPAN class="comment token">// Creating the search widget</SPAN>
<SPAN class="keyword token">var</SPAN> search <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Search</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">:</SPAN> mapMain<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; enableButtonMode<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">//enables the search widget to display as a single button</SPAN>
&nbsp;&nbsp;&nbsp; enableLabel<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; enableInfoWindow<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; showInfoWindowOnSelect<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"search"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>search<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"select-result"</SPAN><SPAN class="punctuation token">,</SPAN> onSelectResult<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="comment token">//center and zoom test</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">onSelectResult</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> result <SPAN class="operator token">=</SPAN> e<SPAN class="punctuation token">.</SPAN>result<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> pt <SPAN class="operator token">=</SPAN> result<SPAN class="punctuation token">.</SPAN>feature<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getCentroid</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">centerAndZoom</SPAN><SPAN class="punctuation token">(</SPAN>pt<SPAN class="punctuation token">,</SPAN> <SPAN class="number token">8</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> 
<SPAN class="punctuation token">}</SPAN>
<SPAN class="comment token">//end of test</SPAN>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

All comments

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.

rscheitlin

Laura,

OK, here is how you would do it:

<SPAN class="comment token">// Creating the search widget</SPAN>
<SPAN class="keyword token">var</SPAN> search <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Search</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">:</SPAN> mapMain<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; enableButtonMode<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">//enables the search widget to display as a single button</SPAN>
&nbsp;&nbsp;&nbsp; enableLabel<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; enableInfoWindow<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; showInfoWindowOnSelect<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"search"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>search<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"select-result"</SPAN><SPAN class="punctuation token">,</SPAN> onSelectResult<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="comment token">//center and zoom test</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">onSelectResult</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> result <SPAN class="operator token">=</SPAN> e<SPAN class="punctuation token">.</SPAN>result<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> pt <SPAN class="operator token">=</SPAN> result<SPAN class="punctuation token">.</SPAN>feature<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getCentroid</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">centerAndZoom</SPAN><SPAN class="punctuation token">(</SPAN>pt<SPAN class="punctuation token">,</SPAN> <SPAN class="number token">8</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> 
<SPAN class="punctuation token">}</SPAN>
<SPAN class="comment token">//end of test</SPAN>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

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

rscheitlin

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<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>&nbsp; 
&nbsp; <SPAN class="keyword token">var</SPAN> result <SPAN class="operator token">=</SPAN> e<SPAN class="punctuation token">.</SPAN>result<SPAN class="punctuation token">;</SPAN>&nbsp; 
&nbsp; <SPAN class="keyword token">var</SPAN> pt <SPAN class="operator token">=</SPAN> result<SPAN class="punctuation token">.</SPAN>feature<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getCentroid</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>&nbsp; 
&nbsp; map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">centerAndZoom</SPAN><SPAN class="punctuation token">(</SPAN>pt<SPAN class="punctuation token">,</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//Change this to suit your needs</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.