Skip to content
This repository has been archived by the owner on Nov 21, 2024. It is now read-only.

Commit

Permalink
Fixed compatibility for Leaflet 1.0-beta1
Browse files Browse the repository at this point in the history
  • Loading branch information
@IvanSanchez
IvanSanchez committed Aug 20, 2015
1 parent ca3463a commit 2f27ab5
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 129 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
],
"description": "Restricts Leaflet's map bounds to area not covered by any map controls.",
"dependencies": {
"leaflet": "~0.7.3"
"leaflet": "~1.0.0"
},
"main": "src/Leaflet.ControlledBounds.js",
"keywords": [
Expand Down
55 changes: 36 additions & 19 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,15 @@
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<!-- <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> -->
<!-- <script src="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.js"></script> -->
<script src="../../Leaflet/dist/leaflet-src.js"></script>

<!-- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> -->
<!-- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.css" /> -->
<link rel="stylesheet" href="../../Leaflet/dist/leaflet.css" />

<script src="../src/Leaflet.ControlledBounds.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
Expand All @@ -23,26 +29,32 @@
var Madrid = [40.383333,-3.716667];
var Trondheim = [63.429722,10.393333];

var map = new L.Map('map', {zoomControl: false, attributionControl: false}).setView(Madrid, 2);
var map = new L.Map('map', {
zoomControl: false,
attributionControl: false,
// zoomAnimation: false
}).setView(Madrid, 2);
// map.scrollWheelZoom.disable();

console.log("Map bounds before controls have been added: ",map.getBounds().toBBoxString());

var markers = L.featureGroup([L.marker(Madrid), L.marker(Trondheim)]);
markers.addTo(map);

var base = L.tileLayer('http://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
attribution: '<a href="https://www.mapbox.com/about/maps/">Terms and Feedback</a>',
id: 'examples.map-20v6611k'
})
var base = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
});
base.addTo(map);


var lastPixelBounds = null;
function displayBounds() {
var bounds = map.getControlledBounds();
if (JSON.stringify(bounds) === JSON.stringify(lastPixelBounds)) return;
// console.log('pixel bounds: ', bounds);
if (JSON.stringify(bounds) === JSON.stringify(lastPixelBounds)) {
L.Util.requestAnimFrame(displayBounds);
return;
}
console.log('pixel bounds: ', bounds);
// Four <div>s so that the user can still scroll in the map
var b1 = document.getElementById('b1'); // top
var b2 = document.getElementById('b2'); // bottom
Expand All @@ -52,9 +64,9 @@
b1.style.top = b3.style.top = b4.style.top = bounds.min.y + 'px';
b1.style.left = b2.style.left = b3.style.left = bounds.min.x + 'px';
b1.style.width = b2.style.width = bounds.max.x - bounds.min.x - 2 + 'px';
b4.style.left = bounds.max.x - 2 + 'px';
b4.style.left = bounds.max.x - 2 + 'px';
b3.style.height= b4.style.height= bounds.max.y - bounds.min.y - 2 + 'px';
b2.style.top = bounds.max.y - 2 + 'px';
b2.style.top = bounds.max.y - 2 + 'px';
// b.style.height= bounds.max.y - bounds.min.y - 2 + 'px';

c.style.top = (bounds.min.y + bounds.max.y) / 2 - 2 + 'px';
Expand All @@ -63,24 +75,29 @@

console.log("Map bounds now: ",map.getBounds().toBBoxString());
// console.log("Map center: ",map.getCenter());
// lastPixelBounds = bounds;
lastPixelBounds = bounds;

L.Util.requestAnimFrame(displayBounds);
}

window.setInterval(function(){
displayBounds();
}, 250);
displayBounds();


window.setTimeout(function(){
L.control.attribution().addTo(map);
L.control.zoom().addTo(map);
L.control.attribution({ position:'topleft' }).addTo(map);
// L.control.zoom().addTo(map);
}, 2000 );
}, 200 );

