Index: binary-improvements/webserver/index.html
===================================================================
--- binary-improvements/webserver/index.html	(revision 149)
+++ binary-improvements/webserver/index.html	(revision 150)
@@ -10,6 +10,5 @@
 	<div id="map"></div>
 	<div id="info">
-		MouseCoords: <span id="pos"></span><br/>
-		RegionFile: <span id="regfile"></span>
+		MouseCoords: <span id="pos"></span>
 	</div>
 
Index: binary-improvements/webserver/js/index.js
===================================================================
--- binary-improvements/webserver/js/index.js	(revision 149)
+++ binary-improvements/webserver/js/index.js	(revision 150)
@@ -1,2 +1,7 @@
+var REGIONSIZE = 512;
+var CHUNKSIZE = 16;
+var TILESIZE = 128;
+var MAXZOOM = 4;
+
 SDTD_Projection = {
 	project: function (latlng) {
@@ -19,12 +24,12 @@
 
 var CoordToChunk = function(latlng) {
-	var x = Math.floor(((latlng.lng + 16777216) / 16) - (16777216 / 16));
-	var y = Math.floor(((latlng.lat + 16777216) / 16) - (16777216 / 16));
+	var x = Math.floor(((latlng.lng + 16777216) / CHUNKSIZE) - (16777216 / CHUNKSIZE));
+	var y = Math.floor(((latlng.lat + 16777216) / CHUNKSIZE) - (16777216 / CHUNKSIZE));
 	return L.latLng(y, x);
 }
 
 var CoordToRegion = function(latlng) {
-	var x = Math.floor(((latlng.lng + 16777216) / 512) - (16777216 / 512));
-	var y = Math.floor(((latlng.lat + 16777216) / 512) - (16777216 / 512));
+	var x = Math.floor(((latlng.lng + 16777216) / REGIONSIZE) - (16777216 / REGIONSIZE));
+	var y = Math.floor(((latlng.lat + 16777216) / REGIONSIZE) - (16777216 / REGIONSIZE));
 	return L.latLng(y, x);
 }
@@ -32,4 +37,8 @@
 var FormatCoord = function(latlng) {
 	return Math.abs(latlng.lat)+ (latlng.lat>=0 ? " N" : " S") + " / " + Math.abs(latlng.lng) + (latlng.lng>=0 ? " E" : " W");
+}
+
+var FormatRegionFileName = function(latlng) {
+	return "r." + latlng.lng + "." + latlng.lat + ".7rg";
 }
 
@@ -40,19 +49,93 @@
 }).setView([0, 0], 0);
 
-L.tileLayer('../../map/{z}/{x}/{y}.png?t={time}', {
-	maxZoom: 5,
+var tileLayer = L.tileLayer('../../map/{z}/{x}/{y}.png?t={time}', {
+	maxZoom: MAXZOOM+1,
 	minZoom: 0,
-	maxNativeZoom: 4,
-	tileSize: 128,
+	maxNativeZoom: MAXZOOM,
+	tileSize: TILESIZE,
 	continuousWorld: true,
 	tms: true,
 	unloadInvisibleTiles: true,
 	time: function() { return new Date().getTime(); }
+});
+
+var regionLayer = L.tileLayer.canvas({
+	maxZoom: MAXZOOM+1,
+	minZoom: 0,
+	maxNativeZoom: MAXZOOM+1,
+	tileSize: TILESIZE,
+	continuousWorld: true
+});
+
+regionLayer.drawTile = function(canvas, tilePoint, zoom) {
+	var blockWorldSize = TILESIZE * Math.pow(2, MAXZOOM-zoom);
+	var tileLeft = tilePoint.x * blockWorldSize;
+	var tileBottom = (-1-tilePoint.y) * blockWorldSize;
+	var blockPos = L.latLng(tileBottom, tileLeft);
+	
+	var ctx = canvas.getContext('2d');
+	
+	ctx.strokeStyle = "lightblue";
+	ctx.fillStyle = "lightblue";
+	ctx.lineWidth = 1;
+	ctx.font="14px Arial";
+	
+	var lineCount = blockWorldSize / REGIONSIZE;
+	if (lineCount >= 1) {
+		var pos = 0;
+		while (pos < TILESIZE) {
+			// Vertical
+			ctx.beginPath();
+			ctx.moveTo(pos, 0);
+			ctx.lineTo(pos, TILESIZE);
+			ctx.stroke();
+			
+			// Horizontal
+			ctx.beginPath();
+			ctx.moveTo(0, pos);
+			ctx.lineTo(TILESIZE, pos);
+			ctx.stroke();
+
+			pos += TILESIZE / lineCount;
+		}
+		ctx.fillText(FormatRegionFileName(CoordToRegion(blockPos)), 4, TILESIZE-5);
+	} else {
+		if ((tileLeft % REGIONSIZE) == 0) {
+			// Vertical
+			ctx.beginPath();
+			ctx.moveTo(0, 0);
+			ctx.lineTo(0, TILESIZE);
+			ctx.stroke();
+		}
+		if ((tileBottom % REGIONSIZE) == 0) {
+			// Horizontal
+			ctx.beginPath();
+			ctx.moveTo(0, TILESIZE);
+			ctx.lineTo(TILESIZE, TILESIZE);
+			ctx.stroke();
+		}
+		if ((tileLeft % REGIONSIZE) == 0 && (tileBottom % REGIONSIZE) == 0) {
+			ctx.fillText(FormatRegionFileName(CoordToRegion(blockPos)), 4, TILESIZE-5);
+		}
+	}
+
+	var pos = tileLeft;
+
+}
+
+var baseLayers = {
+    //"Map": tileLayer
+};
+
+var overlays = {
+    "Region files": regionLayer
+};
+
+tileLayer.addTo(map);
+L.control.layers(baseLayers, overlays, {
+	collapsed: false
 }).addTo(map);
 
-
 map.on('mousemove', function(e) {
-	var rf = CoordToRegion(e.latlng);
 	L.DomUtil.get('pos').textContent = FormatCoord(e.latlng);
-	L.DomUtil.get('regfile').textContent = "r." + rf.lng + "." + rf.lat + ".7rg";
 });