ativ100/Geo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Two commit

Browse Source
This commit is contained in:
yugovarkady
2026-02-25 19:49:35 +03:00
parent b99c93bec6
commit b3cdaf12d5
505 changed files with 208406 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/public/Leaflet-1.7.1/debug/map/canvas.html Normal file
View File

@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 600px; border: 1px solid #ccc"></div>
<script>
var tiles = new L.GridLayer();
tiles.createTile = function(coords) {
var 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;
}
var map = new L.Map('map', {center: new L.LatLng(50.5, 30.51), zoom: 15, layers: [tiles]});
</script>
</body>
</html>

50
src/public/Leaflet-1.7.1/debug/map/control-layers.html Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var geojson = {
"type": "Polygon",
"coordinates": [[
[5.4931640625, 51.781435604431195],
[0.9008789062499999, 53.35710874569601],
[-2.30712890625, 51.795027225829145],
[2.8125, 49.109837790524416],
[5.4931640625, 51.781435604431195]
]]
};
var map = L.map('map').setView([50.5, 0], 5);
var OSM_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
var OSM_BlackAndWhite = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
L.control.layers({
'OSM': OSM_Mapnik,
'OSM BW': OSM_BlackAndWhite
}, {
'Circle': L.circle([53, 4], 111111).addTo(map),
'Polygon': L.polygon([[48, -3], [50, -4], [52, 4]]),
'GeoJSON': L.geoJson(geojson),
}, {
collapsed: false
}).addTo(map);
</script>
</body>
</html>

45
src/public/Leaflet-1.7.1/debug/map/controls.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
osm2 = new L.TileLayer(osmUrl, {attribution: 'Hello world'});
var map = new L.Map('map').addLayer(osm).setView(new L.LatLng(50.5, 30.512), 15);
var marker = new L.Marker(new L.LatLng(50.5, 30.505));
map.addLayer(marker);
marker.bindPopup("Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms out of the box, taking advantage of HTML5 and CSS3 on modern browsers while still being accessible on older ones.").openPopup();
var marker2 = new L.Marker(new L.LatLng(50.502, 30.515));
map.addLayer(marker2);
var layersControl = new L.Control.Layers({
'OSM': osm,
'OSM2': osm2
}, {
'Some marker': marker,
'Another marker': marker2
});
map.addControl(layersControl);
map.addControl(new L.Control.Scale());
</script>
</body>
</html>

33
src/public/Leaflet-1.7.1/debug/map/geolocation.html Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet geolocation 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>
</head>
<body>
<div id="map"></div>
<script>
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
var map = new L.Map('map', {zoom: 15, layers: [osm]});
function logEvent(e) { console.log(e.type); }
map.on('locationerror', logEvent);
map.on('locationfound', logEvent);
map.locate({setView: true});
</script>
</body>
</html>

48
src/public/Leaflet-1.7.1/debug/map/grid.html Normal file
View File

@@ -0,0 +1,48 @@
<!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>
</head>
<body>
<div id="map"></div>
<script>
var grid = L.gridLayer({
attribution: 'Grid Layer'
});
grid.createTile = function (coords, done) {
var tile = document.createElement('div');
tile.innerHTML = [coords.x, coords.y, coords.z].join(', ');
tile.style.outline = '1px solid red';
tile.style.background = 'white';
// test async
setTimeout(function () {
done(null, tile);
}, 500 + Math.random() * 500);
return tile;
};
grid.on('loading', function() { console.log('loading'); });
grid.on('load', function() { console.log('load'); });
grid.on('tileunload', function(tile) { console.log('tileunload ' + tile.coords.x + ',' + tile.coords.y + ',' + tile.coords.z); });
var map = L.map('map')
.setView([50.5, 30.51], 10)
.addLayer(grid);
</script>
</body>
</html>

11
src/public/Leaflet-1.7.1/debug/map/iframe.html Normal file
View File

@@ -0,0 +1,11 @@
<style>
iframe {
position: absolute;
top: 50px;
left: 50px;
width: 500px;
height: 500px;
}
</style>
<iframe src="map.html">
</iframe>

48
src/public/Leaflet-1.7.1/debug/map/image-overlay.html Normal file
View File

@@ -0,0 +1,48 @@
<!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>
</head>
<body>
<div id="map"></div>
<button id="populate">Populate with 10 markers</button>
<script>
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
latlng = new L.LatLng(50.5, 30.51);
var map = new L.Map('map');
map.addLayer(osm);
var bounds = new L.LatLngBounds(
new L.LatLng(40.71222,-74.22655),
new L.LatLng(40.77394,-74.12544));
map.fitBounds(bounds);
var overlay = new L.ImageOverlay("https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg", bounds, {
opacity: 0.5,
interactive: true,
attribution: '&copy; A.B.B Corp.'
});
map.addLayer(overlay);
overlay.on('dblclick',function (e) {
console.log('Double click on image.');
});
</script>
</body>
</html>

37
src/public/Leaflet-1.7.1/debug/map/layer_remove_add.html Normal file
View File

@@ -0,0 +1,37 @@
<!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>
</head>
<body>
<div id="map"></div>
<button id="removeAdd">Remove and Add Layer</button>
<script>
map = L.map('map', { center: [0, 0], zoom: 3, maxZoom: 4 });
var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
L.DomUtil.get('removeAdd').onclick = function() {
map.removeLayer(osm);
setTimeout(function() {
map.addLayer(osm);
}, 1000);
};
</script>
</body>
</html>

