letmaik/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>GridLayer Test</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        html, body, #map {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>

    <script>
var map = new L.Map('map', {  center: [10, 0], zoom: 2});

var tiles = new L.GridLayer();
tiles.createTile = function(coords) {
  var tile = L.DomUtil.create('canvas', 'leaflet-tile');
  var ctx = tile.getContext('2d');
  var size = this.getTileSize()
  tile.width = size.x
  tile.height = size.y

  // calculate projection coordinates of top left tile pixel
  var nwPoint = coords.scaleBy(size)

  // calculate geographic coordinates of top left tile pixel
  var nw = map.unproject(nwPoint, coords.z)

  ctx.fillStyle = 'white';
  ctx.fillRect(0, 0, size.x, 50);
  ctx.fillStyle = 'black';
  ctx.fillText('x: ' + coords.x + ', y: ' + coords.y + ', zoom: ' + coords.z, 20, 20);
  ctx.fillText('lat: ' + nw.lat + ', lon: ' + nw.lng, 20, 40);
  ctx.strokeStyle = 'red';
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(size.x-1, 0);
  ctx.lineTo(size.x-1, size.y-1);
  ctx.lineTo(0, size.y-1);
  ctx.closePath();
  ctx.stroke();
  return tile;
}

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   attribution: 'Map data &copy; <a href="http://www.osm.org">OpenStreetMap</a>'
}).addTo(map)

tiles.addTo(map)
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>GridLayer Test</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
	<style>
	body {
	padding: 0;
	margin: 0;
	}
	html, body, #map {
	height: 100%;
	width: 100%;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>

	<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>

	<script>
	var map = new L.Map('map', { center: [10, 0], zoom: 2});

	var tiles = new L.GridLayer();
	tiles.createTile = function(coords) {
	var tile = L.DomUtil.create('canvas', 'leaflet-tile');
	var ctx = tile.getContext('2d');
	var size = this.getTileSize()
	tile.width = size.x
	tile.height = size.y

	// calculate projection coordinates of top left tile pixel
	var nwPoint = coords.scaleBy(size)

	// calculate geographic coordinates of top left tile pixel
	var nw = map.unproject(nwPoint, coords.z)

	ctx.fillStyle = 'white';
	ctx.fillRect(0, 0, size.x, 50);
	ctx.fillStyle = 'black';
	ctx.fillText('x: ' + coords.x + ', y: ' + coords.y + ', zoom: ' + coords.z, 20, 20);
	ctx.fillText('lat: ' + nw.lat + ', lon: ' + nw.lng, 20, 40);
	ctx.strokeStyle = 'red';
	ctx.beginPath();
	ctx.moveTo(0, 0);
	ctx.lineTo(size.x-1, 0);
	ctx.lineTo(size.x-1, size.y-1);
	ctx.lineTo(0, size.y-1);
	ctx.closePath();
	ctx.stroke();
	return tile;
	}

	L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: 'Map data © <a href="http://www.osm.org">OpenStreetMap</a>'
	}).addTo(map)

	tiles.addTo(map)
	</script>
	</body>
	</html>