Canvas Tiles

Renders tiles with coordinates for debugging.

The black grid tiles are generated on the client with an HTML5 canvas. The displayed tile coordinates are OpenLayers tile coordinates. These increase from bottom to top, but standard XYZ tiling scheme coordinates increase from top to bottom. To calculate the y for a standard XYZ tile coordinate, use -y - 1.

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas Tiles</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/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>

  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      import Map from 'ol/Map.js';
      import View from 'ol/View.js';
      import TileLayer from 'ol/layer/Tile.js';
      import {fromLonLat} from 'ol/proj.js';
      import {OSM, TileDebug} from 'ol/source.js';


      var osmSource = new OSM();
      var map = new Map({
        layers: [
          new TileLayer({
            source: osmSource
          }),
          new TileLayer({
            source: new TileDebug({
              projection: 'EPSG:3857',
              tileGrid: osmSource.getTileGrid()
            })
          })
        ],
        target: 'map',
        view: new View({
          center: fromLonLat([-0.1275, 51.507222]),
          zoom: 10
        })
      });
    </script>
  </body>
</html>