33
src/public/Leaflet-1.7.1/debug/map/map-mobile.html Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="../../dist/leaflet.css" />
<link rel="stylesheet" href="../css/mobile.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
latlng = new L.LatLng(50.5, 30.51);
var map = new L.Map('map', {center: latlng, zoom: 15, layers: [osm]});
var marker = new L.Marker(latlng);
map.addLayer(marker);
marker.bindPopup("<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>");
</script>
</body>
</html>

56
src/public/Leaflet-1.7.1/debug/map/map-popup.html Normal file
View File

@@ -0,0 +1,56 @@
<!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>
</head>
<body>
<div id="map"></div>
<script>
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
var map = L.map('map')
.setView([51.505, -0.09], 13)
.addLayer(osm);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map).bindPopup("I am a circle.");
L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(map).bindPopup("I am a polygon.");
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);
</script>
</body>
</html>

65
src/public/Leaflet-1.7.1/debug/map/map-scaled.html Normal file
View File

@@ -0,0 +1,65 @@
<!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" />
<style>
html, body {
margin: 0;
padding: 0;
}
#wrapper {
transform: scale(.5, .25); /* scaleX0 = .5 ; scaleY0 = .25 */
transform-origin: 0 0;
padding: 40px 100px; /* displayed padding-top = scaleY0 * 40px = 10px ; displayed padding-left = scaleX0 * 100px = 50px */
}
#map {
width: 400px;
height: 300px;
transform: scale(3, 8); /* scaleX = .5 * 3 = 1.5 ; scaleY = .25 * 8 = 2 */
transform-origin: 0 0;
border-width: 30px 70px; /* displayed border-top-width = scaleY * 30px = 60px ; displayed border-left-width = scaleX * 70px = 105px */
}
</style>
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="wrapper">
<div id="map"></div>
</div>
<script>
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
var map = L.map('map')
.setView([50.5, 30.51], 15)
.addLayer(osm);
var mapContainer = map.getContainer();
var marker = L.marker([50.5, 30.51], {
draggable: true
}).addTo(map);
map.on('drag', function (event) {
console.log('map:');
console.log(L.DomEvent.getMousePosition(event.originalEvent, mapContainer));
});
marker.on('drag', function (event) {
console.log('marker:');
console.log(L.DomEvent.getMousePosition(event.originalEvent, mapContainer));
});
</script>
</body>
</html>

69
src/public/Leaflet-1.7.1/debug/map/map.html Normal file
View File

@@ -0,0 +1,69 @@
<!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>
</head>
<body>
<div id="map"></div>
<button id="populate">Populate with 10 markers</button>
<script>
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
var map = L.map('map')
.setView([50.5, 30.51], 15)
.addLayer(osm);
var markers = new L.FeatureGroup();
function getRandomLatLng(llbounds) {
var s = llbounds.getSouth(),
n = llbounds.getNorth(),
w = llbounds.getWest(),
e = llbounds.getEast();
return L.latLng(
s + (Math.random() * (n - s)),
w + (Math.random() * (e - w))
)
}
function populate() {
for (var i = 0; i < 10; i++) {
L.marker(getRandomLatLng(map.getBounds())).addTo(markers);
}
return false;
}
markers.bindPopup("<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque.</p>").addTo(map);
populate();
L.DomUtil.get('populate').onclick = populate;
function logEvent(e) { console.log(e.type); }
// map.on('click', logEvent);
// map.on('contextmenu', logEvent);
// map.on('movestart', logEvent);
// map.on('move', logEvent);
// map.on('moveend', logEvent);
// map.on('zoomstart', logEvent);
// map.on('zoomend', logEvent);
</script>
</body>
</html>

63
src/public/Leaflet-1.7.1/debug/map/marker-autopan.html Normal file
View File

@@ -0,0 +1,63 @@
<!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>
</head>
<body>
<div id="map"></div>
<script>
map = L.map('map', { center: [0, 0], zoom: 3, maxZoom: 4 });
var markerAutoPan = new L.Marker([0, -10], {
draggable: true,
autoPan: true,
title: 'AutoPan'
});
map.addLayer(markerAutoPan);
markerAutoPan.bindPopup("AutoPan");
var markerDraggable = new L.Marker([0, 10], {
title: 'Draggable'
});
map.addLayer(markerDraggable);
markerDraggable.bindPopup("Draggable");
markerDraggable.dragging.enable();
var poly = new L.Polygon([[0, 10], [0, 15.5], [0, 50], [20, 20.5]]);
map.addLayer(poly);
poly.bindPopup("Polygon");
markerDraggable.on('click', function(e) {
console.log('markerDraggable click');
});
markerAutoPan.on('click', function(e) {
console.log('markerAutoPan click');
})
map.on('click', function(e) {
console.log('map click');
});
poly.on('click', function(e) {
console.log('poly click');
});
var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
</script>
</body>
</html>

62
src/public/Leaflet-1.7.1/debug/map/markers.html Normal file
View File

@@ -0,0 +1,62 @@
<!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>
</head>
<body>
<div id="map"></div>
<script>
map = L.map('map', { center: [0, 0], zoom: 3, maxZoom: 4 });
var markerStatic = new L.Marker([0, -10], {
draggable: false,
title: 'Static'
});
map.addLayer(markerStatic);
markerStatic.bindPopup("Static");
var markerDraggable = new L.Marker([0, 10], {
title: 'Draggable'
});
map.addLayer(markerDraggable);
markerDraggable.bindPopup("Draggable");
markerDraggable.dragging.enable();
var poly = new L.Polygon([[0, 10], [0, 15.5], [0, 50], [20, 20.5]]);
map.addLayer(poly);
poly.bindPopup("Polygon");
markerDraggable.on('click', function(e) {
console.log('markerDraggable click');
});
markerStatic.on('click', function(e) {
console.log('markerStatic click');
})
map.on('click', function(e) {
console.log('map click');
});
poly.on('click', function(e) {
console.log('poly click');
});
var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
</script>
</body>
</html>

