mirror of
https://github.com/Leaflet/Leaflet.git
synced 2025-12-08 21:26:14 +00:00
52 lines
1.2 KiB
HTML
52 lines
1.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Leaflet debug page - Canvas</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
|
|
<link rel="stylesheet" href="../../dist/leaflet.css" />
|
|
<link rel="stylesheet" href="../css/screen.css" />
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"leaflet": "../../dist/leaflet-src.esm.js"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
<script type="module">
|
|
import {GridLayer, Map, LatLng} from 'leaflet';
|
|
|
|
const tiles = new GridLayer();
|
|
|
|
tiles.createTile = function (coords) {
|
|
const tile = document.createElement('canvas'),
|
|
ctx = tile.getContext('2d');
|
|
|
|
tile.width = tile.height = 256;
|
|
|
|
ctx.fillStyle = 'white';
|
|
ctx.fillRect(0, 0, 255, 255);
|
|
|
|
ctx.fillStyle = 'black';
|
|
ctx.fillText(`x: ${coords.x}, y: ${coords.y}, zoom: ${coords.z}`, 20, 20);
|
|
|
|
ctx.strokeStyle = 'red';
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, 0);
|
|
ctx.lineTo(255, 0);
|
|
ctx.lineTo(255, 255);
|
|
ctx.lineTo(0, 255);
|
|
ctx.closePath();
|
|
ctx.stroke();
|
|
|
|
return tile;
|
|
};
|
|
|
|
new Map('map', {center: new LatLng(50.5, 30.51), zoom: 15, layers: [tiles]});
|
|
</script>
|
|
</body>
|
|
</html>
|