Using getTile core method from CartoDB.js 3.15 and Leaflet Retina detection to retrieve retina tiles from CARTO Maps API.
You can find more details here on how to get your retina urls. Mind that this only works for anonymous maps since getTiles does not support named maps.
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" /> | |
| <title>Named map test with retina</title> | |
| <style> | |
| html, | |
| body { | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| position: relative; | |
| } | |
| #map { | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| </style> | |
| <!-- layer SQL --> | |
| <script type="text/sql" id="sql"> | |
| SELECT * FROM ne_10m_populated_places_simple | |
| </script> | |
| <!-- layer CartoCSS style --> | |
| <style type="text/cartocss" id="cartocss"> | |
| #ne_10m_populated_places_simple{ marker-fill-opacity: 0.6; marker-line-color: #FFF; marker-line-width: 0; marker-line-opacity: | |
| 1; marker-placement: point; marker-multi-policy: largest; marker-type: ellipse; marker-fill: #FFCC00; marker-allow-overlap: | |
| true; marker-clip: false; marker-comp-op: multiply; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='map'></div> | |
| <!-- Lefalet and core CartoDB.js libraries --> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> | |
| <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> | |
| <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.core.js"></script> | |
| <script> | |
| function run() { | |
| // Create a map | |
| var map = L.map('map', { | |
| center: [0, 0], | |
| zoom: 1, | |
| minZoom: 1, | |
| maxZoom: 11 | |
| }); | |
| // Adding the basemap with retina detection | |
| L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', { | |
| detectRetina: true, | |
| maxZoom: 18, | |
| attribution: '©<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, ©<a href="https://carto.com/attribution">CARTO</a>' | |
| }).addTo(map); | |
| // Define a CartoDB Maps API source | |
| var cartoDBLayerSource = { | |
| user_name: 'jsanzacademy1', | |
| type: 'cartodb', | |
| sublayers: [{ | |
| sql: document.getElementById('sql').innerHTML, | |
| cartocss: document.getElementById('cartocss').innerHTML | |
| }] | |
| }; | |
| // Configure Tiles | |
| cartodb.Tiles.getTiles(cartoDBLayerSource, function (tilesUrl, error) { | |
| if (tilesUrl == null) { | |
| console.log("error: ", error.errors.join('\n')); | |
| return; | |
| } else { | |
| var tiles = tilesUrl.tiles[0]; | |
| if (L.Browser.retina) { | |
| console.log('Retina browser detected'); | |
| // Remove layer index | |
| tiles = tiles.replace('/0/{z}/','/{z}/'); | |
| // Add retina factor | |
| tiles = tiles.replace('{y}.png', '{y}{r}.png'); | |
| } else { | |
| console.log('Fetching normal tiles'); | |
| } | |
| console.log(tiles); | |
| L.tileLayer(tiles, { | |
| maxZoom: 18 | |
| }).addTo(map); | |
| } | |
| }); | |
| } | |
| // in case the document is already rendered | |
| if (document.readyState != 'loading') run(); | |
| // modern browsers | |
| else if (document.addEventListener) document.addEventListener('DOMContentLoaded', run); | |
| // IE <= 8 | |
| else document.attachEvent('onreadystatechange', function () { | |
| if (document.readyState == 'complete') run(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |