Openlayers with OSM retina tiles: text too small

Question

I'm experimenting with OSM retina tiles and all in all everything works fine. However it seems the captions are just too small. How can I configure the map to render the tiles larger?

Answer 1

512px retina tiles can be used as retina tiles in a 256px tilegrid to give sharper results on a retina device (or when overzoomed on a standard monitor) or as standard 512px tiles in a 512px tilegrid which would produce the same result as magnifying a 256px tile but without the blurring. Run the snippet and go to full page to see the difference between standard and retina when overzoomed. Zoom out to see the magnification effect of using retina tiles in 512px tilegrid.

 var layer = new ol.layer.Tile({ source: new ol.source.OSM() }); var layer2 = new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://tile.osmand.net/hd/{z}/{x}/{y}.png', crossOrigin: null, tilePixelRatio: 2, maxZoom: 19, attributions: ol.source.OSM.ATTRIBUTION, attributionsCollapsible: false }) }); var layer3 = new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://tile.osmand.net/hd/{z}/{x}/{y}.png', crossOrigin: null, maxZoom: 19, tileSize: 512, attributions: ol.source.OSM.ATTRIBUTION, attributionsCollapsible: false }) }); var view = new ol.View({ center: [-6655.5402445057125, 6709968.258934638], zoom: 20, multiWorld: true }); var map1 = new ol.Map({ target: 'Standard', layers: [layer], view: view }); var map2 = new ol.Map({ target: 'Retina', layers: [layer2], view: view }); var map3 = new ol.Map({ target: 'x 2', layers: [layer3], view: view });

 .map { width: 100%; height:400px; } @media (min-width: 800px) {.wrapper { display: flex; }.half { padding: 0 10px; width: 33%; float: left; } }

 <link rel="stylesheet" href="https://openlayers.org/en/v6.3.1/css/ol.css" type="text/css"> <.-- The line below is only needed for old environments like Internet Explorer and Android 4:x --> <script src="https.//cdn.polyfill.io/v2/polyfill.min?js,features=requestAnimationFrame.Element.prototype,classList:URL"></script> <script src="https.//openlayers.org/en/v6.3.1/build/ol.js"></script> <div class="wrapper"> <div class="half"> <h4>Standard</h4> <div id="Standard" class="map"></div> </div> <div class="half"> <h4>Retina</h4> <div id="Retina" class="map"></div> </div> <div class="half"> <h4>x 2</h4> <div id="x 2" class="map"></div> </div> </div>