How do I detect when a map is moved?

Question

I'm looking to detect when the map is moved, both in terms on center position and zoom.

This is how I'm trying at the moment:

var map = new Map({
    basemap: 'streets'
});

var view = new MapView({
    container: 'mapDiv',
    map: map
});

map.on('extent-change', function () {
    console.log('Map is moved', arguments);
});

Vikash Pandey · Answer 1 · 2016-10-24T10:57:11.987

Well, You can use esri watchUtils for this.

It mostly depends on which ArcgGIS JS API version you are using. Till 3.18 it was working properly with extent-change. According to your code seems like you are using 4.0 or above.

Use this instead of extent-change-

 watchUtils.whenTrue(view, "stationary", function() {        
      // Get the new extent of view/map whenever map is updated. 
      if (view.extent) {
        console.log('Map is moved');
      }
 });

Below is the working code for this -

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Get started with MapView - Create a 2D map - 4.1</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    
        
    #outputMessages {
      position: absolute;
      z-index: 70;
      top: 0px;
      right: 0;
      bottom: 0;
      box-sizing: border-box;
      padding: 20px;
      height: 100%;
      width: 350px;
      background: rgba(0, 0, 0, 0.7);
      color: white;
      font-size: 14px;
      line-height: 30px;
      overflow: auto
    }
    
    #outputMessages span {
      color: #F7BE81;
      font-weight: bold;
    }
  </style>

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

  <script>
    require([
      "esri/Map",
      "dojo/dom",
      "esri/views/MapView",
      "esri/core/watchUtils",
      "dojo/domReady!"
    ], function(Map,dom, MapView, watchUtils) {

      var map = new Map({
        basemap: "streets"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 4,
        center: [15, 65]
      });
      
            var outputMessages = dom.byId("outputMessages");
      function displayMessage(info) {
        outputMessages.innerHTML += info;
        outputMessages.scrollTop = outputMessages.scrollHeight;
      }
      
    //*******************************************************************
      // Watching properties for changes  
      // 1. Watch view.stationary property 
      //*******************************************************************
      // Watch view's stationary property for becoming true. 
      watchUtils.whenTrue(view, "stationary", function() {
        // Get the new center of the view only when view is stationary. 
        if (view.center) {
          var info = "<br> <span> the view center changed. </span> x: " +
            view.center.x.toFixed(2) + " y: " + view.center.y.toFixed(2);
          displayMessage(info);
        }

        // Get the new extent of the view only when view is stationary. 
        if (view.extent) {
          var info = "<br> <span> the view extent changed: </span>" +
            "<br> xmin:" + view.extent.xmin.toFixed(2) + " xmax: " +
            view.extent.xmax.toFixed(2) +
            "<br> ymin:" + view.extent.ymin.toFixed(2) + " ymax: " +
            view.extent.ymax.toFixed(2);
          displayMessage(info);
        }
      });


    });
  </script>
</head>

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

Hoping this will help you :)

How do I detect when a map is moved?

1 Answers1