51
src/public/Leaflet-1.7.1/debug/map/max-bounds-bouncy.html Normal file
View File

@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="../../dist/leaflet.css" />
<link rel="stylesheet" href="../css/mobile.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<h1>Left: Bouncy maxBounds. Right: Not bouncy.</h1>
<div id="map1" style="float: left; width:45%; height: 80%;"></div>
<div id="map2" style="float: left; width:45%; height: 80%;"></div>
<script>
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm1 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
osm2 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
bounds = new L.LatLngBounds(new L.LatLng(49.5, -11.3), new L.LatLng(61.2, 2.5));
var map1 = new L.Map('map1', {
center: bounds.getCenter(),
zoom: 5,
layers: [osm1],
maxBounds: bounds,
maxBoundsViscosity: 0.75
});
var map2 = new L.Map('map2', {
center: bounds.getCenter(),
zoom: 5,
layers: [osm2],
maxBounds: bounds,
maxBoundsViscosity: 1.0
});
var latlngs = L.rectangle(bounds).getLatLngs();
L.polyline(latlngs[0].concat(latlngs[0][0])).addTo(map1);
L.polyline(latlngs[0].concat(latlngs[0][0])).addTo(map2);
</script>
</body>
</html>

36
src/public/Leaflet-1.7.1/debug/map/max-bounds-infinite.html Normal file
View File

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="../../dist/leaflet.css" />
<link rel="stylesheet" href="../css/mobile.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
bounds = new L.LatLngBounds(new L.LatLng(49.5, Number.NEGATIVE_INFINITY), new L.LatLng(61.2, Number.POSITIVE_INFINITY));
var map = new L.Map('map', {
center: L.latLng(49.5, 30),
zoom: 7,
layers: [osm],
maxBounds: bounds
});
map.setMaxBounds(bounds); // Should not enter infinite recursion
</script>
</body>
</html>

41
src/public/Leaflet-1.7.1/debug/map/max-bounds.html Normal file
View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="../../dist/leaflet.css" />
<link rel="stylesheet" href="../css/mobile.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
bounds = new L.LatLngBounds(new L.LatLng(49.5, -11.3), new L.LatLng(61.2, 2.5));
var map = new L.Map('map', {
center: bounds.getCenter(),
zoom: 7,
layers: [osm],
maxBounds: bounds
});
var latlngs = L.rectangle(bounds).getLatLngs();
L.polyline(latlngs[0].concat(latlngs[0][0])).addTo(map);
map.setMaxBounds(bounds); // Should not enter infinite recursion
</script>
</body>
</html>

197
src/public/Leaflet-1.7.1/debug/map/opacity.html Normal file
View File

@@ -0,0 +1,197 @@
<!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>
.mapcontainer {
float:left;
position: relative;
width: 32%;
font-size: 12px;
font-family: sans-serif;
height: 340px;
margin-bottom: 15px;
background-color: #eee;
margin-right: 1%;
}
.map {
position: absolute;
width: 100%;
height: 280px;
bottom: 0px;
}
</style>
</head>
<body>
<p>These should all render identically.</p>
<div class="mapcontainer">
CASE 1: no opacity set on any layers
<br />
<div id="map1" class="map"></div>
</div>
<div class="mapcontainer">
CASE 2: opacity set to .99 on overlays but not on basemap
<br />
<div id="map2" class="map"></div>
</div>
<div class="mapcontainer">
CASE 3: opacity set on overlays but not on basemap, zIndex option set to 0 on basemap
<br />
<div id="map3" class="map"></div>
</div>
<div class="mapcontainer">
CASE 4: opacity set to .99 on overlays but set to 1 on basemap
<br />
<div id="map4" class="map"></div>
</div>
<div class="mapcontainer">
CASE 5: opacity set to .99 on all layers
<br />
<div id="map5" class="map"></div>
</div>
<div class="mapcontainer">
CASE 6: opacity set to .99 on 1st and 3rd layers and 1 on middle layer
<br />
<div id="map6" class="map"></div>
</div>
<script>
var mapopts = {
center: [35, -122],
zoom : 5
};
var map1 = L.map('map1', mapopts);
var map2 = L.map('map2', mapopts);
var map3 = L.map('map3', mapopts);
var map4 = L.map('map4', mapopts);
var map5 = L.map('map5', mapopts);
var map6 = L.map('map6', mapopts);
/**********
CASE 1: no opacity set on any layers
**********/
// OSM Basemap
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
var osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: ''}).addTo(map1);
// EEZs / Nations
var eez1 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
tms: true
}).addTo(map1);
// Marine Protected Areas overlay
var mpa1 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
tms: false
}).addTo(map1);
/**********
CASE 2: opacity set on overlays but not on basemap
**********/
// OSM Basemap
var osm2 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: ''}).addTo(map2);
// EEZs / Nations
var eez2 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
tms: true,
opacity: 0.99
}).addTo(map2);
// Marine Protected Areas overlay
var mpa2 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
tms: false,
opacity: 0.99
}).addTo(map2);
/**********
CASE 3: opacity set on overlays but not on basemap, zIndex option set to 0 on basemap
**********/
// OSM Basemap
var osm3 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: '', zIndex: 0}).addTo(map3);
// EEZs / Nations
var eez3 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
tms: true,
opacity: 0.99
}).addTo(map3);
// Marine Protected Areas overlay
var mpa3 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
tms: false,
opacity: 0.99
}).addTo(map3);
/**********
CASE 4: opacity set on overlays but set to 1 on basemap
**********/
// OSM Basemap
var osm4 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}).addTo(map4);
// EEZs / Nations
var eez4 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
tms: true,
opacity: 0.99
}).addTo(map4);
// Marine Protected Areas overlay
var mpa4 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
tms: false,
opacity: 0.99
}).addTo(map4);
/**********
CASE 5: opacity set to .5 on all layers
**********/
// OSM Basemap
var osm5 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: '', opacity: 0.99}).addTo(map5);
// EEZs / Nations
var eez5 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
tms: true,
opacity: 0.99
}).addTo(map5);
// Marine Protected Areas overlay
var mpa5 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
tms: false,
opacity: 0.99
}).addTo(map5);
/**********
CASE 6: opacity set to .5 on 1st and 3rd layers and 1 on middle layer
**********/
// OSM Basemap
var osm6 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: '', opacity: 0.99}).addTo(map6);
// EEZs / Nations
var eez6 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
tms: true,
opacity: 1
}).addTo(map6);
// Marine Protected Areas overlay
var mpa6 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
tms: false,
opacity: 0.99
}).addTo(map6);
</script>
</body>
</html>

