nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Print Map with InfoTemplate/Popup

HenryKo2

Hi, in ArcGIS API for JavaScript v3, is it possible to print a map that has Popup or InfoTemplate being displayed?

For example, in here, popups can show when clicked on the map:

ArcGIS API for JavaScript Sandbox

But how can I print the map including the popup?

I tried the digit-print widget but no luck:

ArcGIS API for JavaScript Sandbox

I know that a screen-capture will work, but it won't have the usual things such as legends, titles... etc.

Trouver plus de publications taguées avec

Accepted answers

HenryKo2

In the end, I got it working as follows:

All the "popup" / "InfoWindow" was implemented as good old plain HTML DIV elements.
I print these DIV elements using the html2canvas JavaScript library. They are printed as HTML canvas.
I print the map using the standard ArcGIS for Server print API. The map is printed as HTML canvas.
Finally, I "merge" the two printed HTML canvases as one PNG image.

(I could print everything using the html2canvas library but there were some weird issues).

Hope it helps.

All comments

HenryKo2

With the other canvas/node, I firstly set the background-color to rgba(254, 254, 254, 1.0) in CSS as a hack to flag that the pixels are meant to be transparent (so the map below it can show through).

When I merge the map and other canvas together, I manually loop through the pixels to find (254, 254, 254, 1.0) pixels and then set these to real transparent pixels (i.e. a value is zero).

mergeCanvases: function(mapCanvas, otherCanvas, mapNode, otherNode) {
    console.log("Merging my canvas on top of map canvas.");

    var srcRect = otherNode.getBoundingClientRect();
    var destRect = mapNode.getBoundingClientRect();

    this.maskContainerBackgroundPixels(otherCanvas, srcRect);

    var mapCanvasContext = mapCanvas.getContext("2d", {
        alpha: true
    });

    // Workaround for different screen resolutions.
    mapCanvasContext.drawImage(otherCanvas, 0, 0, srcRect.width * window.devicePixelRatio, srcRect.height * window.devicePixelRatio, 0, 0, destRect.width, destRect.height);
},

// Use flag of RGB of (254, 254, 254) to pretend it is "transparent" (so the map below it can show through). Using CSS transparency didn't work.
maskContainerBackgroundPixels: function(otherCanvas, rect) {
    console.log("Masking pixels.");

    var otherContext = otherCanvas.getContext("2d");

    // Manually set the container background background pixels to transparent.
    var canvasImageData = otherContext.getImageData(0, 0, rect.width * window.devicePixelRatio, rect.height * window.devicePixelRatio);
    for (var i = 0; i < canvasImageData.data.length; i += 4) {
        var r = canvasImageData.data[i];
        var g = canvasImageData.data[i + 1];
        var b = canvasImageData.data[i + 2];
        var a = canvasImageData.data[i + 3];

        // We know that rgb(254, 254, 254) need to be set to transparent.
        if (r == 254 && g == 254 && b == 254 && a == 255) {
            canvasImageData.data[i] = r;
            canvasImageData.data[i + 1] = g;
            canvasImageData.data[i + 2] = b;
            canvasImageData.data[i + 3] = 0;
        }
    }

    // The container background is now transparent so the map beneath can show through.
    otherContext.putImageData(canvasImageData, 0, 0);
},

/* In CSS set the other container background to rgba(254, 254, 254, 1.0) which flags it as 'transparent' pixel. */
.otherContainer {
	/* This is IMPORTANT for printing - these pixels will be masked to transparent when printing. */
	background-color: rgba(254, 254, 254, 1.0);
}

Hope that helps.

GennadiiPrykhodko

@HenryKo2 - Could you share a code example of your work around? I am trying to do the exact same thing. I have been able print pop-up and the map separately, but I am struggling to merge them together.

HenryKo2

In the end, I got it working as follows:

All the "popup" / "InfoWindow" was implemented as good old plain HTML DIV elements.
I print these DIV elements using the html2canvas JavaScript library. They are printed as HTML canvas.
I print the map using the standard ArcGIS for Server print API. The map is printed as HTML canvas.
Finally, I "merge" the two printed HTML canvases as one PNG image.

(I could print everything using the html2canvas library but there were some weird issues).

Hope it helps.

Noah Sager

Ryan Libed‌ wrote a great blog post on this subject using the 4x version of the ArcGIS API for JavaScript:

https://community.esri.com/people/RLibed-esristaff/blog/2018/12/20/screenshots-with-the-arcgis-api-for-javascript-html2canvas

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Se connecter
S'inscrire

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.