window.setTimeout(function(){
L.control.layers([base]).addTo(map);
L.control.scale().addTo(map);
L.control.scale().addTo(map);
L.control.scale().addTo(map);
L.control.scale().addTo(map);
L.control.layers([base],[],{ position:'bottomleft' }).addTo(map);
}, 2050);
}, 250);



Expand All @@ -101,8 +118,8 @@
</script>

<div style='clear:both'>
<button onclick='map.setView(Madrid, 16)'>Madrid</button>
<button onclick='map.setView(Trondheim, 16)'>Trondheim</button>
<button onclick='map.setView(Madrid, 3)'>Madrid</button>
<button onclick='map.setView(Trondheim, 3)'>Trondheim</button>
<button onclick='map.zoomIn()'>Zoom in</button>
<button onclick='map.zoomOut()'>Zoom out</button>
<button onclick='portrait()'>Portrait</button>
Expand Down
159 changes: 50 additions & 109 deletions src/Leaflet.ControlledBounds.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@
return this._controlledBounds;
},



_calculateControlledBounds: function() {
// Given the positions of the controls relative to the control container
// (which is the controls' offsetParent), calculate corners which are good
Expand Down Expand Up @@ -122,7 +120,7 @@
candidates.bottomleft = candidates.bottomleft.filter(function(i){return !!i;});
candidates.bottomright = candidates.bottomright.filter(function(i){return !!i;});

// console.log(candidates);
// console.log(candidates);


// Try out all combinations of the candidate corners, stick with the one that gives
Expand Down Expand Up @@ -174,81 +172,76 @@
return this._controlledBounds = candidateBounds;
},

getBounds: function() {
if (!this._controlledBounds) {
this._calculateControlledBounds();
}
var origin = this.getPixelOrigin();

var min = this.unproject([origin.x + this._controlledBounds.min.x,
origin.y + this._controlledBounds.min.y]);
var max = this.unproject([origin.x + this._controlledBounds.max.x,
origin.y + this._controlledBounds.max.y]);

return new L.LatLngBounds(min, max);
},


getOffset: function() {
return this._controlledOffset ? this._controlledOffset : L.point(0, 0);
},

