esri.tasks.PrintTask won't print WMS layers hosted by non-ESRI servers

AzaveaInc_ · ‎03-11-2013

My esri.Map is successfully displaying WMS layers via esri.layers.WMSLayer. Some of the WMS layers are hosted by ArcGIS Server and some are hosted by non-ESRI servers. But when I print using esri.tasks.PrintTask, only the WMS layers hosted by ArcGIS Server are visible. The WMS layers hosted by non-ESRI servers don't show up.

Has anyone succeeded in printing a WMS layer which is hosted by a non-ESRI server?

-Rick

ErmanTriutomo2 · ‎04-22-2013

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%2...";


   function myFunction()
{
esri.config.defaults.io.proxyUrl = "/proxy/proxy.ashx";

urlwms = "http://sif.regione.sicilia.it/sifgis/services/SIF_WMS_AREE_ECOLOGICAMENTE_OMOGENEE/MapServer/WMSServ...";
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>

            
            <div id="print_button"></div>


          </div>
        </div>
      </div>
    </div>
</body>
</html>

[/HTML]

DennisHunink · ‎01-10-2014

I love your solution, great work!

I tried modifying it to my own needs, using the WMS service from Open Weather Data. The layer is displayed correctly (look for the black lines, the Isobars), but aren't printed. Any thoughts on why that happens?

<!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://wms.openweathermap.org/service";
 
  
  
  var wmsLayer = new esri.layers.WMSLayer(urlwms, {
      "type": "wms",
      "transparentBackground":true,
      "visibleLayers":"pressure_cntr",
    "version": "1.1.1"
  }); 
   
        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>