85
src/public/Leaflet-1.7.1/debug/map/popup.html Normal file
View File

@@ -0,0 +1,85 @@
<!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>
</head>
<body>
<div id="map"></div>
<script>
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
var map = L.map('map')
.setView([50.5, 30.51], 15)
.addLayer(osm);
function getRandomLatLng(llbounds) {
var s = llbounds.getSouth(),
n = llbounds.getNorth(),
w = llbounds.getWest(),
e = llbounds.getEast();
return L.latLng(
s + (Math.random() * (n - s)),
w + (Math.random() * (e - w))
)
}
var features = new L.FeatureGroup([
L.marker(getRandomLatLng(map.getBounds())),
L.polyline([
getRandomLatLng(map.getBounds()),
getRandomLatLng(map.getBounds()),
getRandomLatLng(map.getBounds())
]),
L.polygon([
getRandomLatLng(map.getBounds()),
getRandomLatLng(map.getBounds()),
getRandomLatLng(map.getBounds()),
getRandomLatLng(map.getBounds())
])
]);
features.bindPopup(function(layer){
return 'Leaflet ID is ' + features.getLayerId(layer);
}).addTo(map);
var content = L.DomUtil.create('p', 'custom-popup');
content.innerText = 'I\'m a red polygon';
var polygon = L.polygon([
getRandomLatLng(map.getBounds()),
getRandomLatLng(map.getBounds()),
getRandomLatLng(map.getBounds()),
getRandomLatLng(map.getBounds())
], {
color: 'red'
}).bindPopup(content).addTo(map);
var polyline = L.polyline([
getRandomLatLng(map.getBounds()),
getRandomLatLng(map.getBounds()),
getRandomLatLng(map.getBounds())
], {
color: 'red'
}).bindPopup('I\'m a red polyline').addTo(map);
var marker = L.circleMarker(getRandomLatLng(map.getBounds()), {
color: 'red',
radius: 25
}).bindPopup('I\'m a red circle').addTo(map);
</script>
</body>
</html>

104
src/public/Leaflet-1.7.1/debug/map/rollup.html Normal file
View File

@@ -0,0 +1,104 @@
<!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="../../dist/leaflet-src.js"></script>
</head>
<body>
<div id="map"></div>
<button id="populate-markers">Populate with markers</button>
<button id="populate-circles">Populate with circles</button>
<button id="populate-lines">Populate with lines</button>
<button id="populate-polygons">Populate with polygons</button>
<script>
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
var map = L.map('map')
.setView([50.5, 30.51], 15)
.addLayer(osm);
var markers = new L.FeatureGroup();
function getRandomLatLng(llbounds) {
var s = llbounds.getSouth(),
n = llbounds.getNorth(),
w = llbounds.getWest(),
e = llbounds.getEast();
return L.latLng(
s + (Math.random() * (n - s)),
w + (Math.random() * (e - w))
)
}
function populateMarker() {
for (var i = 0; i < 5; i++) {
L.marker(getRandomLatLng(map.getBounds())).addTo(markers);
}
return false;
}
function populateCircle() {
for (var i = 0; i < 5; i++) {
L.circleMarker(getRandomLatLng(map.getBounds())).addTo(markers);
}
return false;
}
function populateLine() {
var lineCoords = [];
for (var i = 0; i < 10; i++) {
lineCoords.push(getRandomLatLng(map.getBounds()));
}
L.polyline(lineCoords).addTo(map);
return false;
}
function populatePoly() {
var lineCoords = [];
for (var i = 0; i < 10; i++) {
lineCoords.push(getRandomLatLng(map.getBounds()));
}
L.polygon(lineCoords).addTo(map);
return false;
}
markers.bindPopup("<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque.</p>").addTo(map);
L.DomUtil.get('populate-markers').onclick = populateMarker;
L.DomUtil.get('populate-circles').onclick = populateCircle;
L.DomUtil.get('populate-lines').onclick = populateLine;
L.DomUtil.get('populate-polygons').onclick = populatePoly;
function logEvent(e) { console.log(e.type); }
populateMarker();
populateCircle();
populateLine();
populatePoly();
// map.on('click', logEvent);
// map.on('contextmenu', logEvent);
// map.on('movestart', logEvent);
// map.on('move', logEvent);
// map.on('moveend', logEvent);
// map.on('zoomstart', logEvent);
// map.on('zoomend', logEvent);
</script>
</body>
</html>

