Export Web Map Set Scale

ShaunWeston · ‎08-05-2013

I've built a tool that uses the export web map gp service and I've got a text input that allows the user to set the scale of the print out e.g. the current map scale may be 1:100,000, but they can set the text to say 1:50,000 and the printout will be at that scale rather than 1:100,000.

I can't get this to work. What I thought I'd to is set the scale to whatevers in the text input then set it back after the export web map process has finished, but doesn't seem to work. I think it's because I have to wait till the scale has changed, so I'm using this:

https://developers.arcgis.com/en/javascript/jsapi/map.html#setscale

which is this for me

map.setScale($("#mapScale").val());

How to I add a listener for when the scale has changed. Or is there a better way to do this? by just sending the scale to the export web map task or something?

Cheers 🙂

TimCollyer · ‎08-05-2013

I haven't done this, but it seems like using esri.geometry.getExtentForScale (https://developers.arcgis.com/en/javascript/jsapi/namespace_geometry.html#getextentforscale) to determine the extent, then using that extent to construct the bbox parameter for the "export" call on your map service should work?

http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/export?bbox=-43761126...

TimCollyer · ‎08-05-2013

Here is some code.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
        <title>Testing</title> 
        <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">
        <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css" />
<style>
html,body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
#map {
    overflow: hidden;
    height: 100%;
    width: 100%;    
}
#toolsDiv {
    position: absolute;
    left: 60px;
    top: 20px;
    z-index: 2;
}
</style>


        <script type="text/javascript">var djConfig = {parseOnLoad: true};</script> 
        <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.5"></script>
        
        <script type="text/javascript">
                var map;
                require(["dojo/ready"], function(ready) {
                    ready(function() {
                        require(["esri/map"], function(Map){
                            map = new Map("map", {
                                  basemap: "topo",
                                  center: [-98.57, 39.82],
                                  zoom: 4
                            });
                        })
                    });
                });
                
                function exportMap() {
                    require(["esri/geometry/scaleUtils", "dojo/dom"], function(scaleUtils, dom) {
                        var extent = scaleUtils.getExtentForScale(map, dom.byId("scaleBox").value);
                        var url = "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/export?bboxSR=&layers=&layerdefs=&size=&imageSR=&format=png&transparent=false&dpi=&time=&layerTimeOptions=&f=image"                        
                        var bbox = "&bbox=" + extent.xmin + "," + extent.ymin + "," + extent.xmax + "," + extent.ymax
                        
                        window.open(url + bbox);
                    });
                }
        </script>        
    </head> 


    <body class="claro" style="width:100%; height:100%">
        <div id="map" style="width:100%; height:100%">
            <div id="toolsDiv">
                <input id="scaleBox" type="text" name="scaleBox" data-dojo-type="dijit/form/TextBox" value="Enter scale. eg. 10000" />
                <button id ="goButton" type="button" name="goButton" data-dojo-type="dijit/form/Button" onclick="exportMap()">Export</button> 
            </div>
        </div>
    </body> 
</html>

VinayBansal · ‎08-06-2013

You can also create your json and pass the scale in map options as shown in the specification and call rest api
http://resources.arcgis.com/en/help/main/10.1/index.html#//0154000004w8000000

Regards,
Vinay Bansal