Files
leaflet/debug/vector/bounds-extend.html
Jon Koops 7ac98758d4 Drop UMD and make ESM the default entrypoint (#8826)
Signed-off-by: Jon Koops <jonkoops@gmail.com>
Co-authored-by: Florian Bischof <design.falke@gmail.com>
2025-03-17 15:59:00 +01:00

99 lines
2.7 KiB
HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Leaflet debug page - Bounds Extend</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.js"
}
}
</script>
</head>
<body>
<div id="map"></div>
<button type="button" id="extendBounds">Extend the bounds of the center rectangle with the upper right rectangle</button>
<button type="button" id="extendLatLng">Extend the bounds of the center rectangle with the lower left marker</button>
<script type="module">
import {TileLayer, LatLngBounds, LatLng, Map, Rectangle, Marker} from 'leaflet';
const bounds1 = new LatLngBounds(
new LatLng(54.559322, -5.767822),
new LatLng(56.1210604, -3.021240)
);
const bounds2 = new LatLngBounds(
new LatLng(56.56023925701561, -2.076416015625),
new LatLng(57.01158038001565, -0.9777832031250001)
);
let bounds3 = null;
const osm = new TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18});
const map = new Map('map', {
layers: [osm],
center: bounds1.getCenter(),
zoom: 7
});
const rectangle1 = new Rectangle(bounds1);
const rectangle2 = new Rectangle(bounds2);
let rectangle3 = null;
const marker = new Marker(new LatLng(54.18815548107151, -7.657470703124999));
map.addLayer(rectangle1).addLayer(rectangle2).addLayer(marker);
const extendBoundsBtn = document.getElementById('extendBounds');
const extendLatLngBtn = document.getElementById('extendLatLng');
extendBoundsBtn.addEventListener('click', boundsExtendBounds);
extendLatLngBtn.addEventListener('click', boundsExtendLatLng);
function boundsExtendBounds() {
if (rectangle3) {
map.removeLayer(rectangle3);
rectangle3 = null;
}
if (bounds3) {
bounds3 = null;
}
bounds3 = new LatLngBounds(bounds1.getSouthWest(), bounds1.getNorthEast());
bounds3.extend(bounds2);
rectangle3 = new Rectangle(bounds3, {
color: '#ff0000',
weight: 1,
opacity: 1,
fillOpacity: 0
});
map.addLayer(rectangle3);
}
function boundsExtendLatLng() {
if (rectangle3) {
map.removeLayer(rectangle3);
rectangle3 = null;
}
if (bounds3) {
bounds3 = null;
}
bounds3 = new LatLngBounds(bounds1.getSouthWest(), bounds1.getNorthEast());
bounds3.extend(marker.getLatLng());
rectangle3 = new Rectangle(bounds3, {
color: '#ff0000',
weight: 1,
opacity: 1,
fillOpacity: 0
});
map.addLayer(rectangle3);
}
</script>
</body>
</html>