2015-06-08 18:34:17 +08:00
<!DOCTYPE html>
< html >
< head >
< title > Leaflet debug page< / title >
< link rel = "stylesheet" href = "../../dist/leaflet.css" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< link rel = "stylesheet" href = "../css/screen.css" / >
< script src = "../leaflet-include.js" > < / script >
< style >
#map {
margin: 256px;
width: auto;
overflow: visible
}
< / style >
< / head >
< body >
The CSS in this page makes the boundaries of the GridLayer tiles visible. Tiles which do not overlap the map bounds shall not be shown, even at fractional zoom levels.
< button onclick = 'map.zoomIn(0.1)' > Zoom + 0.1 < / button >
< button onclick = 'map.zoomOut(0.1)' > Zoom - 0.1 < / button >
< div id = "map" class = "map" > < / div >
2017-02-04 23:17:51 +08:00
< script >
2015-06-08 18:34:17 +08:00
var mapopts = {
2016-02-09 00:04:30 +08:00
center: [35, -122],
zoom: 5.7,
zoomSnap: 0.1
2015-06-08 18:34:17 +08:00
};
var map = L.map('map', mapopts);
var grid = L.gridLayer({
2015-06-30 19:54:56 +08:00
attribution: 'Grid Layer',
tileSize: L.point(150, 80)
2015-06-08 18:34:17 +08:00
});
grid.createTile = function (coords, done) {
var tile = document.createElement('div');
tile.innerHTML = [coords.x, coords.y, coords.z].join(', ');
tile.style.border = '2px solid red';
// tile.style.background = 'white';
// test async
setTimeout(function () {
done(null, tile);
}, 0);
return tile;
};
map.addLayer(grid);
< / script >
< / body >
< / html >
