mirror of
https://github.com/Leaflet/Leaflet.git
synced 2025-07-23 00:34:55 +00:00

Signed-off-by: Jon Koops <jonkoops@gmail.com> Co-authored-by: Florian Bischof <design.falke@gmail.com>
99 lines
2.7 KiB
HTML
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>
|