40
src/public/Leaflet-1.7.1/debug/map/scroll.html Normal file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div style="position: absolute; top: 100px; left: 100px; border: 1px solid green">
<div style="position: relative; margin-top: 500px; width: 800px; border: 1px solid red; margin-left: 200px">
<div style="height: 600px; overflow: auto">
<div id="map" style="width: 600px; height: 1000px; border: 1px solid #ccc"></div>
</div>
</div>
</div>
<script>
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
latlng = new L.LatLng(50.5, 30.51);
var map = new L.Map('map', {center: latlng, zoom: 15, layers: [osm]});
var s = '';
for (var i = 0; i < 100; i++) s += 'Test<br>';
var popup = L.popup({maxHeight: 100})
.setContent(s)
.setLatLng(latlng)
.openOn(map);
</script>
</body>
</html>

58
src/public/Leaflet-1.7.1/debug/map/simple-proj.html Normal file
View File

@@ -0,0 +1,58 @@
<!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>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map', {
crs: L.CRS.Simple
}).setView([0, 0], 0);
L.polygon([
[-200, -50],
[-40, 250],
[200, 100]
]).addTo(map);
L.marker([-200, -200]).addTo(map);
L.marker([200, -200]).addTo(map);
L.marker([200, 200]).addTo(map);
L.marker([-200, 200]).addTo(map);
L.marker([0, 0]).addTo(map);
L.imageOverlay('http://leafletjs.com/docs/images/logo.png', [[0, 0], [73, 220]]).addTo(map);
var grid = L.gridLayer({
attribution: 'Grid Layer'
});
grid.createTile = function (coords) {
var tile = document.createElement('div');
tile.innerHTML = [coords.x, coords.y, coords.z].join(', ');
tile.style.outline = '1px solid red';
tile.style.background = 'white';
return tile;
};
map.addLayer(grid);
L.circle([0, 0], 100, {color: 'red'}).addTo(map);
</script>
</body>
</html>

55
src/public/Leaflet-1.7.1/debug/map/svgoverlay.html Normal file
View File

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<meta charset="utf-8" />
<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>
</head>
<body>
<div id="map" style='width:750px; height: 450px;'></div>
<svg id="image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect width="200" height="200"/><rect x="75" y="23" width="50" height="50" style="fill:red"/><rect x="75" y="123" width="50" height="50" style="fill:#0013ff"/></svg>
<script type="text/javascript">
var map = L.map('map');
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox/satellite-v9',
tileSize: 512,
zoomOffset: -1
}).addTo(map);
var svgElement = document.querySelector('#image'),
bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);
map.fitBounds(bounds);
var overlay = L.svgOverlay(svgElement, bounds, {
opacity: 0.7,
interactive: true
});
map.addLayer(overlay);
var element = overlay.getElement();
element.addEventListener('click', function(event) {
console.log('click!')
})
</script>
</body>
</html>

248
src/public/Leaflet-1.7.1/debug/map/tile-debug.html Normal file
View File

