Skip to content

Instantly share code, notes, and snippets.

@letmaik
Created October 7, 2016 10:07
Show Gist options
  • Save letmaik/e71eae5b3ae9e09f8aeb288c3b95230b to your computer and use it in GitHub Desktop.
Save letmaik/e71eae5b3ae9e09f8aeb288c3b95230b to your computer and use it in GitHub Desktop.
Leaflet GridLayer example with Canvas
<!DOCTYPE html>
<html>
<head>
<title>GridLayer Test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/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://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
<script>
var map = new L.Map('map', { center: [10, 0], zoom: 2});
var tiles = new L.GridLayer();
tiles.createTile = function(coords) {
var tile = L.DomUtil.create('canvas', 'leaflet-tile');
var ctx = tile.getContext('2d');
var size = this.getTileSize()
tile.width = size.x
tile.height = size.y
// calculate projection coordinates of top left tile pixel
var nwPoint = coords.scaleBy(size)
// calculate geographic coordinates of top left tile pixel
var nw = map.unproject(nwPoint, coords.z)
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, size.x, 50);
ctx.fillStyle = 'black';
ctx.fillText('x: ' + coords.x + ', y: ' + coords.y + ', zoom: ' + coords.z, 20, 20);
ctx.fillText('lat: ' + nw.lat + ', lon: ' + nw.lng, 20, 40);
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(size.x-1, 0);
ctx.lineTo(size.x-1, size.y-1);
ctx.lineTo(0, size.y-1);
ctx.closePath();
ctx.stroke();
return tile;
}
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="http://www.osm.org">OpenStreetMap</a>'
}).addTo(map)
tiles.addTo(map)
</script>
</body>
</html>
@letmaik
Copy link
Author

letmaik commented Oct 19, 2016

@apdevelop
Copy link

When I view demo in full browser window (so there are a lot of tiles visible) there is an issue: after zoom in not all of the borders lines are refreshed, some are left just stretched twice.
image

@Saqib92
Copy link

Saqib92 commented Apr 7, 2022

How can I select any box on click event? single or Multiple boxes? is there any option?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment