topic Re: How to show zoom level at the bottom of the map when the user zooms in and out? in ArcGIS JavaScript Maps SDK Questions

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

SiyabongaKubeka — Wed, 22 Jul 2020 07:31:16 GMT

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

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

Egge-Jan_Pollé — Fri, 10 Dec 2021 22:22:03 GMT

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

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

SiyabongaKubeka — Wed, 22 Jul 2020 20:22:30 GMT

Hi Egge-Jan,

Thank you very much. Much appreciated. It works.

Kind Regards

Siyabonga Kubeka