Old school D3 from simpler times

All examples By author By category About

knownasilya

Full window Github gist

Testing Leaflet.js GridLayer

Testing GridLayer with 1.0 beta.2

<!DOCTYPE html>
<html>  
<head>
    <title>GridLayer Test</title>
    <meta charset="utf-8" />
    <link 
        rel="stylesheet" 
        href="https://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/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://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js">
    </script>

<script>
        var tiles = new L.GridLayer();
		tiles.createTile = function(coords) {
			var tile = document.createElement('canvas'),
			    ctx = tile.getContext('2d');
			tile.width = tile.height = 256;
			ctx.fillStyle = 'white';
			ctx.fillRect(0, 0, 255, 255);
			ctx.fillStyle = 'black';
			ctx.fillText('x: ' + coords.x + ', y: ' + coords.y + ', zoom: ' + coords.z, 20, 20);
			ctx.strokeStyle = 'red';
			ctx.beginPath();
			ctx.moveTo(0, 0);
			ctx.lineTo(255, 0);
			ctx.lineTo(255, 255);
			ctx.lineTo(0, 255);
			ctx.closePath();
			ctx.stroke();
			return tile;
		}
		var map = new L.Map('map', {center: new L.LatLng(50.5, 30.51), zoom: 15, layers: [tiles]});
    </script>
</body>
</html>