I just got a task to add a print button to web page. Once user clicks this button, the map should be printed. Since the project is already there, I don't want make too much change to it. Thanks in advance.
Hi Ryan,
Were you able to get the print output url from the print dijit or print task? I'm trying to access the same thing to get the print output to open automatically instead of just showing the link.
in <img>, not <a>
Now it works very well. JS set parameters of map based on user's action, like drag or zoom, then send a request our controller method. This method create a url to a GIS server This server will generate a map and return it. I just need save the url string in session, and then put this url in <a>. Maybe you have better idea.
The only problem is that I cannot print title, logo or something else.
Thanks again,
Ryan
So, do you have it working, or are you trying to figure out the URL still? It should open when you run the task.
Hi everybody,
Thank you very much. Now I know how to print the map. Actually I just need know the url to the newly created map, and then design the print button in any way as I want. Very simple. But in the begin, I don't know the web flow of ESRI, so it was difficult.
Rudy,
I just tried your solution. Please see my code as follows.
<script>
require(["esri/map", "esri/dijit/Print", "dojo/dom", "dojo/domReady!"], function(Map, Print, dom ) {
var myPrinter = new Print( {
map: map,
url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
}, dom.byId( "printButton" ) );
myPrinter.startup();
});
</script>
the map object is global variable created in somewhere else by dojo.addOnLoad(init). Once I click the print button, I get Uncaught TypeError: Cannot read property 'layerIds' of undefined.
Do I need set some proxy url?
Thanks,
Ryan,
Yes, the Print widget will create the button automatically. See this jsFiddle I put together. It's very simple with no styling or placement. It creates a map and adds a Print widget. Print widget API reference and the samples provide more information.
Widgets keep it simple by controlling almost everything. Tasks give your more flexibility, but require more effort by the developer.
Rudy
I didn't use any widget. This print widget will create some button automatically? Sorry I'm totally new to ESRI. Since this project has been there for a long time. To be consistent with other part, I just add another onclick button. Once client clicks this button, printMap() should be called. All statements involved in printing map should be located in this function.
Thanks
I may be missing something in the discussion, but if you're looking for a simple print button have you considered the Print widget? See these samples: Print, Print webmap
Hi Chris,
These are relevant codes.
<script type="text/javascript">
// init dojo requirements
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require('dijit.layout.TabContainer');
dojo.require("esri.map");
dojo.require("dijit.Dialog");
dojo.require("esri.dijit.Legend");
dojo.require("esri.dijit.Print");
dojo.require("dojo.dom");
dojo.require("dojo.ready");
dojo.require("dojo.on");
// create map var
var map;
xmin = -177;
ymin = 3;
xmax = -20;
ymax = 72;
function init() {
// create plant symbol var
var plantSymbol = "";
// init esri config defaults for io (proxyUrl = 'mapping', always use proxy = 'true')
esri.config.defaults.io.proxyUrl = "mapping";
esri.config.defaults.io.alwaysUseProxy = true;
queryString = dojo.queryToObject(window.location.search);
plantSymbol = document.getElementById('vSymbol').value;
if (! plantSymbol || plantSymbol.length < 1) {
plantSymbol = queryString["?symbol"];
plantSymbol = queryString["?keywordquery"];
plantSymbol = "Plant not selected";
}
// init lods
var lods = [
{
"level" : 0,
"resolution" : 156543.033928,
"scale" : 591657527.591555 },
"level" : 1,
"resolution" : 78271.5169639999,
"scale" : 295828763.795777 },
"level" : 2,
"resolution" : 39135.7584820001,
"scale" : 147914381.897889 },
"level": 3,
"resolution": 19567.8792409999,
"scale": 73957190.948944},
"level": 4,
"resolution": 9783.93962049996,
"scale": 36978595.474472},
"level": 5,
"resolution": 4891.96981024998,
"scale": 18489297.737236 },
"level": 6,
"resolution": 2445.98490512499,
"scale": 9244648.868618 },
"level": 7,
"resolution": 1222.99245256249,
"scale": 4622324.434309},
"level": 8,
"resolution": 611.49622628138,
"scale": 2311162.217155 },
"level": 9,
"resolution": 305.748113140558,
"scale": 1155581.108577 },
"level": 10,
"resolution": 152.874056570411,
"scale": 577790.554289 },
"level": 11,
"resolution": 76.4370282850732,
"scale": 288895.277144},
"level" : 12,
"resolution" : 38.2185141425366,
"scale" : 144447.638572 },
"level" : 13,
"resolution" : 19.1092570712683,
"scale" : 72223.819286 },
"level" : 14,
"resolution" : 9.55462853563415,
"scale" : 36111.909643 },
"level" : 15,
"resolution" : 4.77731426794937,
"scale" : 18055.954822 },
"level" : 16,
"resolution" : 2.38865713397468,
"scale" : 9027.977411 },
"level" : 17,
"resolution" : 1.19432856685505,
"scale" : 4513.988705 },
"level" : 18,
"resolution" : 0.597164283559817,
"scale" : 2256.994353 },
"level" : 19,
"resolution" : 0.298582141647617,
"scale" : 1128.497176 }
];
// init page title
var pageTitleValue = '<span style="font-size:125%;color:#000000;">Symbol: ' + plantSymbol + '</span>';
dojo.html.set(dojo.byId("pageTitle"), pageTitleValue);
// create new map
var initExtent = new esri.geometry.Extent({"xmin":xmin,"ymin":ymin,"xmax":xmax,"ymax":ymax,"spatialReference":{"wkid":4326}});
// esri.config.defaults.map.slider = { left:"40px", top:"100px", width:null, height:"300px" };
map = new esri.Map("map",{
sliderStyle: "large",
wrapAround180:true,
extent:esri.geometry.geographicToWebMercator(initExtent),
lods: lods});
// uncomment next two lines to show terrain in base map
// var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer");
// map.addLayer(basemap);
// make the map proxy call and get back a dynamic map
var dynamicmap = new esri.layers.ArcGISDynamicMapServiceLayer("GisServer");
// NOTE: layer definitions are modified by the proxy
var layerDefinitions = [];
layerDefinitions[2] = "plantsdb.plant.ESRI_STATE_DISTRIBUTION.SYMBOL=." + plantSymbol + ".";
layerDefinitions[3] = "plantsdb.plant.ESRI_STATE_DISTRIBUTION.SYMBOL=." + plantSymbol + ".";
layerDefinitions[4] = "plantsdb.plant.ESRI_COUNTY_DISTRIBUTION.SYMBOL=." + plantSymbol + ".";
layerDefinitions[5] = "plantsdb.plant.ESRI_STATE_ONLY_DISTRIBUTION.SYMBOL=." + plantSymbol + ".";
dynamicmap.setLayerDefinitions(layerDefinitions);
// add dynamicmap returned by proxy to the map object - will hit the proxy a 2nd time
map.addLayer(dynamicmap);
dojo.connect(map,'onLayersAddResult',function(results) {
var layerInfo = dojo.map(results, function(layer,index) {
return {layer:layer.layer,title:layer.layer.name};
if (layerInfo.length > 0) {
var legendDijit = new esri.dijit.Legend({
map:map,
layerInfos:layerInfo
}, "legendDiv");
legendDijit.startup();
dojo.connect(map, 'onLoad', function(theMap) {
//resize the map when the browser resizes
dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
function printMap(){
document.getElementById("printMap").innerHTML = "Printing...";
document.getElementById("printMap").disabled = true;
esriConfig.defaults.io.proxyUrl = "proxy.ashx";
esri.config.defaults.io.alwaysUseProxy = false;
var url ='http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task';
var printTask = new esri.tasks.PrintTask(url);
var params = new esri.tasks.PrintParameters();
params.map = map;
printTask.execute(params, function (evt) {
document.getElementById("printMap").style.display = 'none';
document.getElementById("printResult").href = evt.url;
document.getElementById("printResult").style.display = 'block';
dojo.on(dojo.dom.byId("printResult"), "click", function () {
document.getElementById("printMap").innerHTML = "Print Map";
document.getElementById("printMap").style.display = 'block';
document.getElementById("printMap").disabled = false;
document.getElementById("printResult").style.display = 'none';
}, function (evt) {
dojo.addOnLoad(init);
The source code is very long, and most are irrelevant. To generate the map, we have to make a call to our local server service, so we cannot test the code on any public site. Anyway, the map is created by calling init() function.
Since I'm new to esri and dojo. I have a silly question. To print the map, do we have to set the print template?
Do you have a public site or can you post all of your page code on js Bin?
Thanks for your reply. It's very helpful. Following your code, I have changed my code as follows.
Once I click the printMap button, this function will be called. Once I click the get Printout button, a new page shows up. However I cannot see the map on the new page.
By the way, I define my map as a global variable. The map is created by dojo.addOnLoad(init). So I can see the map on the original page. But cannot see it on the new page.
Thanks again.
Here is our custom print task that is done using our own web services: Print a Map
Click on the hammer to bring up the print button and then click on the print button for the custom print dialog box.
Here is the source code: JS Bin - Collaborative JavaScript Debugging You will need to create your own images for your buttons or you can copy ours.
Owen. Thank you very much. Since I'm new to esri and dojo. I don't know how to implement these samples in my project. Actually my project already created the map in a init() function such as dojo.addOnLoad(init). Now I just want to add one onclick function to the page. Can I do like this? function printMap(){ var url='hhttp://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task'; var printTask = new esri.tasks.PrintTask(url); var params = new esri.tasks.PrintParameters(); params.map = map; printTask.execute(params, printResult); }
If you are using the ESRI JS API then check out the PrintTask. There are also a few PrintTask samples available - Samples | ArcGIS API for JavaScript.
Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
