2016-01-08 20:27:48 +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: 0;
width: auto;
}
2016-02-08 19:46:34 +08:00
.redTile {
border: red 1px solid;
line-height: 256px;
text-align: center;
}
2016-01-08 20:27:48 +08:00
table {
border-collapse: collapse;
}
table th, table td {
border: 1px #444 solid;
margin: 0;
}
< / style >
< / head >
< body >
2016-02-08 19:46:34 +08:00
< 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 > , < a href = 'https://github.com/Leaflet/Leaflet/issues/4193' > #4193< / a > < / p >
2016-01-08 20:27:48 +08:00
< div id = "map" class = "map" > < / div >
< table >
2016-02-04 00:35:52 +08:00
< tr >
2016-02-05 23:45:08 +08:00
< th >
2016-02-04 00:35:52 +08:00
< th > Start
< th > Load
< th > Error
< th > Unload
< th > Visible
< th > Grid load
< tr >
2016-02-05 23:45:08 +08:00
< 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' >
2016-01-08 20:27:48 +08:00
< / table >
< p > start = unload + visible on screen< / p >
2016-02-05 23:30:29 +08:00
< 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 >
2017-02-04 23:17:51 +08:00
< script >
2016-01-08 20:27:48 +08:00
var mapopts = {
2016-02-09 00:04:30 +08:00
center: [35, -122],
zoom: 5.75,
zoomSnap: 0.25,
fadeAnimation: true
2016-01-08 20:27:48 +08:00
};
2016-02-05 23:30:29 +08:00
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];
2016-01-08 20:27:48 +08:00
var map = L.map('map', mapopts);
2016-02-05 23:45:08 +08:00
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 > '
2016-02-06 00:07:03 +08:00
})
2016-02-05 23:45:08 +08:00
2016-01-08 20:27:48 +08:00
var grid = L.gridLayer({
attribution: 'Grid Layer',
// tileSize: L.point(150, 80)
2016-02-05 23:45:08 +08:00
tileSize: L.point(256, 256)
2016-01-08 20:27:48 +08:00
});
2016-02-04 00:35:52 +08:00
grid.createTile = function (coords/*, done*/) {
2016-02-08 19:46:34 +08:00
var tile = L.DomUtil.create('div', 'redTile');
2016-01-08 20:27:48 +08:00
tile.innerHTML = [coords.x, coords.y, coords.z].join(', ');
return tile;
};
2016-02-08 19:46:34 +08:00
var gridCounts = {
tileload: 0,
tileerror: 0,
tileloadstart: 0,
tileunload: 0,
load: 0
};
var positronCounts = {
2016-01-08 20:27:48 +08:00
tileload: 0,
tileerror: 0,
tileloadstart: 0,
2016-02-04 00:35:52 +08:00
tileunload: 0,
load: 0
2016-01-08 20:27:48 +08:00
};
2016-02-04 00:35:52 +08:00
grid.on('tileload tileunload tileerror tileloadstart load', function(ev){
2016-02-08 19:46:34 +08:00
document.getElementById('grid-' + ev.type).innerHTML = ++gridCounts[ev.type];
document.getElementById('grid-visible').innerHTML = grid._container.querySelectorAll('.leaflet-tile').length;
});
2016-02-05 23:45:08 +08:00
positron.on('tileload tileunload tileerror tileloadstart load', function(ev){
2016-02-08 19:46:34 +08:00
document.getElementById('positron-' + ev.type).innerHTML = ++positronCounts[ev.type];
document.getElementById('positron-visible').innerHTML = positron._container.querySelectorAll('.leaflet-tile').length;
2016-01-08 20:27:48 +08:00
});
2016-02-06 00:07:03 +08:00
map.addLayer(positron);
2016-02-08 19:46:34 +08:00
map.addLayer(grid);
2016-01-08 20:27:48 +08:00
2016-02-05 23:30:29 +08:00
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(); };
2016-01-08 20:27:48 +08:00
< / script >
< / body >
< / html >
