topic Re: Print the current map view in ArcGIS JavaScript Maps SDK Questions

Print the current map view

AndrewMurdoch1 — Thu, 23 Jul 2020 16:39:55 GMT

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

Re: Print the current map view

Noah-Sager — Thu, 23 Jul 2020 16:54:15 GMT

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

Re: Print the current map view

Egge-Jan_Pollé — Fri, 10 Dec 2021 20:58:19 GMT

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:

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>
Add this to the view.ui like this: view.ui.add(["myOwnPrinterButton"], "top-right");
Add an event listener: printerButton.addEventListener("click", printerAction);
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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Print the current map view

AndrewMurdoch1 — Thu, 23 Jul 2020 17:38:35 GMT

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.

Re: Print the current map view

AndrewMurdoch1 — Thu, 23 Jul 2020 17:38:51 GMT

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

Re: Print the current map view

Egge-Jan_Pollé — Wed, 26 Aug 2020 20:54:47 GMT

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 🙂

Re: Print the current map view

AndrewMurdoch1 — Wed, 26 Aug 2020 21:10:31 GMT

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