mappingvermont/leaflet_canvas_invert.html

## leaflet_canvas_invert.html

<!DOCTYPE html>
  <html>
  <head>
    <meta charset=utf-8 />
    <title>Tiles as Canvas Images in Leaflet</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    <!-- Load Leaflet from CDN-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/0.7.7/leaflet.css" />
    <script src="https://cdn.jsdelivr.net/leaflet/0.7.7/leaflet.js"></script>

    <style>
      body {
        margin:0;
        padding:0;
      }

      #map {
        position: absolute;
        top:0;
        bottom:0;
        right:0;left:0;
      }

    </style>
  </head>
  <body>

  <div id="map"></div>

  <script>

  var map = L.map('map', {
      noWrap: true,
      minZoom: 3,
    }).setView([43.684639, -79.384956], 15);

    var toronto = L.tileLayer.canvas({
      noWrap: true,
      attribution: 'USGS, Esri'
    });

    toronto.drawTile = function (canvas, tilePoint, zoom) {

      drawData = function (img, ctx) {

	    ctx.drawImage(img, 0, 0);

        var width = img.width;
        var height = img.height;

		//grab original image from canvas
        var imageData = ctx.getImageData(0, 0, width, height);
        var data = imageData.data;

		// Iterate over the image, inverting the values of all the pixels
        for (var i = 0; i < data.length; i += 4) {
		  data[i]     =  255 - data[i];     // red
          data[i + 1] = 255 - data[i + 1]; // green
          data[i + 2] =  255 - data[i + 2]; // blue
		}

		// Display this new image on the canvas
		ctx.putImageData(imageData, 0, 0);

	  }

      var tileIndex = tilePoint.x + ':' + tilePoint.y;
      var tile = this._tiles[tileIndex];

      var xhr = new XMLHttpRequest();
      xhr.responseType = "arraybuffer";
      var url = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/' + zoom + '/' + tilePoint.y + '/' + tilePoint.x;

      xhr.open("Get", url, true);
      xhr.send();
      xhr.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {

		  var arrayBufferView = new Uint8Array( xhr.response );
		  var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );

		  var imageUrl = URL.createObjectURL( blob );
		  var img = new Image();
		  img.onload = function() {
			tile.img = img
			drawData(tile.img, canvas.getContext('2d'));
		  }

		  img.src = imageUrl

		}
      }
    };

    toronto.addTo(map);

  </script>
  </body>
  </html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Tiles as Canvas Images in Leaflet</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

	<!-- Load Leaflet from CDN-->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/0.7.7/leaflet.css" />
	<script src="https://cdn.jsdelivr.net/leaflet/0.7.7/leaflet.js"></script>

	<style>
	body {
	margin:0;
	padding:0;
	}

	#map {
	position: absolute;
	top:0;
	bottom:0;
	right:0;left:0;
	}

	</style>
	</head>
	<body>

	<div id="map"></div>

	<script>

	var map = L.map('map', {
	noWrap: true,
	minZoom: 3,
	}).setView([43.684639, -79.384956], 15);

	var toronto = L.tileLayer.canvas({
	noWrap: true,
	attribution: 'USGS, Esri'
	});

	toronto.drawTile = function (canvas, tilePoint, zoom) {

	drawData = function (img, ctx) {

	ctx.drawImage(img, 0, 0);

	var width = img.width;
	var height = img.height;

	//grab original image from canvas
	var imageData = ctx.getImageData(0, 0, width, height);
	var data = imageData.data;

	// Iterate over the image, inverting the values of all the pixels
	for (var i = 0; i < data.length; i += 4) {
	data[i] = 255 - data[i]; // red
	data[i + 1] = 255 - data[i + 1]; // green
	data[i + 2] = 255 - data[i + 2]; // blue
	}

	// Display this new image on the canvas
	ctx.putImageData(imageData, 0, 0);

	}

	var tileIndex = tilePoint.x + ':' + tilePoint.y;
	var tile = this._tiles[tileIndex];

	var xhr = new XMLHttpRequest();
	xhr.responseType = "arraybuffer";
	var url = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/' + zoom + '/' + tilePoint.y + '/' + tilePoint.x;

	xhr.open("Get", url, true);
	xhr.send();
	xhr.onreadystatechange = function () {
	if (this.readyState == 4 && this.status == 200) {

	var arrayBufferView = new Uint8Array( xhr.response );
	var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );

	var imageUrl = URL.createObjectURL( blob );
	var img = new Image();
	img.onload = function() {
	tile.img = img
	drawData(tile.img, canvas.getContext('2d'));
	}

	img.src = imageUrl

	}
	}
	};

	toronto.addTo(map);

	</script>
	</body>
	</html>