L.AwesomeMarkers issue

[CityBelfast]

Describe the bug
We are using L.AwesomeMarkers libray to create custom dynamic marker. But even though those markers are displaying properly on the print map screen it doesn't displaying on the print popup window. see below screenshots.

Marker style on Print Map

Print popup windows doesn't pick up those dynamic markers

Expected behavior

I tried the following code in my application; but it is still not replacing default marker with L.AwesomeMarkers

L.control.browserPrint({ title: "Map Print", documentTitle: "", position: 'topright', closePopupsOnPrint: true,
printModes: [ L.control.browserPrint.mode.landscape(), L.control.browserPrint.mode.portrait()],
manualMode: false
}).addTo(map);

L.BrowserPrint.Utils.registerLayer(L.Marker,
'L.Marker',
function (layer, utils) {
if (layer.options.icon.options.icon == '') {
return L.marker(layer.getLatLng(), { icon: L.AwesomeMarkers.icon({ prefix: layer.options.icon.options.prefix, icon: 'circle', markerColor: layer.options.icon.options.markerColor, iconColor: layer.options.icon.options.iconColor }) });
} else {
return L.marker(layer.getLatLng(), { icon: L.AwesomeMarkers.icon({ prefix: layer.options.icon.options.prefix, icon: layer.options.icon.options.icon, markerColor: layer.options.icon.options.markerColor, iconColor: layer.options.icon.options.iconColor }) });
}
});

Leaflet.awesome-markers
https://github.com/lennardv2/Leaflet.awesome-markers

https://github.com/lennardv2/Leaflet.awesome-markers/blob/2.0/develop/examples/basic-example.html

Desktop (please complete the following information):

• OS: [Windows 10
• Browser [chrome]
• Version [98.0.4758.80 (Official Build) (64-bit)]

[Igor Vladyka]

Hey there.

From what I see here, icon is actually present, but not the styling. Your code approach should be correct.

Can you please create a separate JSBIN or something to debug it? May be helpfull.

[CityBelfast]

Hi there, please see the JS Bin url below.

https://jsbin.com/tarirud/edit?output

[Igor Vladyka]

Hey there.

After debugging I found a problem in: leaflet.awesome-markers.css

/* Retina displays */
@media (min--moz-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx) {
 .awesome-marker {
  background-image: url('images/[e-mail]');
  background-size: 720px 46px;
 }
 .awesome-marker-shadow {
  background-image: url('images/[e-mail]');
  background-size: 35px 16px;
 }
}

basically on print it loads new image for background coloring and browser build in print function blocks the thread for it to finish loading. You need to find a way to preload it (one of the option is to hide it on the page), like

<img src='https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/images/[e-mail]' style='display:none;'/>

I have modified JSBin with this addition.

Cheers

[CityBelfast]

Thank you very much for looking at this issue for me. I really appreciate it.

[Igor Vladyka]

@CityBelfast sorry, forgot to save it :) Here you go, just put it anywhere in the html body.

<img src='https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/images/[e-mail]' style='display:none'/>
<img src='https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/images/[e-mail]' style='display:none'/>

You may still need to test it on different screens (windows/IOS) and maybe add 2 more rows, identical but without @2x

[CityBelfast]

Thanks a lot @Igor-Vladyka -Your solution works perfectly for me. I did it in the following way.

<link rel="preload" as="image" href="~/Scripts/L.Awesome/images/[e-mail]">
<link rel="preload" as="image" href="~/Scripts/L.Awesome/images/[e-mail]">

[CityBelfast]

Hi @Igor-Vladyka , I've noticed one more issue on the map printing popup screen where the L.Awesome marker doesn't show while printing if the bootstrap version is below 4.0. Whereas if we upgrade the bootstrap to version 4 or above then it works as expected. Unfortunately, it's not easy to upgrade our current bootstrap 3.1.1 version to any higher version due to different reasons. Just wondering, is there any other alternative option to print L.Awesome markers on map-printing popup without upgrading bootstrap 3.1.1?

Awesome markers display for printing if Bootstrap version is 4.0 or later

Awesome markers don't display properly if bootstrap version is below 4.0

Could you give me some advice to resolve it without upgrading the bootstrap 3.1.1

[Igor Vladyka]

Hey @CityBelfast . I have done debugging for you, but you may need to start doing it yourself :)
Bootstrap before v4 uses some externall printing styles that override everything.

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; // Black prints faster: h5bp.com/s
        box-shadow: none !important;
        text-shadow: none !important;
    }

What you need to do is to delete them, othervice it will not work as you want it to.
Source file: https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/less/print.less

[CityBelfast]

Hi @Igor-Vladyka Thank you very much. Your advice is really help 👍