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

SiyabongaKubeka · ‎07-22-2020

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

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"

/>

<style>

html,

body,

#viewDiv {

padding: 0;

margin: 0;

height: 100%;

width: 100%;

}

</style>

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>

</body>

</html>

Kind Regards

Siyabonga Kubeka

0761040911

Egge-Jan_Pollé · ‎07-22-2020

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

Egge-Jan_Pollé · ‎07-22-2020