@@ -0,0 +1,248 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet tile debug</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" />
<style>
* {
margin: 0;
padding: 0;
}
#outer {
position: absolute;
width: calc(2*256px + 600px);
height: calc(2*256px + 400px);
border: 10px solid rgba(0, 0, 255, 0.4);
background-color: transparent;
}
#middle, #map {
position: absolute;
margin: calc(266px - 10px);
width: 600px;
height: 400px;
border: 10px solid transparent;
}
#middle {
pointer-events: none;
z-index: 1000;
border-color: rgba(0, 255, 0, 0.4);
}
#map {
overflow: visible;
}
button {
width: 40px;
text-align: center;
margin-right: 5px;
}
.grid {
border: red 1px solid;
line-height: 256px;
text-align: center;
box-sizing: border-box;
}
#stats {
position: absolute;
z-index: 1000;
width: 300px;
right: 0;
top: 10px;
bottom: 0;
}
#zoomtable td {
height: 40px;
}
.diag {
margin-bottom: 20px;
}
tr:nth-child(odd) {
background-color: #eee;
}
</style>
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="outer"></div>
<div id="middle"></div>
<div id="map"></div>
<div id="stats">
<div class="diag">
<div><button id="dc">DC</button>(flyTo)</div>
<div><button id="sf">SF</button>(setView)</div>
<div><button id="trd">TRD</button>(flyTo)</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>
</div>
<table id="zoomtable" class="diag">
<tr><td>on movestart</td><td id='movestart' width=230></td></tr>
<tr><td>on zoomstart</td><td id='zoomstart'></td></tr>
<tr><td>on move</td><td id='move'></td></tr>
<tr><td>on moveend</td><td id='moveend'></td></tr>
<tr><td>on zoomend</td><td id='zoomend'></td></tr>
<tr><td>on grid load</td><td id='load'></td></tr>
</table>
<table>
<tr>
<th>event</th>
<th>Grid</th>
<th>Positron</th>
</tr>
<tr>
<td>tileloadstart</td>
<td id='grid-tileloadstart'></td>
<td id='positron-tileloadstart'></td>
</tr>
<tr>
<td>tileload</td>
<td id='grid-tileload'></td>
<td id='positron-tileload'></td>
</tr>
<tr>
<td>tileerror</td>
<td id='grid-tileerror'></td>
<td id='positron-tileerror'></td>
</tr>
<tr>
<td>tileunload</td>
<td id='grid-tileunload'></td>
<td id='positron-tileunload'></td>
</tr>
<tr>
<td>visible</td>
<td id='grid-visible'></td>
<td id='positron-visible'></td>
</tr>
<tr>
<td>grid load</td>
<td id='grid-load'></td>
<td id='positron-load'></td>
</tr>
</table>
<button id="reset">reset</button>
</div>
<script>
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', {
// zoomSnap: 0,
// zoomAnimation: false,
fadeAnimation: false
}).setView(dc, 16);
var gridCounts = {},
positronCounts = {},
gridLoadData = {};
resetCounter();
var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
});
var grid = L.gridLayer({
attribution: 'Grid Layer',
tileSize: L.point(256, 256)
});
grid.createTile = function (coords) {
var tile = L.DomUtil.create('div', 'grid');
var indexStr = [coords.x, coords.y, coords.z].join(', ');
if (!(indexStr in gridLoadData)) {
gridLoadData[indexStr] = 0;
}
tile.innerHTML = ++gridLoadData[indexStr];
// double tile loading alert
// if (gridLoadData[indexStr] > 1) {
// alert(indexStr);
// }
// more tile loadings -> more red grid tile
tile.style.backgroundColor = 'rgba(255,0,0,' + (gridLoadData[indexStr] - 1) / 5 + ')';
return tile;
};
grid.on('tileload tileunload tileerror tileloadstart load', function(ev){
document.getElementById('grid-' + ev.type).innerHTML = ++gridCounts[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 = ++positronCounts[ev.type];
document.getElementById('positron-visible').innerHTML = positron._container.querySelectorAll('.leaflet-tile').length;
});
map.addLayer(positron);
map.addLayer(grid);
var marker1 = L.marker(kyiv).addTo(map),
marker2 = L.marker(lnd).addTo(map),
marker3 = L.marker(dc).addTo(map),
marker4 = L.marker(sf).addTo(map),
marker5 = L.marker(trd).addTo(map),
marker6 = L.marker(mad).addTo(map);
var nullIslandKitten = L.imageOverlay('http://placekitten.com/300/400?image=6', [[-0.2,-0.15], [0.2, 0.15]]).addTo(map);
document.getElementById('dc').onclick = function () { map.flyTo(dc, 7, {duration: 40}); };
document.getElementById('sf').onclick = function () { map.setView(sf, 10, {duration: 40, animate: true}); };
document.getElementById('trd').onclick = function () { map.flyTo(trd, 10, {duration: 40}); };
document.getElementById('lnd').onclick = function () { map.flyTo(lnd, 9.25, {duration: 40}); };
document.getElementById('kyiv').onclick = function () { map.setView(kyiv, 9.25, {duration: 40}); };
document.getElementById('mad').onclick = function () { map.fitBounds(madBounds); };
document.getElementById('nul').onclick = function () { map.flyTo([0, 0], 10, {duration: 40}); };
document.getElementById('stop').onclick = function () { map.stop(); };
document.getElementById('reset').onclick = function () {
resetCounter();
}
function attachMoveEvent(name) {
map.on(name, function(){
document.getElementById(name).innerHTML = map.getCenter() + ' z' + map.getZoom();
});
}
attachMoveEvent('movestart');
attachMoveEvent('zoomstart');
attachMoveEvent('move');
attachMoveEvent('moveend');
attachMoveEvent('zoomend');
positron.on('load', function(){
document.getElementById('load').innerHTML = map.getCenter() + ' z' + map.getZoom();
});
function resetCounter() {
var fields = ['tileload', 'tileerror', 'tileloadstart', 'tileunload', 'load', 'visible'];
for (var i = 0; i < fields.length; i++) {
gridCounts[fields[i]] = 0;
positronCounts[fields[i]] = 0;
document.getElementById('positron-' + fields[i]).innerHTML = 0;
document.getElementById('grid-' + fields[i]).innerHTML = 0;
}
};
</script>
</body>
</html>

31
src/public/Leaflet-1.7.1/debug/map/tile-opacity.html Normal file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
<script>
var map = new L.Map('map');
var nexrad = new L.TileLayer.WMS("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
layers: 'nexrad-n0r-900913',
format: 'image/png',
transparent: true,
attribution: "Weather data &copy; 2011 IEM Nexrad",
opacity: 0.4
});
var bounds = new L.LatLngBounds(new L.LatLng(32, -126), new L.LatLng(50, -64));
map.addLayer(nexrad).fitBounds(bounds);
</script>
</body>
</html>

68
src/public/Leaflet-1.7.1/debug/map/tooltip.html Normal file
View File