getCenter: function () {
if (!this._controlledBounds) {
return mapProto.getCenter.call(this);
}

return this.containerPointToLatLng(this._controlledBounds.getCenter());
_offsetLatLng: function (latlng, zoom) {
zoom = zoom === undefined ? this.getZoom() : zoom;
return this.unproject(
this.project(latlng, zoom).add(this.getOffset()),
zoom
);
},

setView: function (center, zoom, options) {
center = L.latLng(center);
// this._calculateControlledBounds();

if (this._controlledBounds) {
var point = this.project(center, this._limitZoom(zoom));
point = point.add(this.getOffset());
center = this.unproject(point, this._limitZoom(zoom));
}
_deoffsetLatLng: function (latlng, zoom) {
zoom = zoom === undefined ? this.getZoom() : zoom;
return this.unproject(
this.project(latlng, zoom).subtract(this.getOffset()),
zoom
);
},

return mapProto.setView.call(this, center, zoom, options);
setView: function (center, zoom) {
return mapProto.setView.call(this, this._offsetLatLng(center, zoom), zoom);
},


// setZoomAround needs to *undo* the changes introduced to `setView`
setZoomAround: function (latlng, zoom, options) {
if (this._controlledBounds) {
var scale = this.getZoomScale(zoom),
viewHalf = this._controlledBounds.getCenter(),
containerPoint = latlng instanceof L.Point ? latlng : this.latLngToContainerPoint(latlng),
var scale = this.getZoomScale(zoom),
viewHalf = this.getSize().divideBy(2).subtract(this.getOffset()),
containerPoint = latlng instanceof L.Point ? latlng : this.latLngToContainerPoint(latlng),

centerOffset = containerPoint.subtract(viewHalf).multiplyBy(1 - 1 / scale),
newCenter = this.containerPointToLatLng(viewHalf.add(centerOffset));
centerOffset = containerPoint.subtract(viewHalf).multiplyBy(1 - 1 / scale),
newCenter = this.containerPointToLatLng(viewHalf.add(centerOffset));

return this.setView(newCenter, zoom, {zoom: options});
} else {
return mapProto.setZoomAround.call(this, latlng, zoom, options);
return this.setView(newCenter, zoom, {zoom: options});
},


// setZoom needs to *undo* the changes introduced to `setView`
setZoom: function (zoom, options) {
if (!this._loaded) {
this._zoom = zoom;
return this;
}
return this.setView(this._deoffsetLatLng(this.getCenter()), zoom, {zoom: options});
},


getBoundsZoom: function (bounds, inside, padding) { // (LatLngBounds[, Boolean, Point]) -> Number
// A shameless copy of Map.getBoundsZoom with a reference to _controlledBounds
// which sets the size.
getBoundsZoom: function (bounds, inside, padding) {
bounds = L.latLngBounds(bounds);

var zoom = this.getMinZoom() - (inside ? 1 : 0),
maxZoom = this.getMaxZoom(),
cb = this._controlledBounds,
size = (cb) ? L.point(cb.max.x - cb.min.x, cb.max.y - cb.min.y) : this.getSize(),
maxZoom = this.getMaxZoom(),
cb = this._controlledBounds,
size = (cb) ? L.point(cb.max.x - cb.min.x, cb.max.y - cb.min.y) : this.getSize(),

nw = bounds.getNorthWest(),
se = bounds.getSouthEast(),
nw = bounds.getNorthWest(),
se = bounds.getSouthEast(),

zoomNotFound = true,
boundsSize;
zoomNotFound = true,
boundsSize;

padding = L.point(padding || [0, 0]);

do {
zoom++;
boundsSize = this.project(se, zoom).subtract(this.project(nw, zoom)).add(padding);
boundsSize = this.project(se, zoom).subtract(this.project(nw, zoom)).add(padding).floor();
zoomNotFound = !inside ? size.contains(boundsSize) : boundsSize.x < size.x || boundsSize.y < size.y;

} while (zoomNotFound && zoom <= maxZoom);
Expand All @@ -260,72 +253,20 @@
return inside ? zoom : zoom - 1;
},

getBounds: function() {
if (this._controlledBounds) {
return L.latLngBounds(
this.containerPointToLatLng(this._controlledBounds.min),
this.containerPointToLatLng(this._controlledBounds.max)
);
} else {
return mapProto.getBounds.call(this);
}
},

invalidateSize: function (options) {
invalidateSize: function() {
if (!this._loaded) { return this; }

options = L.extend({
animate: false,
pan: true
}, options === true ? {animate: true} : options);

var oldCenter, oldSize;
if (this._controlledBounds) {
oldCenter = this._controlledBounds ? this._controlledBounds.getCenter() : this.getSize().divideBy(2).round();
oldSize = L.point(this._controlledBounds.max.x -
this._controlledBounds.min.x,
this._controlledBounds.max.y -
this._controlledBounds.min.y);
} else {
oldSize = this.getSize();
oldCenter = oldSize.divideBy(2).round();
}
this._sizeChanged = true;
this._initialCenter = null;
this._calculateControlledBounds();

var newCenter = this._lastControlledBounds.getCenter();
var newSize = L.point(this._controlledBounds.max.x - this._controlledBounds.min.x,
this._controlledBounds.max.y - this._controlledBounds.min.y);

var offset = oldCenter.subtract(newCenter);
var oldOffset = this.getOffset();

if (!offset.x && !offset.y) { return this; }
mapProto.invalidateSize.call(this);

if (options.animate && options.pan) {
this.panBy(offset);

} else {
if (options.pan) {
this._rawPanBy(offset);
}

this.fire('move');

if (options.debounceMoveend) {
clearTimeout(this._sizeTimer);
this._sizeTimer = setTimeout(L.bind(this.fire, this, 'moveend'), 200);
} else {
this.fire('moveend');
}
}
this._calculateControlledBounds();

return this.fire('resize', {
oldSize: oldSize,
newSize: newSize
});
this.panBy(this.getOffset().subtract(oldOffset));
}


});

L.Control.include({
Expand Down

0 comments on commit 2f27ab5

Please sign in to comment.