Has anyone got this to work with GoogleMutant?

[scaddenp]

Having no luck with attempts to register layer. I am wondering if it is possible?

[Igor-Vladyka]

Please provide your code, to check what is wrong.
But it should be as simple as:
L.Control.BrowserPrint.Utils.registerLayer( L.GridLayer.GoogleMutant, "L.GridLayer.GoogleMutant", function(layer, utils) { return L.gridLayer.googleMutant(layer.options); } );

[scaddenp]

My code is:
mc.print = L.control.browserPrint(
{title:mapName,
documentTitle:mapName
}
).addTo(map);
L.Control.BrowserPrint.Utils.registerLayer(
L.gridLayer.googleMutant,
"L.GridLayer.GoogleMutant",
function (layer,utils) {
return L.gridLayer.googleMutant(layer.options);
}
);
which looks right. No errors coming up in console but no google maps either.

[Igor-Vladyka]

Can you provide full standalone example to debug it?

[scaddenp]

Yes, that seems possible. I will see what I can do.

[scaddenp]

okay, here a minimal test html. Obviously, the location of leaflet.browser.print.min.js needs to change and you will need your own google api key. (my key is locked to our servers).

<title>Google print test</title> <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=[Insert your key]&libraries=places"></script> <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script> <script src='https://unpkg.com/leaflet.gridlayer.googlemutant@latest/Leaflet.GoogleMutant.js'></script> <script src="leaflet.browser.print.min.js"></script> <style> #mapid {height:560px} </style>

<script>

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.gridLayer.googleMutant({type:'roadmap'}).addTo(mymap);
    L.control.browserPrint({
        title:'Google print test',
        documentTitle:'printTest'
    }).addTo(mymap);
    L.Control.BrowserPrint.Utils.registerLayer(
        L.gridLayer.googleMutant,
        "L.GridLayer.GoogleMutant",
            function (layer,utils) {
                return L.gridLayer.googleMutant(layer.options);
            }
    );

</script>

[Igor-Vladyka]

I found one problem with empty object layer initialization, it's fixed. Hope it will help.

If not, then sorry, I have no intention to activate billable google map api. But you can help me to fix this problem:

• create separate api key, limited to 'localhost' and a couple of hundreds request per day.
• send this api key to my private email in debug purpose.
• when problem is fixed - you will remore key from your organization credential manager.

Should be no problem for you.

Please let me know if fix works for you and/or if you are willing to provide an api key to debug this problem locally.

[scaddenp]

Ok, tried it but no joy. You could try this instead:
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3.6&sensor=false"></script>
(It is the old style). This loads tiles with watermarks all over them into leaflet plus an alert. However, it might isolate the issue. I dont have access to my organisations credential manager for the api.

[Igor-Vladyka]

Okay, it was so stupid from my side :)

In register layer you have to use instance constructor and not a function.

Here is proper registration (as I wrote in first answer):
L.Control.BrowserPrint.Utils.registerLayer( L.GridLayer.GoogleMutant, "L.GridLayer.GoogleMutant", function (layer,utils) { return L.gridLayer.googleMutant(layer.options); } );

And you have used function as instance mapper.

Regards,
Igor

[Brenokx]

Hi, i'm having this problem when I'm using with domtoimage, have some idea?
here the example:
https://embed.plnkr.co/plunk/c60SyG3FA8HPAqUR

[Brenokx]

I find some workaround, adding encodeURI(), on dom-to-image directly replacing d.src=a with d.src=encodeURI(a)

[Brenokx]

or

    window.print = function () {
        let node = document.querySelector(".grid-print-container");
        return domtoimage
            .toPng(node, { filter: node => { return node.src = encodeURI(node.src); }})
            .then(function (dataUrl) {

                var link = document.createElement('a');
                link.download = map.printControl.options.documentTitle || "exportedMap" + '.png';
                link.href = dataUrl;
                link.click();
            });
    };