Leaflet polygon fill pattern not visible in screenshot taken with simpleMapScreenshoter plugin

[Pavanyogi121]

We are using Leaflet to display polygons with fill patterns using the leaflet-polygon.fillPattern.js plugin. Additionally, we are using the leaflet-simple-map-screenshoter.js plugin to allow users to take screenshots of the map.

The problem is that the fill pattern image is not visible in the screenshot taken with the simpleMapScreenshoter plugin. We have tried using both JPEG and PNG images as fill patterns, but the result is the same.

We have made sure that the fill pattern image URL is accessible from the same domain as the map and that the image is loaded before taking the screenshot. We have also tried setting the crossOrigin property of the image to anonymous as suggested in some other posts, but it did not help.

Are there any additional steps we need to take to make the fill pattern visible in the screenshot taken with the simpleMapScreenshoter plugin? Any help or advice would be appreciated.

The related codepen is here: https://codepen.io/pavanyogi/pen/MWqEgea

Here are two images, with the screenshot on the right.

so thread link : https://gis.stackexchange.com/questions/454603/leaflet-polygon-fill-pattern-not-visible-in-screenshot-taken-with-simplemapscree

[grinat]

First problem in svg pattern generation algo, at https://github.com/lwsu/leaflet-polygon-fillPattern/blob/gh-pages/leaflet-polygon.fillPattern.js#L41-L45

                if (typeof(options.fill) == "string" &&
                        options.fill.match(/^url\(/)) {
                    // here what we add
                    this.__fillPattern(layer);
                }

https://github.com/lwsu/leaflet-polygon-fillPattern/blob/gh-pages/leaflet-polygon.fillPattern.js#L65

            var _ref_id = _img_url + (Math.random() * Math.pow(10, 17) + Math.random() * Math.pow(10, 17));

you need to overfwrite __fillPattern method and remove _img_url url from svg id generation mechanism.

Second, used pattern is url. If you use base64, all work fine.

Svg code now, with problems: Screenshot: same as post - empty polygons.

Code after replace svg pattern id and url by base64: Screenshot: polygon pattern exist:

Code after replace only id in svg pattern: Screenshot: poly patterns not found:

[Pavanyogi121]

Thank you very much. As suggested, I made changes in the plugin code and now it is working fine. The change commit is here : https://github.com/pavanyogi/leaflet-polygon-fillPattern/commit/d9f3936c304406f74812528d8edbfa2d3ce7197f

I made following changes.

// var _ref_id = _img_url + (Math.random() * Math.pow(10, 17) + Math.random() * Math.pow(10, 17));
var _ref_id = (Math.random() * Math.pow(10, 17) + Math.random() * Math.pow(10, 17));

// _img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', _img_url);
this.__convertImageToBase64(_img_url, _img, this.__setDataUrl);

__convertImageToBase64: function(imgUrl, _img, callback) {
          const image = new Image();
          image.crossOrigin='anonymous';
          image.onload = () => {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.height = image.naturalHeight;
            canvas.width = image.naturalWidth;
            ctx.drawImage(image, 0, 0);
            const dataUrl = canvas.toDataURL();
            callback && callback(dataUrl, _img)
          }
          image.src = imgUrl;
        },
        __setDataUrl: function(dataUrl, _img) {
            _img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', dataUrl);
        }