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/v4.6.4/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src=""></script>
    <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var osmSource = new ol.source.OSM();
      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: osmSource
          }),
          new ol.layer.Tile({
            source: new ol.source.TileDebug({
              projection: 'EPSG:3857',
              tileGrid: osmSource.getTileGrid()
            })
          })
        ],
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions: {
            collapsible: false
          }
        }),
        view: new ol.View({
          center: ol.proj.transform(
              [-0.1275, 51.507222], 'EPSG:4326', 'EPSG:3857'),
          zoom: 10
        })
      });
    </script>
  </body>
</html>