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

ChristianBischof · ‎05-25-2020

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!

Egge-Jan_Pollé · ‎05-25-2020

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

View solution in original post

Egge-Jan_Pollé · ‎05-25-2020

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

ChristianBischof · ‎05-26-2020

Thanks alot Egge-Jan Pollé‌! This is what I'm looking for - I'll see if I can implement it in my project. Have a nice day