Fred Campos Fred Campos - 3 months ago 25
CSS Question

Leaflet cluster group background color does not appear in map print export

I have a Leaflet map with a L.markerClusterGroup. It looks like this:

enter image description here

But when printing (to PDF), it looks like this:

enter image description here

Notice the absence of background colour.

The points are created as follow:

L.DivIcon({ html: '<div><span>' + (childCount + tally) + '</span></div>', className: 'marker-cluster' + <my own css>, iconSize: new L.Point(40, 40) });


Where "my own css" are css classes that may be either of following:

background: rgba(255, 0, 192, 0.3); !important;
border: 1px solid #666;


Or

background: rgba(9, 243, 33, 0.6);!important;
border: 1px solid #666;


Anyone else ever had the same issue?

Answer

My problem was bad CSS. background: rgba(255, 0, 192, 0.3); !important; instead of background: rgba(255, 0, 192, 0.3) !important;.

Here's the working CSS:

@media print {

  .my-own-css1, .my-own-css2, {
        -webkit-print-color-adjust: exact !important;         
         background: rgba(255, 0, 192, 0.3) !important;
    }
}