Setting the map scale
Hello, we have created a zoom to scale tool within our organization, but we allow for an input box where you can type in the scale, then zoom to it on the map. perhaps you can use similar logic or get an idea from this code snippet I will provide?
A Preview of the Zoom the Scale Tool within an Application:
The CODE in JS and HTML:
// ***********************************************************************
// * Zoom to Scale - START *
// ***********************************************************************
// Execute Zoom to Scale when Button is Clicked
on(dom.byId("zoomToScaleBtn"), "click", zoomToScale);
// Zoom to Scale Function
function zoomToScale () {
if (dom.byId("zoomToScaleValue").value == "") {
alert("You must enter in a scale value");
}
else
{
// Return Scale Value - Calculation (/12) based on Feet not Meters
var scaleValue = (dom.byId("zoomToScaleValue").value)*12;
map.setScale(scaleValue);
var scaleValueFeet = (scaleValue/12);
console.log("The map scale is 1:" + scaleValue);
console.log("Map Scale in Feet 1 inch = " + scaleValueFeet + " feet");
}
}
// Return Map Scale Results to Application - Calculation (/12) based on Feet NOT Meters
map.on("zoom-end", function() {
var returnZoomResult = document.getElementById("zoomToScaleResults");
var scale = map.getScale()/12;
var roundScale = Math.round(scale);
returnZoomResult.innerHTML = roundScale + " feet";
});
// ***********************************************************************
// * Zoom to Scale - END *
// ***********************************************************************
<!-- ************************************ -->
<!-- * ZOOM TO SCALE * -->
<!-- ************************************ -->
<div id="zoomToScaleTextBoxFrame">
<input type="search" id="zoomToScaleValue" placeholder="Zoom to Scale (Feet)" onkeypress="if (event.keyCode == 13) document.getElementById('zoomToScaleBtn').click()" />
<button id="zoomToScaleBtn" title="Zoom to Scale"></button>
</div>
Print layout scale:
I am wondering if you can choose the scale within the map first, then run the print task? Or are you wanting to choose the scale when you are initiating the print task?
Ian,
Yes, I first choose the scale then I set the map scale and they I run printTask. This is what my form /view looks like, the highlighted in red is the scale for the map.
First comes the scale dropdown
<div class="col-sm-6">
<label for="">Размер</label>
<select class="form-control" id="scale" name="scale">
<option value="1" selected>1:1000</option>
<option value="2">1:2500</option>
</select>
</div>then I check the dropdown option which was clicked
var scaleDiv = $("#scale option:selected").val();
if (scaleDiv == 1) {
//sentScale = "1000";
sentScale = 1000;
} else {
//sentScale = "2500";
sentScale = 2500;
}and I set the scale value according to which option from the dropdown was clicked. Then I execute the printMap() function which contains zoomToRoute
function printMap() {
require(["dojo/on", "esri/config", "esri/tasks/QueryTask", "esri/tasks/query", 'esri/symbols/SimpleMarkerSymbol', "esri/symbols/SimpleLineSymbol", "esri/Color", 'esri/geometry/Extent', "esri/tasks/PrintTask", "esri/tasks/PrintParameters", "esri/tasks/PrintTemplate", "dojo/domReady!"],
function (on, esriConfig, QueryTask, Query, SimpleMarkerSymbol, SimpleLineSymbol, Color, Extent, PrintTask, PrintParameters, PrintTemplate) {
console.log("globalParcel :: " + globalParcel + " reportType :: " + reportType + " globalScale :: " + sentScale);
//var queryTask = new QueryTask("http://app.gdi.mk:6080/arcgis/rest/services/karpos/Karpos_Vector_Izvodi/MapServer/1");
var queryTask = new QueryTask("http://10.0.0.10:6080/arcgis/rest/services/Karpos_Vector_Izvodi/MapServer/1");
var query = new Query();
query.where = "code ='" + globalParcel + "'";
query.outSpatialReference = map.spatialReference;
query.returnGeometry = true;
query.outFields = ["*"];
queryTask.execute(query).then(zoomToRoute);
// ZOOM TO ROUTE
function zoomToRoute(features) {
var map = this.map;
map.graphics.clear();
var pointSymbolNew = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 255, 255]), 1), new Color([255, 0, 127, 1]));
var selectedFeature = features.features;
selectedFeature[0].setSymbol(pointSymbolNew);
map.graphics.add(selectedFeature[0]);
map.setScale(sentScale);
console.log("map.setScale(sentScale)", sentScale)
map.centerAt(selectedFeature[0].geometry);
setTimeout(printImage, 5000);
}
// ZOOM TO ROUTE
}and in the zoomToRoute, I set the map scale with map.setScale(sentScale);
Here is what I came up with to set the map scale when using the choice list:
Choice List from Application:
JavaScript Code:
HTML Code:
When choosing the option, then the mouse is up, the zoom to scale will execute. The map changes zoom.
I added console statements to track the changing map scale. Here are examples of those that returned in the console.log:
For 1000 Scale:
For 2500 Scale:
Will something like that work? I don't think the map scale will change on the print layout. We use a zoom tool where you type in the scale and then a zoom occurs on the map. When we go to print the layout, the map scale is preserved.