tmcw/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
  <script src='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.js'></script>
  <link href='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.css' rel='stylesheet' />
  <!--[if lte IE 8]>
    <link href='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.ie.css' rel='stylesheet'>
  <![endif]-->
  <style>
    body { margin:0; padding:0; }
    #map { width:100%; height:400px }
  </style>
</head>
<body>
<div id='map'></div>
<button id='swap'>swap</button>
<button id='xybutton'>x vs y</button>
<script type='text/javascript'>
var map = L.mapbox.map('map', 'tmcw.map-bdzsrzcs');

map.setView([45, -120], 7);

var canvasTiles = L.tileLayer.canvas();

var tiles = [];

function at(px, x, y) {
    return px.data[(x * 4) + (y * 256 * 4)] * 1 +
        px.data[(x * 4) + (y * 256 * 4) + 1] * 2 +
        px.data[(x * 4) + (y * 256 * 4) + 2] * 3;
}

function set(px, x, y, val) {
    px.data[(x * 4) + (y * 256 * 4) + 0] = val;
    px.data[(x * 4) + (y * 256 * 4) + 1] = val;
    px.data[(x * 4) + (y * 256 * 4) + 2] = val;
    px.data[(x * 4) + (y * 256 * 4) + 3] = val;
}

canvasTiles.drawTile = function(canvas, tilePoint, zoom) {
    var ctx = canvas.getContext('2d');
    var url = 'https://a.tiles.mapbox.com/v3/tmcw.dem/{z}/{x}/{y}.png';
    var templated = L.Util.template(url, {
        x: tilePoint.x,
        y: tilePoint.y,
        z: zoom
    });
    var im = new Image();
    im.onload = function() {
        ctx.drawImage(im, 0, 0);
        var px = ctx.getImageData(0, 0, 256, 256);
        function redraw(dir) {
            canvas.width = canvas.width;
            var after = ctx.getImageData(0, 0, 256, 256);
            var last = 0;
            if (xy) {
                for (var y = 1; y < 256; y++) {
                    for (var x = 0; x < 256; x++) {
                        var diff = (at(px, x, y) - at(px, x, y - 1)) * dir;
                        if (diff > 0) {
                            set(after, x, y, diff * 2);
                        } else {
                            set(after, x, y, 0);
                        }
                    }
                }
            } else {
                for (var x = 1; x < 256; x++) {
                    for (var y = 0; y < 256; y++) {
                        var diff = (at(px, x, y) - at(px, x - 1, y)) * dir;
                        if (diff > 0) {
                            set(after, x, y, diff * 2);
                        } else {
                            set(after, x, y, 0);
                        }
                    }
                }
            }
            ctx.putImageData(after, 0, 0);
        }
        canvas.width = canvas.width;
        redraw(1);
        tiles.push(redraw);
    };
    im.crossOrigin = '*';
    im.src = templated;
}

canvasTiles.addTo(map);

var dir = -1;
var xy = true;
swap.onclick = function() {
    dir *= -1;
    tiles.forEach(function(t) {
        t(dir, xy);
    });
}
xybutton.onclick = function() {
    xy = !xy;
    tiles.forEach(function(t) {
        t(dir, xy);
    });
}
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title></title>
	<script src='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.js'></script>
	<link href='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.css' rel='stylesheet' />
	<!--[if lte IE 8]>
	<link href='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.ie.css' rel='stylesheet'>
	<![endif]-->
	<style>
	body { margin:0; padding:0; }
	#map { width:100%; height:400px }
	</style>
	</head>
	<body>
	<div id='map'></div>
	<button id='swap'>swap</button>
	<button id='xybutton'>x vs y</button>
	<script type='text/javascript'>
	var map = L.mapbox.map('map', 'tmcw.map-bdzsrzcs');

	map.setView([45, -120], 7);

	var canvasTiles = L.tileLayer.canvas();

	var tiles = [];

	function at(px, x, y) {
	return px.data[(x * 4) + (y * 256 * 4)] * 1 +
	px.data[(x * 4) + (y * 256 * 4) + 1] * 2 +
	px.data[(x * 4) + (y * 256 * 4) + 2] * 3;
	}

	function set(px, x, y, val) {
	px.data[(x * 4) + (y * 256 * 4) + 0] = val;
	px.data[(x * 4) + (y * 256 * 4) + 1] = val;
	px.data[(x * 4) + (y * 256 * 4) + 2] = val;
	px.data[(x * 4) + (y * 256 * 4) + 3] = val;
	}

	canvasTiles.drawTile = function(canvas, tilePoint, zoom) {
	var ctx = canvas.getContext('2d');
	var url = 'https://a.tiles.mapbox.com/v3/tmcw.dem/{z}/{x}/{y}.png';
	var templated = L.Util.template(url, {
	x: tilePoint.x,
	y: tilePoint.y,
	z: zoom
	});
	var im = new Image();
	im.onload = function() {
	ctx.drawImage(im, 0, 0);
	var px = ctx.getImageData(0, 0, 256, 256);
	function redraw(dir) {
	canvas.width = canvas.width;
	var after = ctx.getImageData(0, 0, 256, 256);
	var last = 0;
	if (xy) {
	for (var y = 1; y < 256; y++) {
	for (var x = 0; x < 256; x++) {
	var diff = (at(px, x, y) - at(px, x, y - 1)) * dir;
	if (diff > 0) {
	set(after, x, y, diff * 2);
	} else {
	set(after, x, y, 0);
	}
	}
	}
	} else {
	for (var x = 1; x < 256; x++) {
	for (var y = 0; y < 256; y++) {
	var diff = (at(px, x, y) - at(px, x - 1, y)) * dir;
	if (diff > 0) {
	set(after, x, y, diff * 2);
	} else {
	set(after, x, y, 0);
	}
	}
	}
	}
	ctx.putImageData(after, 0, 0);
	}
	canvas.width = canvas.width;
	redraw(1);
	tiles.push(redraw);
	};
	im.crossOrigin = '*';
	im.src = templated;
	}

	canvasTiles.addTo(map);

	var dir = -1;
	var xy = true;
	swap.onclick = function() {
	dir *= -1;
	tiles.forEach(function(t) {
	t(dir, xy);
	});
	}
	xybutton.onclick = function() {
	xy = !xy;
	tiles.forEach(function(t) {
	t(dir, xy);
	});
	}
	</script>
	</body>
	</html>