display zoom scale on map

990
1
04-01-2022 12:10 AM
EvelynA
New Contributor

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

0 Kudos
1 Reply
IanPeebles
Frequent Contributor

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:

IanPeebles_0-1648819047981.png

 

When zooming again:

IanPeebles_1-1648819077259.png

 

Then when zooming out:

IanPeebles_2-1648819105994.png

 

 

Now the entire Zoom to Scale tool:

 

IanPeebles_0-1648816990469.png

 

You can then type in the scale:

IanPeebles_1-1648817015209.png

 

The map will zoom to that scale:

IanPeebles_2-1648817045559.png

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

<!-- Zoom to Scale Tool Title -->
<div id="zoomToScaleToolTitle"><center>Zoom to Scale</center></div>

<!-- Zoom to Scale Tool DIV -->
<div id="zoomToScaleDIV">

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

<!-- Zoom to Scale Tool - Button (to Execute)-->
<div id="zoomToScaleBtn">
<div id="zoomToScaleBtnText"><center>Go</center></div>
</div>

</div>

 

Zoom to Scale Results on Map (HTML)

<div id="zoomToScaleFrame">

<!-- Zoom to Scale Map Scale Title -->
<div id="zoomToScaleTitle">1 inch =</div>

<!-- Zoom to Scale Value -->
<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