173 lines
4.9 KiB
HTML
173 lines
4.9 KiB
HTML
<!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 type="text/javascript" src="../../build/deps.js"></script>
|
|
<script src="../leaflet-include.js"></script>
|
|
<style>
|
|
#map {
|
|
margin: 0;
|
|
width: auto;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
table th, table td {
|
|
border: 1px #444 solid;
|
|
margin: 0;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<p>Keep track of how many tileload/tileunload events are being fired. The counts should always match. See <a href='https://github.com/Leaflet/Leaflet/issues/4093'>#4093</a></p>
|
|
|
|
<div id="map" class="map"></div>
|
|
|
|
<table>
|
|
<tr>
|
|
<th>
|
|
<th>Start
|
|
<th>Load
|
|
<th>Error
|
|
<th>Unload
|
|
<th>Visible
|
|
<th>Grid load
|
|
<tr>
|
|
<th>Grid
|
|
<td id='grid-tileloadstart'>
|
|
<td id='grid-tileload'>
|
|
<td id='grid-tileerror'>
|
|
<td id='grid-tileunload'>
|
|
<td id='grid-visible'>
|
|
<td id='grid-load'>
|
|
<tr>
|
|
<th>Positron
|
|
<td id='positron-tileloadstart'>
|
|
<td id='positron-tileload'>
|
|
<td id='positron-tileerror'>
|
|
<td id='positron-tileunload'>
|
|
<td id='positron-visible'>
|
|
<td id='positron-load'>
|
|
</table>
|
|
|
|
<p>start = unload + visible on screen</p>
|
|
|
|
<div><button id="dc">DC</button>(flyTo)</div>
|
|
<div><button id="sf">SF</button>(setView, 5 sec)</div>
|
|
<div><button id="trd">TRD</button>(flyTo 20 sec)</div>
|
|
<div><button id="lnd">LND</button>(fract. zoom)</div>
|
|
<div><button id="kyiv">KIEV</button>(setView, fract. zoom)</div>
|
|
<div><button id="mad">MAD</button>(fitBounds)</div>
|
|
<div><button id="nul">NUL</button>(image overlay)</div>
|
|
<div><button id="stop">stop</button></div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
var mapopts = {
|
|
center: [35, -122],
|
|
zoom : 5.7,
|
|
fadeAnimation: true
|
|
};
|
|
|
|
var kyiv = [50.5, 30.5],
|
|
lnd = [51.51, -0.12],
|
|
sf = [37.77, -122.42],
|
|
dc = [38.91, -77.04],
|
|
trd = [63.41, 10.41],
|
|
madBounds = [[40.70, -4.19], [40.12, -3.31]],
|
|
mad = [40.40, -3.7];
|
|
|
|
var map = L.map('map', mapopts);
|
|
|
|
var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
|
|
})
|
|
|
|
var grid = L.gridLayer({
|
|
attribution: 'Grid Layer',
|
|
// tileSize: L.point(150, 80)
|
|
tileSize: L.point(256, 256)
|
|
});
|
|
|
|
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);
|
|
// }, Math.random() * 100);
|
|
|
|
return tile;
|
|
};
|
|
|
|
var counts = {
|
|
tileload: 0,
|
|
tileerror: 0,
|
|
tileloadstart: 0,
|
|
tileunload: 0,
|
|
load: 0
|
|
};
|
|
|
|
grid.on('tileload tileunload tileerror tileloadstart load', function(ev){
|
|
document.getElementById('grid-' + ev.type).innerHTML = ++counts[ev.type];
|
|
document.getElementById('grid-visible').innerHTML = grid._container.querySelectorAll('.leaflet-tile').length; });
|
|
|
|
positron.on('tileload tileunload tileerror tileloadstart load', function(ev){
|
|
document.getElementById('positron-' + ev.type).innerHTML = ++counts[ev.type];
|
|
// document.getElementById('positron-visible').innerHTML = positron._container.querySelectorAll('.leaflet-tile').length;
|
|
});
|
|
|
|
// positron.createTile = function (coords, done) {
|
|
// var tile = document.createElement('img');
|
|
//
|
|
// L.DomEvent.on(tile, 'load', L.bind(this._tileOnLoad, this, done, tile));
|
|
// L.DomEvent.on(tile, 'error', L.bind(this._tileOnError, this, done, tile));
|
|
//
|
|
// if (this.options.crossOrigin) {
|
|
// tile.crossOrigin = '';
|
|
// }
|
|
//
|
|
// /*
|
|
// Alt tag is set to empty string to keep screen readers from reading URL and for compliance reasons
|
|
// http://www.w3.org/TR/WCAG20-TECHS/H67
|
|
// */
|
|
// tile.alt = '';
|
|
//
|
|
// var url = this.getTileUrl(coords);
|
|
// setTimeout(function() {
|
|
// tile.src = url;
|
|
// }, 50 + Math.random() * 3950);
|
|
//
|
|
// return tile;
|
|
// },
|
|
|
|
map.addLayer(positron);
|
|
// map.addLayer(grid);
|
|
|
|
|
|
document.getElementById('dc').onclick = function () { map.flyTo(dc, 10); };
|
|
document.getElementById('sf').onclick = function () { map.setView(sf, 10, {duration: 5, animate: true}); };
|
|
document.getElementById('trd').onclick = function () { map.flyTo(trd, 10, {duration: 20}); };
|
|
document.getElementById('lnd').onclick = function () { map.flyTo(lnd, 9.25); };
|
|
document.getElementById('kyiv').onclick = function () { map.setView(kyiv, 9.25); };
|
|
document.getElementById('nul').onclick = function () { map.flyTo([0, 0], 10); };
|
|
document.getElementById('mad').onclick = function () { map.fitBounds(madBounds); };
|
|
document.getElementById('stop').onclick = function () { map.stop(); };
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|