Extent Code

258
2
04-24-2018 07:52 AM
DougHaller1
New Contributor III

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

0 Kudos
2 Replies
KenBuja
MVP Honored Contributor

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>
DougHaller1
New Contributor III

Thanks, Ken.

I'll review this when I have a moment.

D

0 Kudos