display zoom scale on map

EvelynA — Fri, 01 Apr 2022 07:10:51 GMT

Hi,

Is there a way to display the current zoom scale on the map ? im using the zoom widget, but it only have the zoom in and out button

Re: display zoom scale on map

IanPeebles — Fri, 01 Apr 2022 13:20:38 GMT

Evelyn,

Are you wanting a tool where you can zoom to a specific scale on the map? It would be nice is this was a widget. We built a tool where you can enter in the scale (in feet) and it will zoom to that scale on the map. The current zoom scale in feet will update as well on the map when you perform a zoom in or out. It looks something like this:

When zooming again:

Then when zooming out:

Now the entire Zoom to Scale tool:

You can then type in the scale:

The map will zoom to that scale:

Here is the code block used:

Javascript

// Map - Define Scale
mapView.scale = 96000;
console.log("The initial map scale is 1:" + mapView.scale);
var scaleInFeet = mapView.scale/12

// Watch for the Scale on the Extent Change
mapView.watch('extent', function(){
var convertMapScale = mapView.scale/12;
var roundScale = Math.round(convertMapScale);
returnZoomScaleResult = document.getElementById("zoomToScaleResults");
returnZoomScaleResult.innerHTML = roundScale + " feet";
});

// Connect Zoom to Scale Button to Function
on(dom.byId("zoomToScaleBtn"), "click", zoomToScale);

// Zoom to Map Scale Function
function zoomToScale() {
// If no value is added in
if (document.getElementById("zoomToScaleValue").value=="") {
// Alert when Scale Value is left Blank
enterScaleDialog = new Dialog({
title: "Zoom to Scale",
content: "You must enter a zoom to scale value then hit enter or use the magnifying glass. Example: 1000, 2000, or 5000. All units are in feet.",
style: "width: 300px; height: 150px;"
});
enterScaleDialog.show();
}
else
{
var zoom = document.getElementById("zoomToScaleValue").value*12;
mapView.scale = zoom;
var mapScaleInFeet = zoom/12;
}
console.log("ZOOM TO SCALE: The zoom level is 1:" + zoom + ".");
console.log("ZOOM TO SCALE: The zoom scale in feet is 1 inch = " + mapScaleInFeet + " feet.")
}

HTML

Zoom to Scale Input Box and Button Map Toolbar DIV (HTML)

<div id="mapViewToolHeaderDIV">


<div id="zoomToScaleToolTitle"><center>Zoom to Scale</center></div>


<div id="zoomToScaleDIV">


<input type="search" id="zoomToScaleValue" placeholder=" Zoom to Scale: 1 inch = Feet" onkeypress="if (event.keyCode == 13) document.getElementById('zoomToScaleBtn').click()"/>


<div id="zoomToScaleBtn">
<div id="zoomToScaleBtnText"><center>Go</center></div>
</div>

</div>

Zoom to Scale Results on Map (HTML)

<div id="zoomToScaleFrame">

<div id="zoomToScaleTitle">1 inch =</div>


<div id="zoomToScaleResults"></div>

</div>

CSS

#zoomToScaleFrame{
z-index: 2;
position: absolute;
width: 150px;
left: 10px;
bottom: 32px;
height: 17px;
border: 1px solid none;
font-size: 10pt;
background-color: white;
}

#zoomToScaleTitle{
z-index: 2;
margin-left: 1px;
margin-top: 1px;
height: 11px;
width: 43px;
font-family: arial;
font-size: 8pt;
color: black;
}

#zoomToScaleResults{
margin-left: 44px;
margin-top: -11px;
width: 70px;
height: 11px;
font-family: arial;
font-size: 8pt;
color: black;
}

/* Zoom to Scale - Tool Title */
#zoomToScaleToolTitle{
z-index: 2;
position: absolute;
top: 0px;
line-height: 1;
left: 8px;
height: 10px;
font-size: 10pt;
font-weight: bold;
color: white;
width: 235px;
/* Make Text Unselectable */
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}

#zoomToScaleDIV{
position: absolute;
padding: 0;
margin: 0;
right: 0px;
bottom: 1px;
left: 8px;
height: 35px;
width: 235px;
}

/* Zoom to Scale Tool - Text Input */
#zoomToScaleValue{
position: absolute;
padding: 0;
margin: 0;
right: 0px;
top: 1px;
left: 2px;
height: 30px;
width: 180px;
}

/* Zoom to Scale Tool - Button (to Execute) */
#zoomToScaleBtn{
position: absolute;
padding: 0;
margin: 0;
right: 0px;
top: 1px;
left: 190px;
height: 30px;
width: 30px;
border-radius: 4px;
background-color: #EEEEEE;
/* Make Text Unselectable */
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}

/* Zoom to Scale Tool - Button Text */
#zoomToScaleBtnText{
position: absolute;
padding: 0;
margin: 0;
right: 2px;
top: 5px;
left: 2px;
bottom: 2px;
font-size: 11pt;
font-weight: bold;
}

This tool has worked really well for us. May give you some ideas.

Ian Peebles, GISP

GIS Analyst II

Application Support Team – Information Technology

1273 N Broadway, Edmond, OK 73034
(405) 359-4561

topic display zoom scale on map in ArcGIS JavaScript Maps SDK Questions

display zoom scale on map

Re: display zoom scale on map