2

I combined samples for Printing with graphics https://developers.arcgis.com/javascript/jssamples/widget_print.html

and labeling https://developers.arcgis.com/javascript/jssamples/util_label_point.html

and I may have drawn upon this too? ... Drawing Graphics http://developers.arcgis.com/javascript/sandbox/sandbox.html?sample=toolbar_draw

And I have a printable map that is customizable, allowing you to draw graphics on the map and provide a custom title and custom text label with or without coordinates. The problem is with the "Text Label" button. I can add both parts to the map (the red dot and some text from the prompt) but when you go to print to PDF or JPG, it only prints the first of the two pieces added using map.graphics.add.

INSTRUCTIONS:
Take my code and paste it into the developers sandbox, go straight to line 313 and read my comment in all caps (in the addToMap function). Please let me know if you find a solution for me. Here is the code. I also made a fiddle just in case the formatting here doesn't work.

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Printing Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/nihilo/nihilo.css">
    <link rel="stylesheet" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/layout/resources/ExpandoPane.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
    <style>
      html, body { 
        height: 100%; width: 100%;
        margin: 0; padding: 0;
      } 
      body{
        background-color: #fff; overflow:hidden; 
        font-family: sans-serif;
      } 
      label {
        display: inline-block;
        padding: 5px 5px 0 5px;
        font-weight: 400;
        font-size: 12pt;
      }
      .button {
        width: 100%;
        margin: 3px auto;
        text-align: center;
      }
      #header {
        padding-top: 4px;
        padding-right: 15px;
        color: #444; 
        font-size:16pt; text-align:right;font-weight:bold;
        height:75px;
        background: #fff;
        border-bottom: 1px solid #444;
      }
      #subheader {
        font-size:small;
        color: #444;
        text-align:right;
        padding-right:20px;
      }
      #rightPane {
        margin: 0;
        padding: 10px;
        background-color: #fff;
        color: #421b14;
        width: 210px;
      }
      #instxns {
        font-size: 0.5em;
        text-align:left;
        margin: 0 1em 0 3em;
      }
      #geosearch {
        display: block;
        position: absolute;
        z-index: 2;
        top: 20px;
        left: 74px;
      }
      .esriScalebar {
        padding: 10px 40px;
      }
      .esriScalebarLine {
        background-color: white;
      }      

      .ds { background: #000; overflow: hidden; position: absolute; z-index: 2; }
      #ds-h div { width: 100%; }
      #ds-l div, #ds-r div { height: 100%; }
      #ds-r div { right: 0; }
      #ds .o1 { filter: alpha(opacity=10); opacity: .1; }
      #ds .o2 { filter: alpha(opacity=8); opacity: .08; }
      #ds .o3 { filter: alpha(opacity=6); opacity: .06; }
      #ds .o4 { filter: alpha(opacity=4); opacity: .04; }
      #ds .o5 { filter: alpha(opacity=2); opacity: .02; }
      #ds .h1 { height: 1px; }
      #ds .h2 { height: 2px; }
      #ds .h3 { height: 3px; }
      #ds .h4 { height: 4px; }
      #ds .h5 { height: 5px; }
      #ds .v1 { width: 1px; }
      #ds .v2 { width: 2px; }
      #ds .v3 { width: 3px; }
      #ds .v4 { width: 4px; }
      #ds .v5 { width: 5px; }

      /* make all dijit buttons the same width */
      .dijitButton .dijitButtonNode, #drawingWrapper, #printButton {
        width: 160px;
      }
      .esriPrint {
        padding: 0;
      }
    </style>

    <script src="http://js.arcgis.com/3.10/"></script>
    <script>
