AnsweredAssumed Answered

Limit pan in Web AppBuilder

Question asked by einar.dorheimgeodata-no-esridist Employee on Jun 19, 2018
Latest reply on Jun 21, 2018 by einar.dorheimgeodata-no-esridist

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. 

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" 

    _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. 

Outcomes