XYZ Retina Tiles

retina 3 hidpi 4 xyz 6 maptiler 26 @2x 1 devicePixelRatio 1

Example of Retina / HiDPI mercator tiles (512x512px) available as XYZ.

The ImageTile generates 256x256 pixel tiles by default. If the requested images are larger than that, they will be scaled to fit. This example uses 512x512 tiles, which are scaled to 256x256 for display.

main.js

import Layer from 'ol/layer/WebGLTile.js';
import Map from 'ol/Map.js';
import Source from 'ol/source/ImageTile.js';
import View from 'ol/View.js';
import {useGeographic} from 'ol/proj.js';

useGeographic();

const key = 'Get your own API key at https://www.maptiler.com/cloud/';
const attributions =
  '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';

const map = new Map({
  target: 'map',
  layers: [
    new Layer({
      source: new Source({
        attributions: attributions,
        url:
          'https://api.maptiler.com/maps/outdoor-v2/256/{z}/{x}/{y}@2x.png?key=' +
          key,
      }),
    }),
  ],
  view: new View({
    center: [-112.21324137318899, 36.105337765976756],
    zoom: 13,
  }),
});

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>XYZ Retina Tiles</title>
    <link rel="stylesheet" href="node_modules/ol/ol.css">
    <style>
      .map {
        width: 100%;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>

    <script type="module" src="main.js"></script>
  </body>
</html>

package.json

{
  "name": "xyz-retina",
  "dependencies": {
    "ol": "10.2.1"
  },
  "devDependencies": {
    "vite": "^3.2.3"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}