leaflet
Version:
JavaScript library for mobile-friendly interactive maps
89 lines (70 loc) • 2.82 kB
HTML
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<link rel="stylesheet" href="../css/screen.css" />
<script type="text/javascript" src="../../build/deps.js"></script>
<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 = 'http://{s}.tile.osm.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>