1

I'm using imageOverlay in Leaflet 1.0.0.

When zooming in, the image is resampled and becomes progressively "blurrier" the further you zoom in. (Leaflet is being helpful by interpolating pixel values as it zooms.)

I would like to avoid this resampling so that the image layer gets "blockier" as you zoom in. That is, it gives the impression to the user of the pixels being progressively enlarged as they zoom in.

I can see no way in the Leaflet API to control this. I can work around it somewhat by making very large images but this is costly and will break down at high zoom levels in any case.

Is it possible to do what I want either via the Leaflet API or some other method?

Stuart Allen
  • 1,537
  • 1
  • 10
  • 19

2 Answers2

4

The "blurrying" of the image is not due to Leaflet, it's due to your web browser. When an image, any image, is loaded in a webpage at a size different than the image's pixel dimensions, the browser must rescale it, with a scaling algorithm of its choosing.

Some browsers let web authors tweak this behaviour through the image-rendering CSS rule.

You can apply CSS rules to all L.ImageOverlays with something like:

.leaflet-layer-image {
   image-rendering: crisp-edges
}

As of Leaflet 1.0.2, it is not yet possible to specify CSS classes for specific ImageOverlays.

Beware of varying browser support. Support for the image-rendering CSS rule varies wildly between different web browsers.

Solutions like the one described in the question Using nearest-neighbor with CSS zoom on canvas (and img) are not really applicable here, as Leaflet relies heavily on CSS transforms to set the image size. If you were to use a <canvas>-based technique, it would either break or need to be redrawn at each zoom level change.

(P.S.: If you can find a good reliable cross-browser way to force the downsizing/upsizing algorithm in all major browsers, please make a pull request so that Leaflet can benefit from that)

IvanSanchez
  • 18,272
  • 3
  • 30
  • 45
2

In case anyone is still looking into this, I found a CSS to achieve desired behavious in Leaflet's github, that seem to work in most browsers (the accepted answer did not work for me):

/* Leaflet crispness override */
.leaflet-container .leaflet-overlay-pane svg,
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer {
  max-width: none !important;
  /* Preserve crisp pixels with scaled up images */
  image-rendering: optimizeSpeed;             /* Legal fallback */
  image-rendering: -moz-crisp-edges;          /* Firefox        */
  image-rendering: -o-crisp-edges;            /* Opera          */
  image-rendering: -webkit-optimize-contrast; /* Safari         */
  image-rendering: optimize-contrast;         /* CSS3 Proposed  */
  image-rendering: crisp-edges;               /* CSS4 Proposed  */
  image-rendering: pixelated;                 /* CSS4 Proposed  */
  -ms-interpolation-mode: nearest-neighbor;   /* IE8+           */
}
Honza Dejdar
  • 947
  • 7
  • 19