display zoom scale on map

[EvelynA]

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

[IanPeebles]

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

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