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 © <a href="http://www.osm.org">OpenStreetMap</a>' | |
}).addTo(map) | |
tiles.addTo(map) | |
</script> | |
</body> | |
</html> |
This comment has been minimized.
This comment has been minimized.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Demo: http://bl.ocks.org/letmaik/e71eae5b3ae9e09f8aeb288c3b95230b