How to show zoom level at the bottom of the map when the user zooms in and out?

810
2
Jump to solution
07-22-2020 12:31 AM
SiyabongaKubeka
Occasional Contributor

Hi All,

I have an Esri map, what I want to do with it is to show the zoom level at the bottom or anywhere in the map when the user zooms in or out. How can I do that? Below is the sample of the map that I am using.

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <meta

      name="viewport"

      content="initial-scale=1,maximum-scale=1,user-scalable=no"

    />

    <title>DEA GIS APPLICATION</title>

 

    <link

      rel="stylesheet"

      href="https://js.arcgis.com/4.12/esri/themes/light/main.css"

    />

    <script src="https://js.arcgis.com/4.12/"></script>

 

    <style>

      html,

      body,

      #viewDiv {

        padding: 0;

        margin: 0;

        height: 100%;

        width: 100%;

      }

    </style>

    <script>

      require([

        "esri/widgets/Sketch",

        "esri/Map",

        "esri/layers/GraphicsLayer",

        "esri/views/MapView"

      ], function(Sketch, Map, GraphicsLayer, MapView) {

        const layer = new GraphicsLayer();

 

        const map = new Map({

          basemap: "streets",

          layers: [layer]

        });

 

        const view = new MapView({

          container: "viewDiv",

          map: map,

          zoom: 5,

          center: [90, 45]

        });

 

        const sketch = new Sketch({

          layer: layer,

          view: view,

          availableCreateTools: ["point"]

        });

 

        view.ui.add(sketch, "top-right");

       

        sketch.on('create', function(evt){

                                           console.log("X = ", evt.graphic.geometry.x);

                                           console.log("Y = ", evt.graphic.geometry.y);

                             });

      });

    </script>

  </head>

 

  <body>

    <div id="viewDiv"></div>

  </body>

</html>

Kind Regards

Siyabonga Kubeka

0761040911

0 Kudos
1 Solution

Accepted Solutions
Egge-JanPollé1
MVP Regular Contributor

Hi Siyabonga Kubeka,

You may use watchUtils to capture the zoom level when the view becomes stationary, and then add this value to your map. Like this:

watchUtils.whenTrue(view, "stationary", function() {
  lon = parseInt(view.center.x); // with parseInt values are rounded to the full meter (coordinates in Web Mercator - EPSG:3857)
  lat = parseInt(view.center.y);
  zoomLevel = view.zoom;
  document.getElementById("location").innerHTML = "Map Center - Longitude: " + lon + " / Latitude: " + lat + " / Zoom level: " + zoomLevel; 
});

HTH,

Egge-Jan

Here is the full solution:

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: show zoom level</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    #location {
      padding: 15px;
      background: white;
      color: black;
       border: 5px solid gold;
       font-family: sans-serif;
       font-size: 1.2em;
    }
  </style>
  
  <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/css/main.css">
  <script src="https://js.arcgis.com/4.16/"></script>
  
  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/core/watchUtils"
    ], function(Map, MapView, watchUtils) {

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

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [90, 45], // longitude, latitude
        zoom: 5
      });
      
      view.ui.add("location", "bottom-left");

      watchUtils.whenTrue(view, "stationary", function() {
        lon = parseInt(view.center.x); // with parseInt values are rounded to the full meter (coordinates in Web Mercator - EPSG:3857)
        lat = parseInt(view.center.y);
        zoomLevel = view.zoom;
        document.getElementById("location").innerHTML = "Map Center - Longitude: " + lon + " / Latitude: " + lat + " / Zoom level: " + zoomLevel; 
      });
      



    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
  <div id="location"></div>
</body>
</html>

View solution in original post

2 Replies
Egge-JanPollé1
MVP Regular Contributor

Hi Siyabonga Kubeka,

You may use watchUtils to capture the zoom level when the view becomes stationary, and then add this value to your map. Like this:

watchUtils.whenTrue(view, "stationary", function() {
  lon = parseInt(view.center.x); // with parseInt values are rounded to the full meter (coordinates in Web Mercator - EPSG:3857)
  lat = parseInt(view.center.y);
  zoomLevel = view.zoom;
  document.getElementById("location").innerHTML = "Map Center - Longitude: " + lon + " / Latitude: " + lat + " / Zoom level: " + zoomLevel; 
});

HTH,

Egge-Jan

Here is the full solution:

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: show zoom level</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    #location {
      padding: 15px;
      background: white;
      color: black;
       border: 5px solid gold;
       font-family: sans-serif;
       font-size: 1.2em;
    }
  </style>
  
  <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/css/main.css">
  <script src="https://js.arcgis.com/4.16/"></script>
  
  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/core/watchUtils"
    ], function(Map, MapView, watchUtils) {

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

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [90, 45], // longitude, latitude
        zoom: 5
      });
      
      view.ui.add("location", "bottom-left");

      watchUtils.whenTrue(view, "stationary", function() {
        lon = parseInt(view.center.x); // with parseInt values are rounded to the full meter (coordinates in Web Mercator - EPSG:3857)
        lat = parseInt(view.center.y);
        zoomLevel = view.zoom;
        document.getElementById("location").innerHTML = "Map Center - Longitude: " + lon + " / Latitude: " + lat + " / Zoom level: " + zoomLevel; 
      });
      



    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
  <div id="location"></div>
</body>
</html>
SiyabongaKubeka
Occasional Contributor

Hi Egge-Jan,

Thank you very much. Much appreciated. It works.

Kind Regards

Siyabonga Kubeka