[SOLVED] Attribution text not getting captured when using the image of the map canvas Mapbox-GL-JS

Attribution text not getting captured when using the image of the map canvas Mapbox-GL-JS

I am using ESRI basemaps with Mapbox-GL-JS. I am trying to capture a screenshot of the map using the following code:

this.map.getCanvas().toBlob(function (blob) {
   canvasContext.strokeStyle = '#CCCCCC';
   canvasContext.strokeRect(leftPosition, topPosition, width, height);
   var img = new Image();
   img.setAttribute("crossOrigin", "anonymous");
   var srcURL = URL.createObjectURL(blob);
   img.onload = function () {
      canvasContext.drawImage(img, leftPosition, topPosition, width, height);
      URL.revokeObjectURL(srcURL);
   };
   img.src = srcURL;
});

I am not able to figure out why the attribution on the Map is not getting captured in the screenshot. I understand that here I am just trying to get the canvas of the map. I even tried adding text elements to the map canvas and that doesn't work either. I have markers & routes, which get in the image correctly. I also tried using the Mapbox basemap and try the same, but faced the same issue.

Any help is highly appreciated!

Solution

map.getCanvas() will only return the Map's canvas not any of the HTML Elements which sit over the map like the controls, Mapbox logo or attribution text. Sam Murphy has been working on an example showing how to capture the Map including the Logo and Attribution text to an image which you can see at https://github.com/mapbox/mapbox-gl-js/pull/6518/files.

Since we can't easily capture an HTML Element to an image in JavaScript the attribution text is re-created in a canvas drawn into the Image.