cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

LatLngBounds.extend(otherLatLngBounds) seems to be working. Addresses #517.

Browse Source
This commit is contained in:
Jason Sanford 2012-03-03 08:39:18 -07:00
parent 20c0bad37e
commit d86278571d
2 changed files with 103 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
debug/vector/bounds-extend.html Normal file
View File

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
<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 cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmade = new L.TileLayer(cloudmadeUrl, {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: [cloudmade],
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>

21
src/geo/LatLngBounds.js
View File

@ -13,16 +13,21 @@ L.LatLngBounds = L.Class.extend({
}
},
// extend the bounds to contain the given point
extend: function (/*LatLng*/ latlng) {
// extend the bounds to contain the given point or bounds
extend: function (/*LatLng or LatLngBounds*/ obj) {
if (obj instanceof L.LatLng) {
if (!this._southWest && !this._northEast) {
this._southWest = new L.LatLng(latlng.lat, latlng.lng, true);
this._northEast = new L.LatLng(latlng.lat, latlng.lng, true);
this._southWest = new L.LatLng(obj.lat, obj.lng, true);
this._northEast = new L.LatLng(obj.lat, obj.lng, true);
} else {
this._southWest.lat = Math.min(latlng.lat, this._southWest.lat);
this._southWest.lng = Math.min(latlng.lng, this._southWest.lng);
this._northEast.lat = Math.max(latlng.lat, this._northEast.lat);
this._northEast.lng = Math.max(latlng.lng, this._northEast.lng);
this._southWest.lat = Math.min(obj.lat, this._southWest.lat);
this._southWest.lng = Math.min(obj.lng, this._southWest.lng);
this._northEast.lat = Math.max(obj.lat, this._northEast.lat);
this._northEast.lng = Math.max(obj.lng, this._northEast.lng);
}
} else if (obj instanceof L.LatLngBounds) {
this.extend(obj._southWest);
this.extend(obj._northEast);
}
return this;
},