Contrasting layer in JavaScript / HTML

Question

Base of my web application is a map, consisting of a lot of pale tiles. So result of printing this page using B/W printer is very grievous.

Is there any possibility to lay on some layer on the map, which will make it more contrasting?

(Replacing tiles in print mode is a bad idea, yep).

score 0 · Answer 1 · edited May 23 '17 at 11:49

You have two routes. First is adding a print stylesheet as follows:

<link rel="stylesheet" href="printstyle.css" media="print" />

or, in your regular css file with no media declaration,

@media print { 
    #my-map-element {
        display: none; /* just for an example */
    }
}

The other way is to call a javascript function when print event occurs. However, this is only supported by Firefox 6+ and IE, as far as I know:

window.onbeforeprint = function() { /* ... */ }

If you are generating the print event from the javascript, you can work around the browser compatibility problems with the following code:

(function(){

  // make a copy of the native window.print
  var _print = this.print;

  // create a new window.print
  this.print = function () {
    // if `onbeforeprint` exists, call it.
    if (this.onbeforeprint) onbeforeprint(this); 
    // call the original `window.print`.
    _print(); 
    // if `onafterprint` exists, call it.
    if (this.onafterprint) onafterprint(this);
  }

}())

(source: https://stackoverflow.com/a/3339821/300011 )

Contrasting layer in JavaScript / HTML

1 Answers1