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
Solved! Go to Solution.
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>
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>
Hi Egge-Jan,
Thank you very much. Much appreciated. It works.
Kind Regards
Siyabonga Kubeka