nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

esriRequest export PNG zoom

GregoryBologna

I am using esriRequest to export a map to PNG. How would I set a dynamic zoom level in mapOptions so that the entire selected parcel is zoomed in with some padding, as shown in the bottom image? If I include a scale value, the parcel zoom level is not dynamic, and is either zoomed in too much, or too little.

Find more posts tagged with

Accepted answers

BenElan

Hi Gregory,

You could try using your min max values to create an extent. Then expanding that extent and passing those new extent min max values to your JSON.

<SPAN class="keyword token">var</SPAN> extent <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Extent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN><SPAN class="string token">"xmin"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">122.68</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"ymin"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="number token">45.53</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"xmax"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">122.45</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"ymax"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="number token">45.6</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
   
extent<SPAN class="punctuation token">.</SPAN><SPAN class="token function">expand</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">1.3</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'Afer expand: '</SPAN> <SPAN class="operator token">+</SPAN> extent<SPAN class="punctuation token">.</SPAN>xmin <SPAN class="operator token">+</SPAN> <SPAN class="string token">', '</SPAN> 
                            <SPAN class="operator token">+</SPAN> extent<SPAN class="punctuation token">.</SPAN>ymin <SPAN class="operator token">+</SPAN> <SPAN class="string token">', '</SPAN> 
                            <SPAN class="operator token">+</SPAN> extent<SPAN class="punctuation token">.</SPAN>xmax <SPAN class="operator token">+</SPAN> <SPAN class="string token">', '</SPAN> 
                            <SPAN class="operator token">+</SPAN> extent<SPAN class="punctuation token">.</SPAN>ymax<SPAN class="punctuation token">)</SPAN>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

GregoryBologna

Yes! Thank you, Ben. I am able to expand the extent prior to adding it to json using your method.

xmin = results.features[0].geometry.extent.xmin;

ymin = results.features[0].geometry.extent.ymin;

xmax = results.features[0].geometry.extent.xmax;

ymax = results.features[0].geometry.extent.ymax;

var extent = new Extent({"xmin":xmin,"ymin":ymin,"xmax":xmax,"ymax":ymax});

extent.expand(1.3);

xmin = extent.xmin;

ymin = extent.ymin;

xmax = extent.xmax;

ymax = extent.ymax;

// later on...add the expanded extent to json

"mapOptions": {

"showAttribution": false,

"extent": {

"xmin": xmin,

"ymin": ymin,

"xmax": xmax,

"ymax": ymax,

"spatialReference": {

"wkid": wkid,

"latestWkid": latestWkid

}

BenElan

If the min/max values in your code snippet above are not for the parcel, you can get those values through the REST API with a query:

https://gis.manateepao.com/arcgis/rest/services/Website/WebLayers/MapServer/6/query?where=parid+%3D+1101902509&returnExtentOnly=true&f=pjson

So just replace the parcel id (I hard coded it as 1101902509) with your parid variable to get the extent dynamically. Then you can expand as I showed above.

BenElan

Hi Gregory,

You could try using your min max values to create an extent. Then expanding that extent and passing those new extent min max values to your JSON.

<SPAN class="keyword token">var</SPAN> extent <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Extent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN><SPAN class="string token">"xmin"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">122.68</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"ymin"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="number token">45.53</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"xmax"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">122.45</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"ymax"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="number token">45.6</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
   
extent<SPAN class="punctuation token">.</SPAN><SPAN class="token function">expand</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">1.3</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'Afer expand: '</SPAN> <SPAN class="operator token">+</SPAN> extent<SPAN class="punctuation token">.</SPAN>xmin <SPAN class="operator token">+</SPAN> <SPAN class="string token">', '</SPAN> 
                            <SPAN class="operator token">+</SPAN> extent<SPAN class="punctuation token">.</SPAN>ymin <SPAN class="operator token">+</SPAN> <SPAN class="string token">', '</SPAN> 
                            <SPAN class="operator token">+</SPAN> extent<SPAN class="punctuation token">.</SPAN>xmax <SPAN class="operator token">+</SPAN> <SPAN class="string token">', '</SPAN> 
                            <SPAN class="operator token">+</SPAN> extent<SPAN class="punctuation token">.</SPAN>ymax<SPAN class="punctuation token">)</SPAN>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

RobertScheitlin__GISP

Not that I am aware of.

GregoryBologna

Is there a translation to use "expand" using json? I am building a json Web_Map_as_JSON request.

var symbol = {

"type": "simple",

"symbol": {

"type": "esriSFS",

"style": "esriSFSNull",

"outline": {

"type": "esriSLS",

"style": "esriSLSSolid",

"color": [66, 244, 206],

"width": 4

}

}; // end symbol

var drawingInfo = {

"renderer": symbol

}; // end drawingInfo

var webParcelLinesLayers = {

"id": "WebLayers_2139",

"title": "WebLayers_2139",

"opacity": 1,

"minScale": 0,

"maxScale": 0,

"url": mapLayerAndLabelsUrl,

"layers": [

{

"id": 4,

"layerDefinition": {

"drawingInfo": drawingInfo,

"source": {

"type": "mapLayer",

"mapLayerId": 4

"definitionExpression": "PARID = '" + parid + "'"

}

]

}; // end webParcelLinesLayers

var operationalLayers = [{

"id": "World_Street_Map_417",

"title": "World_Street_Map_417",

"opacity": 1,

"minScale": 0,

"maxScale": 0,

"url": latestYearAerialUrl

}]; // end operationalLayers

operationalLayers.push(webParcelLinesLayers);

var json = {

"mapOptions": {

"showAttribution": false,

"extent": {

"xmin": xmin,

"ymin": ymin,

"xmax": xmax,

"ymax": ymax,

"spatialReference": {

"wkid": wkid,

"latestWkid": latestWkid

}

"spatialReference": {

"wkid": wkid,

"latestWkid": latestWkid

// "scale" : 100.0,

"rotation" : 0

"operationalLayers": operationalLayers,

"exportOptions": {

"outputSize": [840, 840],

"dpi": 96

}

}; // end json

var Web_Map_as_JSON = JSON.stringify(json);

var urlB = "Web_Map_as_JSON=" + encodeURIComponent(Web_Map_as_JSON);

var urlC = "&Format=png32&Layout_Template=map_only&env:outSR=&env:processSR=&returnZ=false&returnM=false&returnTrueCurves=false&returnFeatureCollection=false&context=&f=pjson";

RobertScheitlin__GISP

Gregory,

You would set the maps zoom to your desired extent before you consider doing the export request. In all my apps I get the selected parcels geometry and expand it by 30%.

map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setExtent</SPAN><SPAN class="punctuation token">(</SPAN>pPoly<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getExtent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">expand</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">1.3</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
  <SPAN class="comment token">//print the map</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.