Display current Map Scale (1:xxxxxxx)

2152
3
10-18-2019 05:24 AM
Highlighted
New Contributor II

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

Tags (1)
Reply
0 Kudos
3 Replies
Highlighted
MVP Esteemed Contributor

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>
Highlighted
New Contributor II

I'm working on API 4.x

<link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">

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

Thank you,

Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

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>
Reply
0 Kudos