topic Re: Extent Code in ArcGIS JavaScript Maps SDK Questions

Extent Code

DougHaller1 — Tue, 24 Apr 2018 14:52:58 GMT

How can I limit the geographical extent of an online map?

Specifically, I have two layers. One layer of my own data (hosted feature layer) and a second layer I am referencing.

My layer is specific to a major city. The second layer is state wide data. I want visitors to my site to be confined to a geographic area for viewing both layers. I would like the greatest extent of the view to be just the geographical area of my data (the major city).

(The reason is mainly to simplify the view. The data for the state-wide layer is unnecessary outside of the city that I am focused on.)

Note this is a student project for a course in online map design/development and I have only some ability with javascript. Here is the reference I have found...

MapView | API Reference | ArcGIS API for JavaScript 4.7

// Set the extent on the view

view.extent = new Extent({

xmin: -9177882,

ymin: 4246761,

xmax: -9176720,

ymax: 4247967,

spatialReference: {

wkid: 102100 } });

Thanks

Re: Extent Code

KenBuja — Sun, 12 Dec 2021 04:39:50 GMT

Here an example of one way to do it. This is based off the code found here

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Intro to MapView - Create a 2D map - 4.7</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
  <script src="https://js.arcgis.com/4.7/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/core/watchUtils",
      "dojo/domReady!"
    ], function(Map, MapView, watchUtils) {
      let initialExtent;
      const map = new Map({
        basemap: "streets"
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 8,
        center: [-77,39] // longitude, latitude
      });

      watchUtils.whenFalse(view, 'stationary', function (evt) {
        if (!view.stationary) {
          watchUtils.whenTrueOnce(view, 'stationary', function (evt) {
            checkExtent(view.extent);
          });
        } else {
          watchUtils.whenFalseOnce(view, 'interacting', function (evt) {
            console.log("interacting", view.extent);
          });
        }
      });

      function checkExtent(newExtent) {
        console.log('Checking extent...');
        if (!initialExtent) {
          initialExtent = view.extent;
        }
        const currentCenter = view.extent.center;
        if (initialExtent && !initialExtent.contains(currentCenter)) {
          let newCenter = view.extent.center;
          if (currentCenter.x < initialExtent.xmin) {
            newCenter.x = initialExtent.xmin;
          }
          if (currentCenter.x > initialExtent.xmax) {
            newCenter.x = initialExtent.xmax;
          }
          if (currentCenter.y < initialExtent.ymin) {
            newCenter.y = initialExtent.ymin;
          }
          if (currentCenter.y > initialExtent.ymax) {
            newCenter.y = initialExtent.ymax;
          }
          view.goTo(newCenter, {
            duration:1000
          });
          console.log('Outside original extent...');
        }
      }

    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Extent Code

DougHaller1 — Tue, 24 Apr 2018 17:53:13 GMT

Thanks, Ken.

I'll review this when I have a moment.