How to keep the view over a specific area (e.g. over a country)?

Question

I am using ArcGIS JS API 4.15 and want to achieve that if the user scrolls/zooms/pans out of a specific area that the visible area of the map will jump back to its initial value (just as if I would click the Home Widget button).

An example for this could be the user sees a map with Austria in its center. As soon as the user pans out of Austria, Austria will be centered again, as it has been initially. Another satisfying solution would be that simply not allow to pan beyond the country but not jumping back to the initial state - although we'd prefer that.

See in the pictures:

when "austriatoofar.png" is reached it should either prevent the user from panning further or jump to the inital "austria.png" state

I hope someone can provide me some code snippet.

Thanks in advance!

austriatoofar.PNG

austria.PNG

JoeBorgione_1-1607541435356.png

FrValade1_1-1625845052790.png

Egge-Jan_Pollé · Accepted Answer

Hi Christian Bischof, Please have a look at the sample below. Two steps: * You set a constraint on the MapView, a minZoom, to avoid users to zoom too far out * With a custom function you can check whether the center of the map has moved outside the initial extent, in which case the map will be moved back to the initial position. Does this work for you? BR, Egge-Jan <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Limit MapView to Certain Area - ArcGIS JavaScript 4.15</title> <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css"> <script src="https://js.arcgis.com/4.15/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script> require([ "esri/Map", "esri/views/MapView" ], function(Map, MapView) { let map = new Map({ basemap: "streets" }); let view = new MapView({ container: "viewDiv", map: map, zoom: 7, center: [13, 47.2], // longitude, latitude, centered on Austria constraints: { minZoom: 7 // Use this constraint to avoid zooming out too far } }); view.when(function() { limitMapView(view); }); function limitMapView(view) { let initialExtent = view.extent; let initialZoom = view.zoom; view.watch('stationary', function(event) { if (!event) { return; } // If the center of the map has moved outside the initial extent, // then move back to the initial map position (i.e. initial zoom and extent let currentCenter = view.extent.center; if (!initialExtent.contains(currentCenter)) { view.goTo({ target: initialExtent, zoom: initialZoom }); } }); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