Display current Map Scale (1:xyzxyzx)

Question

How can I display current map scale (1:xyzxyzx)? Please help.

RobertScheitlin__GISP · Answer

Ah, You forgot to mention that earlier. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Load a basic WebMap - 4.13</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } #vScale { padding: 10px; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.13/"></script> <script> require(["esri/views/MapView", "esri/WebMap"], function(MapView, WebMap) { /************************************************************ * Creates a new WebMap instance. A WebMap must reference * a PortalItem ID that represents a WebMap saved to * arcgis.com or an on-premise portal. * * To load a WebMap from an on-premise portal, set the portal * url with esriConfig.portalUrl. ************************************************************/ var webmap = new WebMap({ portalItem: { // autocasts as new PortalItem() id: "f2e9b762544945f390ca4ac3671cfa72" } }); /************************************************************ * Set the WebMap instance to the map property in a MapView. ************************************************************/ var view = new MapView({ map: webmap, container: "viewDiv" }); view.watch('scale', function(evt){ document.getElementById('vScale').innerHTML = '1:' + evt.toFixed(2); }); view.ui.add(vScale, 'bottom-left') }); </script> </head> <body> <div id="viewDiv"></div> <div id="vScale" class="esri-widget"></div> </body> </html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

BulbulMajumder · Answer

I'm working on API 4.x

Is there any compatible way to do this work in API 4.x

Thank you,

RobertScheitlin__GISP · Answer

Here is a sample for that: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title>Simple Map</title> <link rel="stylesheet" href="https://js.arcgis.com/3.30/esri/css/esri.css"> <style> html, body, #map { height: 100%; margin: 0; padding: 0; } #scale { position: absolute; bottom: 5px; left: 5px; background: rgba(255,255,255,0.7); font-size: 13px; line-height: 15px; } </style> <script src="https://js.arcgis.com/3.30/"></script> <script> var map; require(["esri/map", "dojo/domReady!"], function(Map) { map = new Map("map", { basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd center: [-122.45, 37.75], // longitude, latitude zoom: 13 }); map.on('update-end', function(evt){ document.getElementById('scale').innerHTML = '1:' + map.getScale().toFixed(2); }); }); </script> </head> <body> <div id="map"></div> <div id="scale"></div> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