Support for retina layers

[jmontaca]

Hi All

I have been using the plugin for a year now and it works pretty good, but we have been wondering if it supports high definition imagery, according to this bing documentation (https://blogs.bing.com/maps/2015/02/12/high-ppi-maps-now-available-in-the-bing-maps-ajax-control) it is supported by their native SDK but not sure if there is a way we can use it on the plugin. I have used the default leaflet option detectRetina true but it seems the imagery is not being loaded on high res.

[gmaclennan]

I don't see any options for high-PPI in the REST API docs, so I don't think this is possible. If you find anything, please post here: https://msdn.microsoft.com/en-us/library/ff701713.aspx

[jmontaca]

HI @gmaclennan thanks for your quick reply. Yep i haven´t found anything useful on the documentation for the high res imagery. I´m trying to get some help from Bing support team and determine if it´s possible at all or not.

Thanks, i will post my findings

[wavded]

I was curious about the same thing so I reached out to a Bing rep and received this response.

You’d append dpi=d1&device=mobile to the map tile URL to get the high dpi tiles and then shrink 4 tiles on your side to create the 1 tile. This is why when usingdpi=d1&device=mobile the labels look so large when rendered at native resolution. In other words, you need to request 4 tiles (using dpi=d1&device=mobile) to create 1 hiDPI map tile, you’d do the shrinking on your side. That’s our supported approach to this.

Haven't played around with an implementation yet.

[gmaclennan]

@wavded thanks for reporting back on your findings. It would be great to support this in this module, I won't have time to look at this any time soon, but I would welcome any PRs.

[wavded]

FWIW, OL added support in this commit: https://github.com/openlayers/openlayers/pull/6077/files I played around with it a little bit and although I could get the retina tiles and make them 128x128, the grid seemed to be off and I couldn't figure out how to get it back in alignment. I may try again later, but if anyone else has some ideas, go for it.

[znebby]

Would be awesome to get this supported.

[TNLuke]

@wavded, are you able to share the changes you made to grab the retina tiles and shrink them down? I'd like to help get this supported but it would be nice to have a starting point.

[wavded]

@TNLuke unfortunately no, in hindsight I should have made a PR

[TNLuke]

No worries! Thanks for playing though, at least we know it's possible to get that far.

[johnd0e]

In other words, you need to request 4 tiles (using dpi=d1&device=mobile) to create 1 hiDPI map tile, you’d do the shrinking on your side.

L.TileLayer has highdpi handling implemented.
All you need - add L.TileLayer.prototype.initialize.call(this, null, options); instead of just L.setOptions here:

leaflet-bing-layer/leaflet-bing-layer.js

Line 92 in 1d5a153

options = L.setOptions(this, options)

P.S.
Well, probably a little refactoring required, as L.TileLayer.initialize also includes some more code:

leaflet-bing-layer/leaflet-bing-layer.js

Lines 116 to 119 in 1d5a153

	// for https://github.com/Leaflet/Leaflet/issues/137
	if (!L.Browser.android) {
	this.on('tileunload', this._onTileRemove)
	}

[johnd0e]

Implemented in other project: shramov/leaflet-plugins@2eb1b0a