Hi I have made a basic app portraying a single feature hosted Feature layer(points) on top of esri basemaps. The basemaps covers the whole world, but my app should only focus on Oslo city. To do this I've tried to restrict the panning possibilities to the city, throwing the user back if he pans to far out, this works fine now. Using a script with Web AppBuilder for developers. However I have a challenge that I havn't been able to solve. 1. When my app loads, it sets the specified extent from a script for the basemap, but it doesn't seem to affect my feature layer, resulting in the features beeing placed with a certain offset from their correct place. (I suspect the script is forcing the basemap to a certain extent, while the features are still using the default extent set by the map layer). The moment I zoom in or out, the problem corrects itself and will work fine until you reload the application. Left pic, nr1 shows the initial extent, whil right pic,nr2, shows how it should be. This is the script I've tried, placed in the file "LayoutManager.js" _doPostLoad : function ( map ) { //load somethings that may be used later. //let it load behind the stage. require ( [ 'dynamic-modules/postload' ] ) ; var osloExtent ; if ( ! osloExtent ) { osloExtent = map . extent ; osloExtent . xmin = 1164244.8971553196 ; osloExtent . xmax = 1218767.932529483 ; osloExtent . ymin = 8360539.398234147 ; osloExtent . ymax = 8390138.410556029 ; } map . on ( 'extent-change' , function ( event ) { //If the map has moved to the point where it's center is outside the initial boundaries, //then move it back to the edge where it moved out var currentCenter = map . extent . getCenter ( ) ; if ( osloExtent && ! osloExtent . contains ( currentCenter ) && event . delta && event . delta . x !== 0 && event . delta . y !== 0 ) { var newCenter = map . extent . getCenter ( ) ; //check each side of the initial extent and if the current center is outside that extent, //set the new center to be on the edge that it went out on if ( currentCenter . x osloExtent . xmin ) { newCenter . x = osloExtent . xmin ; } if ( currentCenter . x > osloExtent . xmax ) { newCenter . x = osloExtent . xmax ; } if ( currentCenter . y osloExtent . ymin ) { newCenter . y = osloExtent . ymin ; } if ( currentCenter . y > osloExtent . ymax ) { newCenter . y = osloExtent . ymax ; } map . centerAt ( newCenter ) ; } } ) ; } , _onOpenWidgetRequest : function ( widgetId ) { this . layoutManager . openWidget ( widgetId ) ; } } ) ; If i remove the script, allowing end users to pan all over the world, the features will be at their correct place when reloading the application - so there's nothing wrong with the layer. Ps: I'm new to scripting java, had a lot of help coming up with this one. Have noticed that there are some similiar questions out there, but their quite old, and not linked to Web AppBuilder as far as I can tell.

I got the same functionality with that code, but the same error as well. I think it has something to do with setting the variable osloExtent. used some of your code and combined it with previous attempts/code i've found, works quite well : _onMapLoaded: function(map) { this.map = map; this.layoutManager.setMap(map); this.layoutManager.loadAndLayout(this.appConfig); var initialExtent = map.extent; map.on('extent-change', function(event) { //If the map has moved to the point where it's center is outside the initial boundaries, //then move it back to the edge where it moved out var currentCenter = map.extent.getCenter(); if (!initialExtent.contains(currentCenter) && event.delta.x !== 0 && event.delta.y !== 0) { var newCenter = map.extent.getCenter(); //check each side of the initial extent and if the //current center is outside that extent, //set the new center to be on the edge that it went out on if (currentCenter.x initialExtent.xmax) { newCenter.x = initialExtent.xmax; } if (currentCenter.y initialExtent.ymax) { newCenter.y = initialExtent.ymax; } map.centerAt(newCenter); } }); }, Thanks for your help Robert!

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

Limit pan in Web AppBuilder

EinarD

I have made a basic app portraying a single feature hosted Feature layer(points) on top of esri basemaps. The basemaps covers the whole world, but my app should only focus on Oslo city. To do this I've tried to restrict the panning possibilities to the city, throwing the user back if he pans to far out, this works fine now. Using a script with Web AppBuilder for developers. However I have a challenge that I havn't been able to solve.

1. When my app loads, it sets the specified extent from a script for the basemap, but it doesn't seem to affect my feature layer, resulting in the features beeing placed with a certain offset from their correct place. (I suspect the script is forcing the basemap to a certain extent, while the features are still using the default extent set by the map layer). The moment I zoom in or out, the problem corrects itself and will work fine until you reload the application.

Right pic, nr1, shows the initial placement, while left pic, nr2, shows how it should look

Left pic, nr1 shows the initial extent, whil right pic,nr2, shows how it should be.

This is the script I've tried, placed in the file "LayoutManager.js"

&nbsp;&nbsp;&nbsp; _doPostLoad<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>map<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//load somethings that may be used later.</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//let it load behind the stage.</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">'dynamic-modules/postload'</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> osloExtent<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>osloExtent<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;osloExtent <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;osloExtent<SPAN class="punctuation token">.</SPAN>xmin <SPAN class="operator token">=</SPAN> <SPAN class="number token">1164244.8971553196</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;osloExtent<SPAN class="punctuation token">.</SPAN>xmax<SPAN class="operator token">=</SPAN> <SPAN class="number token">1218767.932529483</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;osloExtent<SPAN class="punctuation token">.</SPAN>ymin<SPAN class="operator token">=</SPAN> <SPAN class="number token">8360539.398234147</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;osloExtent<SPAN class="punctuation token">.</SPAN>ymax<SPAN class="operator token">=</SPAN> <SPAN class="number token">8390138.410556029</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'extent-change'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="comment token">//If the map has moved to the point where it's center is outside the initial boundaries,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="comment token">//then move it back to the edge where it moved out</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="keyword token">var</SPAN> currentCenter <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getCenter</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>osloExtent <SPAN class="operator token">&&</SPAN> <SPAN class="operator token">!</SPAN>osloExtent<SPAN class="punctuation token">.</SPAN><SPAN class="token function">contains</SPAN><SPAN class="punctuation token">(</SPAN>currentCenter<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">&&</SPAN> event<SPAN class="punctuation token">.</SPAN>delta <SPAN class="operator token">&&</SPAN> event<SPAN class="punctuation token">.</SPAN>delta<SPAN class="punctuation token">.</SPAN>x <SPAN class="operator token">!==</SPAN> <SPAN class="number token">0</SPAN> <SPAN class="operator token">&&</SPAN> event<SPAN class="punctuation token">.</SPAN>delta<SPAN class="punctuation token">.</SPAN>y <SPAN class="operator token">!==</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> newCenter <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getCenter</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//check each side of the initial extent and if the current center is outside that extent, </SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//set the new center to be on the edge that it went out on</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>currentCenter<SPAN class="punctuation token">.</SPAN>x <SPAN class="operator token"><</SPAN> osloExtent<SPAN class="punctuation token">.</SPAN>xmin<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newCenter<SPAN class="punctuation token">.</SPAN>x <SPAN class="operator token">=</SPAN> osloExtent<SPAN class="punctuation token">.</SPAN>xmin<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>currentCenter<SPAN class="punctuation token">.</SPAN>x <SPAN class="operator token">></SPAN> osloExtent<SPAN class="punctuation token">.</SPAN>xmax<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newCenter<SPAN class="punctuation token">.</SPAN>x <SPAN class="operator token">=</SPAN> osloExtent<SPAN class="punctuation token">.</SPAN>xmax<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>currentCenter<SPAN class="punctuation token">.</SPAN>y <SPAN class="operator token"><</SPAN> osloExtent<SPAN class="punctuation token">.</SPAN>ymin<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newCenter<SPAN class="punctuation token">.</SPAN>y <SPAN class="operator token">=</SPAN> osloExtent<SPAN class="punctuation token">.</SPAN>ymin<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>currentCenter<SPAN class="punctuation token">.</SPAN>y <SPAN class="operator token">></SPAN> osloExtent<SPAN class="punctuation token">.</SPAN>ymax<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newCenter<SPAN class="punctuation token">.</SPAN>y <SPAN class="operator token">=</SPAN> osloExtent<SPAN class="punctuation token">.</SPAN>ymax<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">centerAt</SPAN><SPAN class="punctuation token">(</SPAN>newCenter<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>

&nbsp;&nbsp;&nbsp; _onOpenWidgetRequest<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>widgetId<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>layoutManager<SPAN class="punctuation token">.</SPAN><SPAN class="token function">openWidget</SPAN><SPAN class="punctuation token">(</SPAN>widgetId<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</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>‍</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><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

If i remove the script, allowing end users to pan all over the world, the features will be at their correct place when reloading the application - so there's nothing wrong with the layer.

Ps: I'm new to scripting java, had a lot of help coming up with this one.

Have noticed that there are some similiar questions out there, but their quite old, and not linked to Web AppBuilder as far as I can tell.

Encuentra más publicaciones etiquetadas con

Accepted answers

Aneel_Kumar_M

update the layout manager with
map.disablePan(); 
🙂

EinarD

I got the same functionality with that code, but the same error as well. I think it has something to do with setting the variable osloExtent.

used some of your code and combined it with previous attempts/code i've found, works quite well :

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; _onMapLoaded: function(map) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.map = map;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.layoutManager.setMap(map);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.layoutManager.loadAndLayout(this.appConfig);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var initialExtent = map.extent;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map.on('extent-change', function(event) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //If the map has moved to the point where it's center is outside the initial boundaries,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //then move it back to the edge where it moved out
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var currentCenter = map.extent.getCenter();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (!initialExtent.contains(currentCenter) && 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; event.delta.x !== 0 && event.delta.y !== 0) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var newCenter = map.extent.getCenter();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //check each side of the initial extent and if the 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //current center is outside that extent, 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //set the new center to be on the edge that it went out on
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (currentCenter.x < initialExtent.xmin) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; newCenter.x = initialExtent.xmin;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (currentCenter.x > initialExtent.xmax) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; newCenter.x = initialExtent.xmax;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (currentCenter.y < initialExtent.ymin) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; newCenter.y = initialExtent.ymin;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (currentCenter.y > initialExtent.ymax) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; newCenter.y = initialExtent.ymax;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map.centerAt(newCenter);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },<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>‍</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>

Thanks for your help Robert!

All comments

EinarD

Indeed, and thats fine and all, the problem, as tried explained in my question, is that the code I've put in to my LayoutManager.js is affecting the initial extent. so by adjusting the initial extent from Web AppBuilder or the Web Map the app is using, I'm getting a result where the basemap and the feature layer loads in two different extents.

If i remove all of the code written above the map and feature will both load in their rightful place, but then i lose the desired panning restriction..

RobertScheitlin__GISP

Einar,

In the Web AppBuilder you can set the maps initial extent to something other than the web maps initial extent. On the map tab on the left of WAB there is the Set Initial Extent section and there is a "Use current map view" button that allows you to set the apps initial extent to what you want.

EinarD

Hi Robert

We had trouble finding the code snippet that specify the initial extent, thats why we wrote the code that recenters the map to desired extent postload.

I can see in the config.json that it referes back to my web map in my portal, and in some way it gathers the extent saved in my web map and uses it to set initial extent. Which my code now overrules with the mention flaud in my original answer.

Sorry for the incomplete response..

RobertScheitlin__GISP

Einar,

Where is this code?

When my app loads, it sets the specified extent from a script for the basemap

The only code you posted was for re-centering the map after a pan.

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

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