@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script>
<style type="text/css">
.my-div-icon {
background-color: goldenrod;
text-align: center;
}
#map {
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var center = [41.2058, 9.4307];
var map = L.map('map').setView(center, 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.polygon([[41.21, 9.42], [41.22, 9.40], [41.23, 9.40]]).addTo(map).bindTooltip('Default centered polygon tooltip');
L.polygon([[41.20, 9.41], [41.20, 9.39], [41.21, 9.40]]).addTo(map).bindTooltip('Polygon tooltip following mouse', {sticky: true});
L.polygon([[41.18, 9.42], [41.17, 9.40], [41.19, 9.38]]).addTo(map).bindTooltip('Permanent polygon tooltip', {permanent: true});
L.marker([41.20, 9.4307]).addTo(map).bindTooltip('tooltip on the left', {direction: 'left'});
L.marker([41.206, 9.44]).addTo(map).bindTooltip('click me, I have a popup', {permanent: true, interactive: true}).bindPopup('See?');
L.circleMarker([41.206, 9.48], {color: 'Chocolate', radius: 12}).addTo(map).bindTooltip('Hello Left World', {direction: 'left'});
L.circleMarker([41.20, 9.50], {color: 'Chocolate', radius: 12}).addTo(map).bindTooltip('Hello top World', {direction: 'top', permanent: true});
L.circleMarker([41.20, 9.47], {color: 'Tomato', radius: 10}).addTo(map).bindTooltip('Seems I am centered', {direction: 'center', permanent: true, interactive: true}).bindPopup('Yeah');
L.circleMarker([41.195, 9.47], {color: 'Tomato', radius: 10}).addTo(map).bindTooltip('Me too', {direction: 'center'}).bindPopup('Yeah');
var icon = L.divIcon({
className: 'my-div-icon',
html: '<p>A div icon</p>',
iconSize: [50, 50]
});
L.marker([41.22, 9.48], {icon: icon}).addTo(map).bindTooltip('A div icon tooltip following mouse', {sticky: true, direction: 'auto'});
L.marker([41.23, 9.47], {icon: icon}).addTo(map).bindTooltip('A div icon tooltip with custom offset', {direction: 'top', offset: [-25, -25]});
L.marker([41.23, 9.42], {draggable: true}).addTo(map).bindTooltip('Draggable marker tooltip', {permanent: true, direction: 'auto'});
L.marker([41.19, 9.43]).addTo(map).bindTooltip('Clickable marker tooltip', {permanent: true, interactive: true}).on('click', function () { alert('clicked!'); });
var marker1 = L.marker([41.18, 9.45], {description: 'Marker 1'});
var marker2 = L.marker([41.18, 9.46], {description: 'Marker 2'});
var group = new L.FeatureGroup([marker1, marker2]).addTo(map);
group.bindTooltip(function (layer) {
return 'Group tooltip: ' + layer.options.description;
}, {opacity: 0.7});
L.marker([41.18, 9.35]).addTo(map).bindTooltip('Top tooltip is top', {permanent: true, direction: 'top'});
L.marker([41.173, 9.37]).addTo(map).bindTooltip('Bottom tooltip is weird but ok', {permanent: true, direction: 'bottom'});
L.polyline([[41.20, 9.36], [41.205, 9.35], [41.19, 9.34]]).bindTooltip('Polyline tooltip', {permanent: true, direction: 'top'}).addTo(map);
L.polygon([[41.21, 9.36], [41.24, 9.35], [41.23, 9.34]]).addTo(map).bindTooltip('Top tooltip following mouse', {sticky: true, direction: 'top'});
</script>
</body>
</html>

80
src/public/Leaflet-1.7.1/debug/map/videooverlay.html Normal file
View File

@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<meta charset="utf-8" />
<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>
</head>
<body>
<div id="map" style='width:750px; height: 450px;'></div>
<button id="populate">Populate with 10 markers</button>
<script type="text/javascript">
var map = L.map('map');
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox/satellite-v9',
tileSize: 512,
zoomOffset: -1
}).addTo(map);
var videoUrls = [
'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
],
bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);
map.fitBounds(bounds);
var overlay = L.videoOverlay(videoUrls, bounds, {
opacity: 0.8,
interactive: true,
autoplay: false
});
map.addLayer(overlay);
overlay.on('dblclick',function (e) {
console.log('Double click on image.');
});
overlay.on('load', function () {
var MyPauseControl = L.Control.extend({
onAdd: function() {
var button = L.DomUtil.create('button');
button.innerHTML = '⏸';
L.DomEvent.on(button, 'click', function () {
overlay.getElement().pause();
});
return button;
}
});
var MyPlayControl = L.Control.extend({
onAdd: function() {
var button = L.DomUtil.create('button');
button.innerHTML = '⏵';
L.DomEvent.on(button, 'click', function () {
overlay.getElement().play();
});
return button;
}
});
var pauseControl = (new MyPauseControl()).addTo(map);
var playControl = (new MyPlayControl()).addTo(map);
});
</script>
</body>
</html>

29
src/public/Leaflet-1.7.1/debug/map/wms-marble.html Normal file
View File

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map" style="width: 1024px; height: 440px; border: 1px solid #ccc"></div>
<script>
var map = new L.Map('map', {crs: L.CRS.EPSG4326});
var bluemarble = new L.TileLayer.WMS("http://maps.opengeo.org/geowebcache/service/wms", {
layers: 'bluemarble',
attribution: "Data &copy; NASA Blue Marble, image service by OpenGeo",
minZoom: 0,
maxZoom: 5
});
map.addLayer(bluemarble).fitWorld();
</script>
</body>
</html>

39
src/public/Leaflet-1.7.1/debug/map/wms.html Normal file
View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
<script>
var map = new L.Map('map');
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {attribution: osmAttrib}),
osm2 = L.tileLayer(osmUrl, {attribution: osmAttrib});
var nexrad = new L.TileLayer.WMS("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
layers: 'nexrad-n0r-900913',
format: 'image/png',
transparent: true,
attribution: "Weather data &copy; 2011 IEM Nexrad",
opacity: 0.4
});
var bounds = new L.LatLngBounds(new L.LatLng(32, -126), new L.LatLng(50, -64));
map.addLayer(osm).addLayer(nexrad).fitBounds(bounds);
L.control.layers({"CM": osm, "CM2": osm2}, {"NexRad": nexrad}).addTo(map);
</script>
</body>
</html>

108
src/public/Leaflet-1.7.1/debug/map/zoom-delta.html Normal file
View File

