Incomplete preview in google chrome

[velocat]

Can you please tell me what could be the problem? The Google Chrome (vers 85.0.4183.121, 64bit) print preview does not display most of the images, such as tiles, markers, etc. In other browsers, everything is ok. Perhaps this is a problem with the configuration of the browser itself? I would very much like to somehow solve this problem, thanks in advance

[Igor-Vladyka]

Hello.

Looks like underlayers is not loaded. What are you using as underlayer? Right now plugin supports only raster layers.

Also, please show how do you configure map and plugin itself.

Regards, Igor

[velocat]

I'm use https://github.com/coryasilva/Leaflet.ExtraMarkers for markers And https://github.com/leaflet-extras/leaflet-providers for tiles

var mymap = L.map('mapid', opts.map); 

var baseLayers = {
    'OpenStreetMap': L.tileLayer.provider('OpenStreetMap.Mapnik'),
    'OpenStreetMap H.O.T.': L.tileLayer.provider('OpenStreetMap.HOT'),
    'OpenTopoMap':  L.tileLayer.provider('OpenTopoMap'),
    'CyclOSM': L.tileLayer.provider('OpenStreetMap.CyclOSM'),
        //other
};

baseLayers['OpenStreetMap'].addTo(mymap);

.....

L.control.browserPrint({
        printModes: [
        L.control.browserPrint.mode.landscape(L._("Landscape")), 
        L.control.browserPrint.mode.portrait(L._("Portrait")), 
        L.control.browserPrint.mode.auto(L._("Auto")), 
        L.control.browserPrint.mode.custom(L._("Select area"))
    ],
}).addTo(mymap);

Markers is a class for leaflet-markers-icon. They use png as a background.

If one would think that the problem is in the marker plugin, then it is not clear why the map tiles are also not displayed?

[Igor-Vladyka]

Hello.

No idea what is going you. Debugging needed. If you can make a simple demo that reproduce the issue, I will take a look. Thanks!

Regards, Igor

[velocat]

The problem with displaying some images is due to the fact that bootstrap is being used. He has styles for @media print that redefine images with a white background and black color. The only way to influence this is to make changes to the css bootstrap file. For example, as you can see above in the picture, the marker icons were not displayed when using the Leaflet Easy button plugin.

In this example, in file bootstrap.css, I simply forbade the application of these rules for markers with a class .extra-marker

@media print{
  *:not(.extra-marker),
  :after:not(.extra-marker),
  :before:not(.extra-marker) {
    color:#000 !important;
    text-shadow:none !important;
    background:0 0 !important;
   -webkit-box-shadow:none !important;
    box-shadow:none!important
}

I hope this helps someone :)

PS I found the way to solve the issue here: https://progi.pro/bootstrap-print-css-udalyaet-cvet-fona-11590430#

[Igor-Vladyka]

@velocat thank you :)