Giters

rowanwins / leaflet-easyPrint

A leaflet plugin which adds an icon to print the map - Demo @ http://rowanwins.github.io/leaflet-easyPrint/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Troubles with GoogleMutant

scaddenp opened this issue · comments

commented

If I am using GoogleMutant to provide googlemaps background, then printing fails, Get:
"Error while reading CSS rules from http://fonts.googleapis.com/css?family=Roboto:300,400,500,700 SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules"

followed by Print operation fails

Ideas? Or is printing from google just impossible.

commented

Hi @scaddenp

Yeah CORS is the thing plaguing most of the issues in this repo.

In terms of font's probably the simplest solution is to download the fonts and host them as static assets as part of the site.

Cheers
Rowan

commented
commented

I have the same problem, i tried download the fonts, but nothing happens, tried to force the stylesheet local to substitute the font from google, but without success. :(

commented

I abandoned hope and went with leaflet.browser.print instead. Suboptimal but works.

commented

Im getting this error on leaflet.browser.print too how you manage it?

commented

well browser.print is effectively pretty much Ctrl-P on a your leaflet tab. Have your registered the layer. Are you sure you havent got residual code there? I have it activated from external button with:
map.printControl.print(L.control.browserPrint.mode.auto());

And I register it with
L.control.browserPrint({
title:'Print map',
documentTitle:''
}).addTo(mc.map);
L.Control.BrowserPrint.Utils.registerLayer(
L.GridLayer.GoogleMutant,
"L.GridLayer.GoogleMutant",
function (layer,utils) {
return L.gridLayer.googleMutant(layer.options);
}
);
L.Control.BrowserPrint.Utils.registerLayer(
L.esri.ImageMapLayer, "L.esri.ImageMapLayer",
function(layer, utils) {
return L.esri.ImageMapLayer(layer.options);
}
);
I remember updating GoogleMutant around the time I worked with this but I have definitely not modified code for browserPrint.

commented

I dont see any sign of you registering the googleMutant layer. it wont work unless you do (it only pre-registers a little no. of layer types). See the browserprint docs. I dont think is the appropriate place to browserprint.

commented

i was trying like that

<script type="module">

    var map;
    //Mapa
    var googleStreets = L.gridLayer.googleMutant({
        maxZoom: 20,
        type: 'roadmap',
    });
    map = L.map('mapid',{zoomControl : false}).setView(['-15.792253570362446',
        '-59.63378906250001'], 3).addLayer(googleStreets);
    //Escala do mapa
    L.control.scale({position: 'bottomright'}).addTo(map);

    L.control.browserPrint({
        documentTitle: "printImage",
        printModes: [
            L.control.browserPrint.mode.auto("Download PNG")
        ]
    }).addTo(map);
    //pq nao aparece
    window.map = map;
</script>

<script>
    window.print = function () {
        return domtoimage
            .toPng(document.querySelector(".grid-print-container"))
            .then(function (dataUrl) {
                var link = document.createElement('a');
                link.download = map.printControl.options.documentTitle || "exportedMap" + '.png';
                link.href = dataUrl;
                link.click();
            });
    };
</script>
commented

Ok thank you :D

commented