Print the current map view

2594
6
Jump to solution
07-23-2020 09:39 AM
AndrewMurdoch1
Occasional Contributor II

Good Day

Without using the Print Widget, is there a way to print the current map view?  I was thinking about converting the map to a canvas or SVG and then sending that to a new tab, and calling window.print().  I tried playing with this idea yesterday, but couldn't get it to work, ideally we want a small button on the map that looks like the other widget buttons.

Thanks

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
AndrewMurdoch1
Occasional Contributor II

I got this working, must have forgotten to update this thread.  We actually ran into a new issue where the polylines don't have colour but the points do:

https://community.esri.com/thread/257431-printtemplate-polylines-show-with-no-colour-points-are-fine 

Not really sure what's going on, I can't see anywhere to set a colour on the Feature Layer.  As for this thread it's completed as I can the Print Task generating a printable document.

Thanks

View solution in original post

6 Replies
Noah-Sager
Esri Regular Contributor

We have three printing options with the ArcGIS API for JavaScript: Print widget, PrintTask, and MapView.takeScreenshot(). If you don't want to use the Print widget, the other two are worth looking into.

Here is an example of using PrintTask:

https://codepen.io/noash/full/QWyoNRb 

Here is an example of using takeScreenshot() with a 3D SceneView:

Take a screenshot of a SceneView | Sample | ArcGIS API for JavaScript 4.16 

AndrewMurdoch1
Occasional Contributor II

Thank you for the suggestions, I'll take a look

Egge-JanPollé1
MVP Regular Contributor

Hi Andrew Murdoch,

I am triggered by the last part of your question:

ideally we want a small button on the map that looks like the other widget buttons.

Yes, you can add your own custom button, with a look and feel similar to the other widget buttons if you choose one from Esri Icon Font (Calcite theme) | ArcGIS API for JavaScript 4.16 

Below you will find a little sample app showing how this should work:

  1. Create a <div> with your button - I have chosen the printer icon: <div id="myOwnPrinterButton" class="esri-component esri-widget--button esri-widget" role="button"><span title="This looks like a printer button" id="custom-printer" class="esri-icon esri-icon-printer"></span></div>
  2. Add this to the view.ui like this: view.ui.add(["myOwnPrinterButton"], "top-right");
  3. Add an event listener: printerButton.addEventListener("click", printerAction);
  4. Call a function

In my case the function is just a simple alert. It is up to you to implement the full printing functionality that you are describing in your question.

Here you can see it working in CodePen:

ArcGIS JavaScript Tutorial - Add your own custom button 

HTH,

Egge-Jan

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: Add your own custom button</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  
    <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.16/"></script>
  
  <script>  
    require([
      "esri/Map",
      "esri/views/MapView",
    ], function(Map, MapView) {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80500, 34.02700],
        zoom: 13
      });

      view.ui.add(["myOwnPrinterButton"], "top-right");
      var printerButton = document.getElementById("myOwnPrinterButton");
      printerButton.addEventListener("click", printerAction);

      function printerAction(evt) {
        window.alert("Functionality to be implemented")
      }
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
  <div id="myOwnPrinterButton" class="esri-component esri-widget--button esri-widget" role="button"><span title="This looks like a printer button" id="custom-printer" class="esri-icon esri-icon-printer"></span></div>
</body>
</html>
AndrewMurdoch1
Occasional Contributor II

Thanks for the assistance, and especially thanks for the code sample!  I was having problems finding documentation related to yesterday, but I'll implement you ideas.

Egge-JanPollé1
MVP Regular Contributor

Hi Andrew Murdoch‌,

OK - better late than never :)

Here is a fully working example: ArcGIS JavaScript Tutorial - Take a screenshot of a MapView 

I did take the little Printer button from my previous post and I did add the actual functionality to create and show the screenshot and to offer the possibility to download the image. Yes, I actually stripped down the example mentioned by Noah Sager‌ to something I could understand and handle :) Much less elaborate, but doing what you need: Print the current map view.

This sample will not work in IE (nor in Legacy Edge), but it should be fine in Chrome and Firefox.

What do you think?

(To get the code: follow the link and hit Ctrl+U to access the html file, with all the js and css included)

BR,

Egge-Jan

P.S. If you think your question has been properly answered, you might close the call by marking one of the answers as the correct one. In this way it will be easier for other community members to find the right answer in case they have the same question :)

AndrewMurdoch1
Occasional Contributor II

I got this working, must have forgotten to update this thread.  We actually ran into a new issue where the polylines don't have colour but the points do:

https://community.esri.com/thread/257431-printtemplate-polylines-show-with-no-colour-points-are-fine 

Not really sure what's going on, I can't see anywhere to set a colour on the Feature Layer.  As for this thread it's completed as I can the Print Task generating a printable document.

Thanks