mapPrint.js

  1. 'use strict';
  3. // ugly way to add rgbcolor to global scope so it can be used by canvg inside the viewer; this is done because canvg uses UMD loader and has rgbcolor as internal dependency; there is no elegant way around it; another approach would be to clone canvg and change its loader;
  4. window.RGBColor = require('rgbcolor');
  5. const canvg = require('canvg-origin');
  6. const shared = require('./shared.js')();
  8. const XML_ATTRIBUTES = {
  9.     xmlns: 'http://www.w3.org/2000/svg',
  10.     'xmlns:xlink': 'http://www.w3.org/1999/xlink',
  11.     version: '1.1'
  12. };
  14. /**
  15.   * The `mapPrint` module provides map print and export image related functions.
  16.   *
  17.   * This module exports an object with the following functions
  18.   * - `printMap`
  19.   *
  20.   * NOTE: unit tests might be difficult to implement as DOM is required...
  21.   */
  23. /**
  24. * Generate the image from the esri print task
  25. *
  26. * @param {Object} esriBundle bundle of API classes
  27. * @param {Object} geoApi geoApi to determine if we are in debug mode
  28. * @param {Object} map esri map object
  29. * @param {Object} options options for the print task
  30. *                           url - for the esri geometry server
  31. *                           format - output format
  32. *                           width - target image height if different from default
  33. *                           height - target image width if different from default
  34. * @return {Promise} resolving when the print task created the image
  35. *                           resolve with a "response: { url: value }" where url is the path
  36. *                           for the print task export image
  37. */
  38. function generateServerImage(esriBundle, geoApi, map, options) {
  39.     // create esri print object with url to print server
  40.     const printTask = esriBundle.PrintTask(options.url, { async: true });
  41.     const printParams = new esriBundle.PrintParameters();
  42.     const printTemplate = new esriBundle.PrintTemplate();
  44.     // each layout has an mxd with that name on the server. We can modify and add new layout (mxd)
  45.     // we only support MAP_ONLY for now. See https://github.com/fgpv-vpgf/fgpv-vpgf/issues/1160
  46.     printTemplate.layout = 'MAP_ONLY';
  48.     // only use when layout is MAP_ONLY
  49.     printTemplate.exportOptions = {
  50.         height: options.height || map.height,
  51.         width: options.width || map.width,
  52.         dpi: 96
  53.     };
  55.     // pdf | png32 | png8 | jpg | gif | eps | svg | svgz
  56.     printTemplate.format = options.format;
  57.     printTemplate.showAttribution = false;
  59.     // define whether the printed map should preserve map scale or map extent.
  60.     // if true, the printed map will use the outScale property or default to the scale of the input map.
  61.     // if false, the printed map will use the same extent as the input map and thus scale might change.
  62.     // we always use false because the output image needs to be of the same extent as the size might be different
  63.     // we fit the image later because trying to fit the image with canvg when we add user added
  64.     // layer is tricky!
  65.     printTemplate.preserveScale = false;
  67.     // set map and template
  68.     printParams.map = map;
  69.     printParams.template = printTemplate;
  71.     // need to hide svg layers since we can generate an image for them locally
  72.     const svgLayers = hideLayers(map);
  74.     const printPromise = new Promise((resolve, reject) => {
  75.         // can be use to debug print task. Gives parameters to call directly the print task from it's interface
  76.         // http://resources.arcgis.com/en/help/rest/apiref/exportwebmap_spec.html
  77.         // http://snipplr.com/view/72400/sample-json-representation-of-an-esri-web-map-for-export-web-map-task
  78.         // const mapJSON = printTask._getPrintDefinition(map, printParams);
  79.         // console.log(JSON.stringify(mapJSON));
  81.         // TODO: catch esriJobFailed. it does not trigger the complete or the error event. Need a way to catch it!
  82.         // execute the print task
  83.         printTask.execute(printParams,
  84.             response =>
  85.                 resolve(shared.convertImageToCanvas(response.url)),
  86.             error =>
  87.                 reject(error)
  88.         );
  89.     });
  91.     // show user added previously visible for canvg to create canvas
  92.     showLayers(svgLayers);
  94.     return printPromise;
  95. }
  97. /**
  98. * Set svg-based layer visibility to false to avoid CORS error
  99. *
  100. * @param {Object} map esri map object
  101. * @return {Array} layer array of layers where visibility is true
  102. */
  103. function hideLayers(map) {
  104.     return map.graphicsLayerIds
  105.         .map(layerId => map.getLayer(layerId))
  106.         .filter(layer => layer.visible)
  107.         .map(layer => {
  108.             layer.setVisibility(false);
  109.             return layer;
  110.         });
  111. }
  113. /**
  114. * Set user added layer visibility to true for those whoe where visible
  115. *
  116. * @param {Array} layers array of graphic layers to set visibility to true
  117. */
  118. function showLayers(layers) {
  119.     layers.forEach((layer) => layer.setVisibility(true));
  120. }
  122. /**
  123. * Create a canvas from the user added layers (svg tag)
  124. *
  125. * @param {Object} map esri map object
  126. * @param {Object} options [optional = null] { width, height } values; needed to get canvas of a size different from default
  127. *                           width {Number}
  128. *                           height {Number}
  129. * @param {Object} canvas [optional = null] canvas to draw the image upon; if not supplied, a new canvas will be made
  130. * @return {Promise} resolving when the canvas have been created
  131. *                           resolve with a canvas element with user added layer on it
  132. */
  133. function generateLocalCanvas(map, options = null, canvas = null) {
  134.     canvas = canvas || document.createElement('canvas');  // create canvas element
  136.     // find esri map's svg node
  137.     // check if xmlns prefixes are set - they aren't; add them
  138.     // without correct prefixes, Firefox and IE refuse to render svg onto the canvas; Chrome works;
  139.     // related issues: fgpv-vpgf/fgpv-vpgf#1324, fgpv-vpgf/fgpv-vpgf#1307, fgpv-vpgf/fgpv-vpgf#1306
  140.     const svgNode = document.getElementById(`esri\.Map_${map.id.split('_')[1]}_gc`);
  141.     if (!svgNode.getAttribute('xmlns')) {
  142.         Object.entries(XML_ATTRIBUTES).forEach(([key, value]) =>
  143.             svgNode.setAttribute(key, value));
  144.     }
  146.     let originalOptions;
  147.     if (options) {
  148.         originalOptions = resizeSVGElement(svgNode, options);
  149.     }
  151.     const generationPromise = new Promise((resolve, reject) => {
  152.         // parse the svg
  153.         // convert svg text to canvas and stuff it into canvas canvas dom node
  155.         // wrapping in try/catch since canvg has NO error handling; not sure what errors this can catch though
  156.         try {
  157.             // convert svg to text (use map id to select the svg container), then render svgxml back to canvas
  158.             canvg(canvas, svgNode.outerHTML, {
  159.                 useCORS: true,
  160.                 ignoreAnimation: true,
  161.                 ignoreMouse: true,
  162.                 renderCallback: () => {
  163.                     if (options) {
  164.                         resizeSVGElement(svgNode, originalOptions.originalSize, originalOptions.originalViewbox);
  165.                     }
  167.                     resolve(canvas);
  168.                 }
  169.             });
  170.         } catch (error) {
  171.             reject(error);
  172.         }
  173.     });
  175.     return generationPromise;
  177.     /**
  178.      * Scales up or down the specified svg element. To scale it, we need to set the viewbox to the current size and change the size of the element itself.
  179.      * @function resizeSVGElement
  180.      * @private
  181.      * @param {Object} element target svg element to be resized
  182.      * @param {Object} targetSize object with target sizes in the form of { width, height }
  183.      *                           width {Number}
  184.      *                           height {Number}
  185.      * @param {Object} targetViewbox [optional = null] target viewbox sizes in the form of { minX, minY, width, height }; if not specified, the original size will be used as the viewbox
  186.      *                           minX {Number}
  187.      *                           minxY {Number}
  188.      *                           width {Number}
  189.      *                           height {Number}
  190.      * @return {Object} returns original size and viewbox of the svg element in the form of { originalSize: { width, height }, originalViewbox: { minX, minY, width, height } }; can be used to restore the element to its original state
  191.      *                          originalSize:
  192.      *                              width {Number}
  193.      *                              height {Number}
  194.      *                          originalViewbox:
  195.      *                              minX {Number}
  196.      *                              minxY {Number}
  197.      *                              width {Number}
  198.      *                              height {Number}
  199.      */
  200.     function resizeSVGElement(element, targetSize, targetViewbox = null) {
  202.         const originalSize = {
  203.             width: element.width.baseVal.value,
  204.             height: element.height.baseVal.value
  205.         };
  207.         // get the current viewbox sizes
  208.         // if the viewbox is not defined, the viewbox is assumed to have the same dimensions as the svg element
  209.         // getAttribute('viewBox') returns a string in the form '{minx} {miny} {width} {height}'
  210.         // setAttribute('viewBox') accepts a string in the same form
  211.         const [ovMinX, ovMinY, ovWidth, ovHeight] =
  212.             (element.getAttribute('viewBox') || `0 0 ${originalSize.width} ${originalSize.height}`).split(' ');
  214.         const originalViewbox = {
  215.             minX: ovMinX,
  216.             minY: ovMinY,
  217.             width: ovWidth,
  218.             height: ovHeight
  219.         };
  221.         // set the width/height of the svg element to the target values
  222.         element.setAttribute('width', targetSize.width);
  223.         element.setAttribute('height', targetSize.height);
  225.         // set the viewbox width/height of the svg element to the target values; or the values of the original viewbox (if the viewbox wasn't defined before, it is now)
  226.         element.setAttribute('viewBox', [
  227.             (targetViewbox || originalViewbox).minX,
  228.             (targetViewbox || originalViewbox).minY,
  229.             (targetViewbox || originalViewbox).width,
  230.             (targetViewbox || originalViewbox).height
  231.         ].join(' '));
  233.         return {
  234.             originalSize,
  235.             originalViewbox
  236.         };
  237.     }
  238. }
  240. // Print map related modules
  241. module.exports = (esriBundle, geoApi) => {
  242.     return {
  243.         printLocal: (map, options) => generateLocalCanvas(map, options),
  244.         printServer: (map, options) => generateServerImage(esriBundle, geoApi, map, options)
  245.     };
  246. };