@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<meta name="viewport" content="initial-scale=1.0" />
<link rel="stylesheet" href="../../dist/leaflet.css" />
<link rel="stylesheet" href="../css/mobile.css" />
<script src="../leaflet-include.js"></script>
<style>
.container {
float:left; width: 600px; height: 600px;
position: relative;
border: 1px solid gray;
}
#map1, #map2 {
position:absolute;
top:2em;
bottom:2em;
left:0;
right:0;
}
#zoom1, #zoom2 {
position:absolute;
bottom:0;
left:0;
right:0;
}
</style>
</head>
<body>
<h1>Zoom delta test.</h1>
<p>Zooming with touch zoom, box zoom or flyTo then <code>map.stop()</code> must make the zoom level snap to the value of the <code>zoomSnap</code> option. Zoom interactions (keyboard, mouse wheel, zoom control buttons must change the zoom by the amount in the <code>zoomDelta</code> option.</p>
<div>
<button id="sf">SF</button>
<button id="trd">TRD</button>
<button id="stop">stop</button>
</div>
<div class='container'>
Snap: 0.25. Delta: 0.5.
<div id="map1"></div>
<span id="zoom1"></span>
</div>
<div class='container'>
Snap: 0 (off). Delta: 0.25.
<div id="map2"></div>
<span id="zoom2"></span>
</div>
<script>
var sf = [37.77, -122.42],
trd = [63.41, 10.41];
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm1 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
osm2 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
center = L.latLng(63.41, 10.41);
var map1 = new L.Map('map1', {
center: center,
layers: [osm1],
zoom: 5,
zoomSnap: 0.25,
zoomDelta: 0.5,
wheelPxPerZoomLevel: 50
});
var map2 = new L.Map('map2', {
center: center,
layers: [osm2],
zoom: 5,
zoomSnap: 0,
zoomDelta: 0.25,
wheelPxPerZoomLevel: 50
});
map1.on('zoomend',function(){
document.getElementById('zoom1').innerHTML = "Zoom level: " + map1.getZoom();
});
map2.on('zoomend',function(){
document.getElementById('zoom2').innerHTML = "Zoom level: " + map2.getZoom();
});
document.getElementById('sf').onclick = function () {
map1.flyTo(sf, 10, {duration: 20});
map2.flyTo(sf, 10, {duration: 20});
};
document.getElementById('trd').onclick = function () {
map1.flyTo(trd, 10, {duration: 20});
map2.flyTo(trd, 10, {duration: 20});
};
document.getElementById('stop').onclick = function () {
map1.stop();
map2.stop();
};
</script>
</body>
</html>

43
src/public/Leaflet-1.7.1/debug/map/zoom-remain-centered.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map"></div>
<script>
// Check the 'center' setting of the scroll-wheel, double-click and touch-zoom
// handlers
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {minZoom: 14, attribution: osmAttrib}),
latlng = new L.LatLng(51.1788409,-1.82618);
var map = new L.Map('map', {
center: latlng,
zoom: 15,
layers: [osm],
scrollWheelZoom: 'center', // zoom to center regardless where mouse is
doubleClickZoom: 'center',
touchZoom: 'center'
});
L.marker(latlng).addTo(map);
L.control.scale().addTo(map);
</script>
</body>
</html>

52
src/public/Leaflet-1.7.1/debug/map/zoomlevels.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map"></div>
<script>
// Test that changing between layers with differing zoomlevels also updates
// the zoomlevels in the map + also
var map = L.map('map').setView(L.latLng(50.5, 30.51), 0);
var osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {attribution: osmAttrib, minZoom: 0, maxZoom: 10}).addTo(map),
osm2 = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {attribution: 'Hello world', minZoom: 5, maxZoom: 18});
L.control.layers({
'OSM (5-18)': osm2,
'OSM (0-10)': osm
}).addTo(map);
L.control.scale().addTo(map);
function getRandomLatLng(llbounds) {
var s = llbounds.getSouth(),
n = llbounds.getNorth(),
w = llbounds.getWest(),
e = llbounds.getEast();
return L.latLng(
s + (Math.random() * (n - s)),
w + (Math.random() * (e - w))
)
}
for (var i = 0; i < 1000; i++) {
L.marker(getRandomLatLng(map.getBounds())).addTo(map);
}
</script>
</body>
</html>

104
src/public/Leaflet-1.7.1/debug/map/zoompan.html Normal file
View File

@@ -0,0 +1,104 @@
<!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" />
<style>
#map {
width: 600px;
height: 400px;
}
button {
min-width: 3em;
text-align: center;
}
</style>
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map"></div>
<div style="position: absolute; left: 620px; top: 10px; z-index: 500">
<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>
<table>
<tr><td>on movestart</td><td id='movestart'></td></tr>
<tr><td>on zoomstart</td><td id='zoomstart'></td></tr>
<tr><td>on move</td><td id='move'></td></tr>
<tr><td>on moveend</td><td id='moveend'></td></tr>
<tr><td>on zoomend</td><td id='zoomend'></td></tr>
<tr><td>on grid load</td><td id='load'></td></tr>
</div>
<script>
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', {
zoomSnap: 0.25
}).setView(dc, 14);
var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);
var path = new L.Polyline([kyiv, trd, lnd, mad, dc, sf]).addTo(map);
var marker1 = L.marker(kyiv).addTo(map),
marker2 = L.marker(lnd).addTo(map),
marker3 = L.marker(dc).addTo(map),
marker4 = L.marker(sf).addTo(map),
marker5 = L.marker(trd).addTo(map),
marker6 = L.marker(mad).addTo(map);
var nullIslandKitten = L.imageOverlay('http://placekitten.com/300/400?image=6', [[-0.2,-0.15], [0.2, 0.15]]).addTo(map);
document.getElementById('dc').onclick = function () { map.flyTo(dc, 4); };
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(); };
function logEvent(e) { console.log(e.type); }
function attachMoveEvent(name) {
map.on(name, function(){
document.getElementById(name).innerHTML = map.getCenter() + ' z' + map.getZoom();
});
}
attachMoveEvent('movestart');
attachMoveEvent('zoomstart');
attachMoveEvent('move');
attachMoveEvent('moveend');
attachMoveEvent('zoomend');
positron.on('load', function(){
document.getElementById('load').innerHTML = map.getCenter() + ' z' + map.getZoom();
});
</script>
</body>
</html>