Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!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 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.