Displaying OpenStreetMap Maps on iPhone 4 with Retina Display Using Leaflet

Anyone who, until today, has been able to run a full-screen example of the Leaflet engine on the newest iPhone 4 mobiles, has always received in front of him what OpenStreetMap in the new iPhone 640 × 960 resolution:







As you can see, the vector hypertext (signature for the map) looks much better in quality than the raster text (inscriptions on the map) and the outlines of roads on the map. This is because raster images on the retina display by default consist of 2 × 2 squares of real (physical) pixels — hence, the raster text is angular, the contours of the roads are stepped, and so on.

')

Today, this situation has changed for the better.



Today, mourner has added a javascript written by me to Leaflet, which checks the value of window.devicePixelRatio and launches the use of four times as many as four times smaller (twice in size) map tiles on retinal displays. (Tiles of 256 × 256 are reduced to 128 × 128 conditional pixels, which is 256 × 256 physical pixels of the retinal display.)



My javascript is not set to work by default, but only if the “ detectRetina ” parameter is set to “ true ” when creating the tile layer. The fact is that twice as much clearer inscriptions at the same time become twice as small - not for all layers, this can be convenient.



For example, if a layer of separate labels (for example, localized under the written language of a particular user) lies on top of a layer of unwritten space images or unsigned maps, then you can easily reduce space image tiles (and map tiles, if the contours of the roads do not come out too thin ), increasing their clarity, but do not touch the inscriptions, if they decrease in two times become too difficult to read, albeit clear.



I hope this improvement in the beautiful mourner card engine will be useful for someone .