POST
|
Dear All Expert I want to print the graphics layer of a web application API javascript into a layout that I have set myself and then can display the map legend. I attached the html source code that can be run in a web browser chrome which can be done to printing graphical layers and prints inPDF format. <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title></title>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
h3 { margin: 0 0 5px 0; border-bottom: 1px solid #444; padding: 0 0 5px 0; text-align: center; }
.shadow {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}
#map{ margin: 0; padding: 0; }
#feedback {
background: #fff;
color: #000;
position: absolute;
font-family: arial;
height: auto;
right: 30px;
margin: 5px;
padding: 10px;
top: 30px;
width: 300px;
z-index: 40;
}
#feedback a {
border-bottom: 1px solid #888;
color: #444;
text-decoration: none;
}
#feedback a:hover, #feedback a:active, #feedback a:visited {
border: none;
color: #444;
text-decoration: none;
}
#note { font-size: 80%; font-weight: 700; padding: 0 0 10px 0; }
#info { padding: 10px 0 0 0; }
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
<script>
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("esri.layers.wms");
dojo.require("esri.layers.FeatureLayer");
dojo.require("esri.dijit.Print");
var app = {};
app.printUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";
function init() {
esri.config.defaults.io.proxyUrl = "/proxy/proxy.ashx";
esri.config.defaults.io.corsEnabledServers.push("http://sampleserver6.arcgisonline.com");
esri.config.defaults.io.corsEnabledServers.push("http://sampleserver1.arcgisonline.com");
app.map = new esri.Map("map", {
basemap: "hybrid",
center: [-98.215, 38.382],
zoom: 7,
});
// get print templates from the export web map task
var printInfo = esri.request({
"url": app.printUrl,
"content": { "f": "json" }
});
printInfo.then(handlePrintInfo, handleError);
}
function doQueries() {
esri.config.defaults.io.proxyUrl = "/proxy/proxy.ashx";
esri.config.defaults.io.corsEnabledServers.push("http://sampleserver6.arcgisonline.com");
esri.config.defaults.io.corsEnabledServers.push("http://sampleserver1.arcgisonline.com");
//Query all counties in Kansas
var countyQueryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");
var countyQuery = new esri.tasks.Query();
countyQuery.outFields = ["*"];
countyQuery.returnGeometry = true;
countyQuery.outSpatialReference = app.map.spatialReference;
countyQuery.where = "STATE_NAME = 'Kansas'";
countyQueryTask.execute(countyQuery, addCountyFeatureSetToMap);
//Query all cities in Kansas
var cityQueryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0/");
var cityQuery = new esri.tasks.Query();
cityQuery.outFields = ["*"];
cityQuery.returnGeometry = true;
cityQuery.outSpatialReference = app.map.spatialReference;
cityQuery.where = "STATE_NAME = 'Kansas'";
cityQueryTask.execute(cityQuery, addCityFeatureSetToMap);
}
function addCountyFeatureSetToMap(featureSet) {
var symbol = new esri.symbol.SimpleFillSymbol();
symbol.setColor(new dojo.Color([150,150,150,0.5]));
//Create graphics layer for counties
resultTemplate = new esri.InfoTemplate("${NAME}","${*}");
//Add counties to the graphics layer
dojo.forEach(featureSet.features, function(feature) {
app.map.graphics.add(feature.setSymbol(symbol).setInfoTemplate(resultTemplate));
//app.map.graphics.add(feature.setSymbol(symbol));
});
}
function addCityFeatureSetToMap(featureSet) {
var symbol = new esri.symbol.SimpleMarkerSymbol();
symbol.setColor(new dojo.Color([0,0,255]));
//Create graphics layer for cities
resultTemplate2 = new esri.InfoTemplate("${CITY_NAME}","${*}");
//Add cities to the graphics layer
dojo.forEach(featureSet.features, function(feature) {
app.map.graphics.add(feature.setSymbol(symbol).setInfoTemplate(resultTemplate2));
//app.map.graphics.add(feature.setSymbol(symbol));
});
}
function handlePrintInfo(resp) {
var layoutTemplate, templateNames, mapOnlyIndex, templates;
layoutTemplate = dojo.filter(resp.parameters, function(param, idx) {
return param.name === "Layout_Template";
});
if ( layoutTemplate.length == 0 ) {
console.log("print service parameters name for templates must be \"Layout_Template\"");
return;
}
templateNames = layoutTemplate[0].choiceList;
// remove the MAP_ONLY template then add it to the end of the list of templates
mapOnlyIndex = dojo.indexOf(templateNames, "MAP_ONLY");
if ( mapOnlyIndex > -1 ) {
var mapOnly = templateNames.splice(mapOnlyIndex, mapOnlyIndex + 1)[0];
templateNames.push(mapOnly);
}
// create a print template for each choice
templates = dojo.map(templateNames, function(ch) {
var plate = new esri.tasks.PrintTemplate();
plate.layout = plate.label = ch;
plate.format = "PDF";
plate.layoutOptions = {
"authorText": "May by: Esri's JS API Team",
"copyrightText": "<copyright info here>",
"legendLayers": [],
"titleText": "Pool Permits",
"scalebarUnit": "Miles"
};
return plate;
});
// create the print dijit
app.printer = new esri.dijit.Print({
"map": app.map,
"templates": templates,
url: app.printUrl
}, dojo.byId("print_button"));
app.printer.startup();
}
function handleError(err) {
console.log("Something broke: ", err);
}
dojo.ready(init);
</script>
</head>
<body class="tundra">
<div data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline',gutters:false"
style="width: 100%; height: 100%; margin: 0;">
<div id="map"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'center'">
<div id="feedback" class="shadow">
<h3>
Print Templates Using Layer WMS
</h3>
<button data-dojo-type="dijit.form.Button" onclick="doQueries()">Layer graphic</button>
<div id="info">
<div id="note">
Note: This sample uses an ArcGIS Server version 10.1 export web map task.
</div>
<!-- that will be used for the print dijit -->
<div id="print_button"></div>
</div>
</div>
</div>
</div>
</body>
</html>
hopefully there are experts who can help me Rgds --Erman Triutomo--
... View more
04-22-2013
05:59 PM
|
1
|
0
|
894
|
POST
|
Hi Rick I enclosed a little code for WMS Layer printing. I used an esri.request print template from proxy firing parameter web map as JSON. This is could be implement to Print Task mode and also you must setting the proxy page to test my simply code. Beside that I'll give you PDF sample as result from this simply code. Note: I add WMS layer from non ESRI servers Regards Erman Triutomo, GIS Functional SIMP Sr. GIS Consultant [HTML]<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title></title> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } h3 { margin: 0 0 5px 0; border-bottom: 1px solid #444; padding: 0 0 5px 0; text-align: center; } .shadow { -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px #888; box-shadow: 0 0 5px #888; } #map{ margin: 0; padding: 0; } #feedback { background: #fff; color: #000; position: absolute; font-family: arial; height: auto; right: 30px; margin: 5px; padding: 10px; top: 30px; width: 300px; z-index: 40; } #feedback a { border-bottom: 1px solid #888; color: #444; text-decoration: none; } #feedback a:hover, #feedback a:active, #feedback a:visited { border: none; color: #444; text-decoration: none; } #note { font-size: 80%; font-weight: 700; padding: 0 0 10px 0; } #info { padding: 10px 0 0 0; } </style> <script>var dojoConfig = { parseOnLoad: true };</script> <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script> <script> dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("esri.map"); dojo.require("esri.layers.wms"); dojo.require("esri.layers.FeatureLayer"); dojo.require("esri.dijit.Print"); var app = {}; app.printUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"; function myFunction() { esri.config.defaults.io.proxyUrl = "/proxy/proxy.ashx"; urlwms = "http://sif.regione.sicilia.it/sifgis/services/SIF_WMS_AREE_ECOLOGICAMENTE_OMOGENEE/MapServer/WMSServer"; layers = 0; var wmsLayer = new esri.layers.WMSLayer(urlwms, { "getMapUrl" : "getMapUrl", "version": "1.1.1", "styles": "default,default", }); wmsLayer.setVisibleLayers([layers]); wmsLayer.setImageFormat("png"); app.map.addLayer(wmsLayer); } function init() { esri.config.defaults.io.proxyUrl = "/proxy/proxy.ashx"; var initialExtent = new esri.geometry.Extent({"xmin":1265873.30, "ymin":4392682.98, "xmax": 2060818.40, "ymax": 4759580.72,"spatialReference":{"wkid":102100}}); app.map = new esri.Map("map", { basemap: "hybrid", extent: initialExtent, zoom: 8 }); // get print templates from the export web map task var printInfo = esri.request({ "url": app.printUrl, "content": { "f": "json" } }); printInfo.then(handlePrintInfo, handleError); } function handlePrintInfo(resp) { var layoutTemplate, templateNames, mapOnlyIndex, templates; layoutTemplate = dojo.filter(resp.parameters, function(param, idx) { return param.name === "Layout_Template"; }); if ( layoutTemplate.length == 0 ) { console.log("print service parameters name for templates must be \"Layout_Template\""); return; } templateNames = layoutTemplate[0].choiceList; // remove the MAP_ONLY template then add it to the end of the list of templates mapOnlyIndex = dojo.indexOf(templateNames, "MAP_ONLY"); if ( mapOnlyIndex > -1 ) { var mapOnly = templateNames.splice(mapOnlyIndex, mapOnlyIndex + 1)[0]; templateNames.push(mapOnly); } // create a print template for each choice templates = dojo.map(templateNames, function(ch) { var plate = new esri.tasks.PrintTemplate(); plate.layout = plate.label = ch; plate.format = "PDF"; plate.layoutOptions = { "authorText": "May by: Esri's JS API Team", "copyrightText": "<copyright info here>", "legendLayers": [], "titleText": "Pool Permits", "scalebarUnit": "Miles" }; return plate; }); // create the print dijit app.printer = new esri.dijit.Print({ "map": app.map, "templates": templates, url: app.printUrl }, dojo.byId("print_button")); app.printer.startup(); } function handleError(err) { console.log("Something broke: ", err); } dojo.ready(init); </script> </head> <body class="tundra"> <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;"> <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"> <div id="feedback" class="shadow"> <h3> Print Templates Using Layer WMS </h3> <button data-dojo-type="dijit.form.Button" onclick="myFunction()">WMS Layer</button> <div id="info"> <div id="note"> Note: This sample uses an ArcGIS Server version 10.1 export web map task. </div> <!-- that will be used for the print dijit --> <div id="print_button"></div> </div> </div> </div> </div> </body> </html> [/HTML]
... View more
04-22-2013
01:29 AM
|
0
|
0
|
460
|
Title | Kudos | Posted |
---|---|---|
1 | 04-22-2013 05:59 PM |
Online Status |
Offline
|
Date Last Visited |
11-11-2020
02:24 AM
|