Canvas Tiles

This example uses OpenLayers v4.0.1. The latest is v.

#### 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`.

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.control
,
- ol.layer.Tile
,
- ol.proj
,
- ol.source.OSM
,
- ol.source.TileDebug

Copy Edit
Canvas Tiles Renders tiles with coordinates for debugging. 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: /** @type {olx.control.AttributionOptions} */ ({ collapsible: false }) }), view: new ol.View({ center: ol.proj.transform( [-0.1275, 51.507222], 'EPSG:4326', 'EPSG:3857'), zoom: 10 }) }); <div id="map" class="map"></div>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Canvas Tiles</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.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/v4.0.1/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: /** @type {olx.control.AttributionOptions} */ ({
                collapsible: false
              })
            }),
            view: new ol.View({
              center: ol.proj.transform(
                  [-0.1275, 51.507222], 'EPSG:4326', 'EPSG:3857'),
              zoom: 10
            })
          });
        </script>
      </body>
    </html>