1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
<!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>
<button onclick="boundsExtendBounds();">Extend the bounds of the center rectangle with the upper right rectangle</button>
<button onclick="boundsExtendLatLng()">Extend the bounds of the center rectangle with the lower left marker</button>
<script src="route.js"></script>
<script>
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osm = new L.TileLayer(osmUrl, {maxZoom: 18});
var latLng = new L.LatLng(54.18815548107151, -7.657470703124999);
var bounds1 = new L.LatLngBounds(new L.LatLng(54.559322, -5.767822), new L.LatLng(56.1210604, -3.021240));
var bounds2 = new L.LatLngBounds(new L.LatLng(56.56023925701561, -2.076416015625), new L.LatLng(57.01158038001565, -0.9777832031250001));
var bounds3;
var map = new L.Map('map', {
layers: [osm],
center: bounds1.getCenter(),
zoom: 7
});
var rectangle1 = new L.Rectangle(bounds1);
var rectangle2 = new L.Rectangle(bounds2);
var rectangle3;
var marker = new L.Marker(latLng);
map.addLayer(rectangle1).addLayer(rectangle2).addLayer(marker);
function boundsExtendBounds() {
if (rectangle3) {
map.removeLayer(rectangle3);
rectangle3 = null;
}
if (bounds3) {
bounds3 = null;
}
bounds3 = new L.LatLngBounds(bounds1.getSouthWest(), bounds1.getNorthEast());
bounds3.extend(bounds2);
rectangle3 = new L.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 L.LatLngBounds(bounds1.getSouthWest(), bounds1.getNorthEast());
bounds3.extend(marker.getLatLng());
rectangle3 = new L.Rectangle(bounds3, {
color: "#ff0000",
weight: 1,
opacity: 1,
fillOpacity: 0
});
map.addLayer(rectangle3);
}
</script>
</body>
</html>
|
