Retina display support?

[chriszrc]

When I use the svg renderer, all the geometries look crisp on my retina display. But if I switch to canvas, the points and lines all look a little blurry. Is there any established method for handling this? This is at normal zoom levels, not overzooming.

My understanding is that the pixel resolution of the canvas has to be doubled for retina. Taking a very uneducated look at the code, I could see this:

L.Canvas.Tile = L.Canvas.extend({

    initialize: function (tileCoord, tileSize, options) {
        L.Canvas.prototype.initialize.call(this, options);
        this._tileCoord = tileCoord;
        this._size = tileSize;

        this._initContainer();
        this._container.setAttribute('width', this._size.x);
        this._container.setAttribute('height', this._size.y);

And if I change the width/height attribute for the container to :

    this._container.setAttribute('width', this._size.x*2);
    this._container.setAttribute('height', this._size.y*2);

Everything looks very crisp indeed! But also now the coordinates are off. Does anyone know the full list (or right way) to make this modification? Increase the tile size of the protobuf tiles? Then change the tilesize of the gridlayer? So far anything I've tried hasn't worked.

[IvanSanchez]

No, there is no support for this right now. This makes for a great feature request, though.

I think that the easiest way to try and implement this would be to hack the tile size initialization at https://github.com/Leaflet/Leaflet.VectorGrid/blob/13315057d285bfa5d5cb74d2abb442e925825b55/src/Leaflet.VectorGrid.js#L61

With a bit of luck, just multiplying that value by window.devicePixelRatio might just work.

[chriszrc]

Hmm,

Just making tilesize = {x:512,y:512} has the same effect as my earlier experiment, it shrinks the tiles (and they do look crisp shrunken), but they're in the wrong places. My rough understanding of canvas is that in order to get this to work, the context of the canvas needs to get scaled:

https://www.html5rocks.com/en/tutorials/canvas/hidpi/

But I don't see where to get the canvas context-

[gee1k]

@chriszrc Hello, this is my approach.

[gee1k]

No matter how many times the canvas is scaled, the css size of the canvas is finally set to tilesize.

[chriszrc]

@gee1k nice, thanks for sharing, I'll give it a try-