var app = {};
var mpArray;
app.map = null; app.toolbar = null; app.tool = null; app.symbols = null; app.printer = null;
require([
  "esri/map",
  "esri/toolbars/draw",
  "esri/dijit/Print",
  "esri/dijit/Geocoder",
  "esri/dijit/Legend",
  "esri/geometry/webMercatorUtils",
  "esri/layers/ArcGISTiledMapServiceLayer",
  "esri/layers/ArcGISDynamicMapServiceLayer",
  "esri/layers/FeatureLayer",
  "esri/layers/ImageParameters",
  "esri/tasks/PrintTemplate",
  "esri/tasks/LegendLayer",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/symbols/SimpleLineSymbol", 
  "esri/symbols/SimpleFillSymbol",
  "esri/symbols/TextSymbol",
  "esri/symbols/Font",
  "esri/graphic",
  "esri/config",
  "dojo/_base/array",
  "esri/Color",
  "dojo/parser", 
  "dojo/query",
  "dojo/dom",
  "dojo/on",
  "dojo/dom-construct",
  "dijit/registry",
  "dijit/form/CheckBox",
  "dijit/form/Button",
  "dijit/layout/BorderContainer",
  "dijit/layout/ContentPane",
  "dojox/layout/ExpandoPane",
  "dojo/domReady!"
], function(
  Map,
  Draw,
  Print,
  Geocoder,
  Legend,
  webMercatorUtils,
  ArcGISTiledMapServiceLayer,
  ArcGISDynamicMapServiceLayer,
  FeatureLayer,
  ImageParameters,
  PrintTemplate,
  LegendLayer,
  SimpleMarkerSymbol,
  SimpleLineSymbol,
  SimpleFillSymbol,
  TextSymbol,
  Font,
  Graphic,
  esriConfig,
  arrayUtils,
  Color,
  parser, 
  query,
  dom,
  on,
  domConstruct, 
  registry,
  CheckBox,
  Button,
  ExpandoPane
) {
  parser.parse();

  esriConfig.defaults.io.proxyUrl = "/proxy";
  var isLabel = false;

  app.map = new Map("map", {
    basemap: "streets",
    center: [-80.2, 37.5],
    zoom: 12
  });
  app.map.on("load", function() {
    app.toolbar = new Draw(app.map);
    app.toolbar.on("draw-end", addToMap);
    app.map.on("mouse-move", showCoordinates);
    app.map.on("mouse-drag", showCoordinates);
  });
  function clearMapGraphics () {
    app.map.graphics.clear();
  }
  function showCoordinates(evt) {
    //the map is in web mercator but display coordinates in geographic (lat, long)
    var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
    //display mouse coordinates in the right panel
    dom.byId("coordsinfo").innerHTML = mp.x.toFixed(5) + ", " + mp.y.toFixed(5);
    mpArray = [mp.x.toFixed(5), mp.y.toFixed(5)];
  }

  function addTextLabel () {
    // ADD EVENT LISTENER FOR CLICK ON MAP TO IDENTIFY LABEL PLACEMENT.
    // THE EVENT LISTENER WILL HAVE THE PROMPT
    app.toolbar = new Draw(app.map);
    activateTool("label");
    app.toolbar.on("draw-end", addToMap);
    on.once(dom.byId("map"), "click", showCoordinates);
  }


  var myCounter = 0;
  function setupPrint () {
    if (myCounter > 0) { // you already created the Print Widget
      return;
    }
    myCounter += 1;
    var printTitle;
    var myInput = registry.byId("mapTitle");
    printTitle = myInput.get("value"); // in order to use get
    var layouts = [{
      name: "Letter ANSI A Landscape", 
      label: "Landscape (PDF)", 
      format: "pdf", 
      options: { 
        legendLayers: [], // empty array means no legend
        scalebarUnit: "Miles",
        titleText: printTitle + ", Landscape PDF" 
      }
    }, {
      name: "Letter ANSI A Portrait", 
      label: "Portrait (Image)", 
      format: "jpg", 
      options:  { 
        legendLayers: [],
        scaleBarUnit: "Miles",
        titleText: printTitle + ", Portrait JPG"
      }
    }];

    // create the print templates
    var templates = arrayUtils.map(layouts, function(lo) {
      var t = new PrintTemplate();
      t.layout = lo.name;
      t.label = lo.label;
      t.format = lo.format;
      t.layoutOptions = lo.options;
      return t;
    });

    app.printer = new Print({
      map: app.map,
      templates: templates,
      url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
    }, dom.byId("printButton"));
    app.printer.startup();
  } // end function setupPrint

  on(dom.byId("prepMap"), "click", setupPrint);
  on(dom.byId("clearGraphics"), "click", clearMapGraphics);
  on(dom.byId("textLabel"), "click", addTextLabel);

  // set up symbols for the various geometry types
  app.symbols = {};
  app.symbols.point = new SimpleMarkerSymbol("square", 10, new SimpleLineSymbol(), new Color([0, 255, 0, 0.75]));
  app.symbols.polyline = new SimpleLineSymbol("solid", new Color([255, 128, 0]), 2);
  app.symbols.polygon = new SimpleFillSymbol().setColor(new Color([255,255,0,0.25]));
  app.symbols.circle = new SimpleFillSymbol().setColor(new Color([0, 0, 180, 0.25]));

  // find the divs for buttons
  query(".drawing").forEach(function(btn) {
    var button = new Button({
      label: btn.innerHTML,
      onClick: function() {
        activateTool(this.id);
      }
    }, btn);
  });

  function activateTool(type) {
    if (type === "label") {
      app.symbols.point = new SimpleMarkerSymbol("circle", 10, new SimpleLineSymbol(), new Color([255, 0, 0, 0.75]));
      type = "point";
      esri.bundle.toolbars.draw.addPoint = "Add a text label";
      isLabel = true;
    } else if (type === "point") {
      app.symbols.point = new SimpleMarkerSymbol("square", 10, new SimpleLineSymbol(), new Color([0, 255, 0, 0.75]));
      esri.bundle.toolbars.draw.addPoint = "Click to add a point";
      isLabel = false;
    } else {
      isLabel = false;
    }
    app.tool = type.replace("freehand", "");
    app.toolbar.activate(type);
    app.map.hideZoomSlider();
  }

  function addToMap(evt) {
    var labelText, coordsCheckBox, textSymbolText;
    var font = new Font("20px", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLDER);
    app.toolbar.deactivate();
    app.map.showZoomSlider();

    if (isLabel) {
      labelText = prompt("Enter a Text Label", "");
      coordsCheckBox = registry.byId("includeCoords");
      if (coordsCheckBox.get("checked")) {
        textSymbolText = "X: " + mpArray[0] + ", Y: " + mpArray[1]  + "  -  " + labelText;
      } else {
        textSymbolText = labelText;
      }
      var textSymbol = new TextSymbol(
        textSymbolText,
        font, new Color([0, 0, 0]));
      var graphic = new Graphic(evt.geometry, textSymbol);
      var graphic2 = new Graphic(evt.geometry, app.symbols[app.tool]);
      // WHICHEVER IS ADDED FIRST WILL PRINT BUT NOT WHICHEVER COMES SECOND; TRY SWITCHING LINES 314 and 315 AND SEE WHAT I MEAN
      app.map.graphics.add(graphic);
      app.map.graphics.add(graphic2);
    } else {
      var graphic = new Graphic(evt.geometry, app.symbols[app.tool]);
      app.map.graphics.add(graphic);
    }
  }

   // Add Geocoder
  var geocoder = new Geocoder({
    map: app.map 
  }, "geosearch");
  geocoder.startup();
  // End Geocoder
}); // End of require function      
    </script>
  </head>
  <body class="nihilo">
    <div id="mainWindow" 
         data-dojo-type="dijit/layout/BorderContainer" 
         data-dojo-props="design:'headline',gutters:false"
         style="width: 100%; height: 100%; margin: 0;">
      <div id="header" 
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'top'"
           style="margin-left: auto; margin-right: auto; text-align: center;">
        Garrett County WebMap &#045; Printable Map
        <div id="subheader">PDF or JPG</div>
        <div id="instxns">
          Start by turning off layers you don't want to print. Give the map a meaningful title, and then click &#8220;Prep Map&#8221;. When the map is ready to print the button will say &#8220;printout&#8221;. Click that to open the map in a new tab or window and print or save your map.</div>
      </div>
      <div id="map" class="shadow" 
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'center'">
        <div id="geosearch"></div>
        <!-- drop shadow divs -->
        <div id="ds">
          <div id="ds-h">
            <div class="ds h1 o1"></div>
            <div class="ds h2 o2"></div>
            <div class="ds h3 o3"></div>
            <div class="ds h4 o4"></div>
            <div class="ds h5 o5"></div>
          </div>
          <div id="ds-r">
            <div class="ds v1 o1"></div>
            <div class="ds v2 o2"></div>
            <div class="ds v3 o3"></div>
            <div class="ds v4 o4"></div>
            <div class="ds v5 o5"></div>
          </div>
        </div> <!-- end drop shadow divs -->

      </div>
      <div data-dojo-type="dojox.layout.ExpandoPane" title="Printing Options"
             data-dojo-props="region:'right', design:'footer', gutters:true, liveSplitters:true, startExpanded:true, easeIn:'expoInOut', easeOut:'expoInOut', duration:600" 
             style="width:260px;">
        <div id="rightPane"
             data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props="region:'right'">
          <div id="mapTitleDiv">
            <label>Map Title</label>
            <input id="mapTitle" name="mapTitle" data-dojo-type="dijit/form/TextBox" style="width: 10.4em; margin-left: 0.2em;" type="text">
            <button id="prepMap" data-dojo-type="dijit/form/Button">Prep Map</button>
            <button id="clearGraphics" data-dojo-type="dijit/form/Button">Clear Graphics</button>
          </div>

          <div id="printButton"></div>
          <hr />

          <div id="drawingWrapper">
            Add some graphics:
            <div id="point" class="drawing">Point</div>
            <div id="freehandpolyline" class="drawing">Freehand Polyline</div>
            <div id="freehandpolygon" class="drawing">Freehand Polygon</div>
            <div id="circle" class="drawing">Circle</div>
          </div>
          <button id="textLabel" data-dojo-type="dijit/form/Button">Text Label</button><br />
          <input type="checkbox" id="includeCoords" checked data-dojo-type="dijit.form.CheckBox">
          <label for="includeCoords">Include Coordinates?</label>
          <div id="coordsinfo"></div>
          <hr />
          <div id="layerToggle">
            Toggle Layers: <br />
            <!-- checkbox and labels inserted programmatically -->
          </div>
          <div id="legendDiv"></div>
        </div>
      </div><!-- end of Expando Pane-->
    </div>
  </body>
</html>
1

I tested the sample application with latest version of ArcGIS JavaScript API i.e. 3.11 and was able to print text element. So please update the version of ArcGIS JavaScript API to 3.11 and correct the following line:

var font = new Font("20px", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLDER,"Ariel");

I tested the sample application with latest version of ArcGIS JavaScript API i.e. 3.11 and was able to print text element. So please update the version of ArcGIS JavaScript API to 3.11 and correct the following line:

var font = new Font("20px", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLDER,"Ariel");

Also refer following link that state "now print a map containing a graphic having attributes and a Text Symbol as its symbol" using ArcGIS JavaScript API 3.11.

https://developers.arcgis.com/javascript/jshelp/whats_new.html

  • Hey thanks so much for this. I was really pulling my hair out and the fix was so simple. Much appreciated! Wish I had extra upvotes but I can only make it go up by one. – jbchurchill Nov 6 '14 at 13:43
  • This version (4) of the fiddle has your fix. jsfiddle.net/jbchurchill/r7d1dw6t/4 – jbchurchill Nov 6 '14 at 13:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.