[Pkg-javascript-commits] [leaflet-markercluster] 41/479: Getting animated animationZoomOut working. Still breaks on a multizoom
Jonas Smedegaard
dr at jones.dk
Thu Oct 16 16:00:07 UTC 2014
This is an automated email from the git hooks/post-receive script.
js pushed a commit to branch master
in repository leaflet-markercluster.
commit 1fcec54dcfd3e24b9b3da9f18619cafbec7f0a99
Author: danzel <danzel at localhost.geek.nz>
Date: Thu Jul 19 10:32:25 2012 +1200
Getting animated animationZoomOut working. Still breaks on a multizoom
---
src/MarkerCluster.js | 71 +++++++++++++++++++++++++++++++++++++++++++++++
src/MarkerClusterGroup.js | 31 +++++++++++----------
2 files changed, 88 insertions(+), 14 deletions(-)
diff --git a/src/MarkerCluster.js b/src/MarkerCluster.js
index 05f134a..ec8b97c 100644
--- a/src/MarkerCluster.js
+++ b/src/MarkerCluster.js
@@ -6,6 +6,8 @@ L.MarkerCluster = L.Marker.extend({
this._childClusters = [];
this._childCount = 0;
+ this._haveGeneratedChildClusters = false;
+
this._bounds = new L.LatLngBounds();
this._addChild(a);
@@ -119,6 +121,33 @@ L.MarkerCluster = L.Marker.extend({
return false;
},
+ _recursivelyRemoveChildrenAndAddNowVisibleMarkers: function (bounds, depthToStartAt, depthToAnimateIn) {
+ //TODO: Care more about bounds?
+ var childClusters = this._childClusters,
+ markers = this._markers,
+ i;
+
+ if (depthToStartAt == 0) {
+ this._recursivelyRemoveChildrenFromMap(depthToAnimateIn);
+
+ } else {
+ for (i = childClusters.length - 1; i >= 0; i--) {
+ if (bounds.intersects(childClusters[i]._bounds)) {
+ childClusters[i]._recursivelyRemoveChildrenAndAddNowVisibleMarkers(bounds, depthToStartAt - 1, depthToAnimateIn);
+ }
+ }
+
+ if (depthToStartAt == 1) {
+ for (i = markers.length - 1; i >= 0; i--) {
+ var m = markers[i];
+ if (bounds.contains(m._latlng)) {
+ L.FeatureGroup.prototype.addLayer.call(this._group, m);
+ }
+ }
+ }
+ }
+ },
+
_recursivelyAnimateChildrenIn: function (center, depth) {
var markers = this._markers,
markersLength = markers.length,
@@ -150,6 +179,48 @@ L.MarkerCluster = L.Marker.extend({
}
},
+ _recursivelyAnimateChildrenInAndAddSelfToMap: function (bounds, depthToStartAt, depthToAnimateIn) {
+ //TODO: Care more about bounds?
+ var childClusters = this._childClusters,
+ i;
+
+ if (depthToStartAt == 0) {
+ this._recursivelyAnimateChildrenIn(this._group._map.latLngToLayerPoint(this.getLatLng()).round(), depthToAnimateIn);
+
+ //Add Self
+ if (bounds.contains(this._latlng)) { //Add the new cluster but have it be hidden (so it gets animated, display=none stops transition)
+
+ //TODO: depthToAnimateIn affects _isSingleParent, if there is a multizoom we may/may not be.
+ if (this._isSingleParent() && depthToAnimateIn == 1) { //If we are the same as our parent, don't do an animation, just immediately appear
+ this.setOpacity(1);
+ this._recursivelyRemoveChildrenFromMap(depthToAnimateIn); //Immediately
+ } else {
+ this.setOpacity(0);
+ }
+ this._addToMap();
+ }
+
+ } else {
+ for (i = childClusters.length - 1; i >= 0; i--) {
+ if (bounds.intersects(childClusters[i]._bounds)) {
+ childClusters[i]._recursivelyAnimateChildrenInAndAddSelfToMap(bounds, depthToStartAt - 1, depthToAnimateIn);
+ }
+ }
+ }
+ },
+
+ _recursivelyBecomeVisible: function (bounds, depth) {
+ if (depth == 0) {
+ this.setOpacity(1);
+ } else {
+ for (var i = this._childClusters.length - 1; i >= 0; i--) {
+ if (bounds.intersects(this._childClusters[i]._bounds)) {
+ this._childClusters[i]._recursivelyBecomeVisible(bounds, depth - 1);
+ }
+ }
+ }
+ },
+
_recursivelyAddChildrenToMap: function (startPos, depth, bounds) {
if (depth === 0) {
diff --git a/src/MarkerClusterGroup.js b/src/MarkerClusterGroup.js
index a6f422e..28ecbbd 100644
--- a/src/MarkerClusterGroup.js
+++ b/src/MarkerClusterGroup.js
@@ -336,21 +336,17 @@ L.MarkerClusterGroup = L.FeatureGroup.extend({
}
});
-L.MarkerClusterGroup.include(true /*!L.DomUtil.TRANSITION*/ ? { //HACK TO JUST DO THE NON ANIMATED ONES FOR EASYNESS
+L.MarkerClusterGroup.include(!L.DomUtil.TRANSITION ? {
//Non Animated versions of everything
_animationStart: function () {
//Do nothing...
},
_animationZoomIn: function (previousZoomLevel, newZoomLevel) {
- console.log('in ' + previousZoomLevel + ' ' + newZoomLevel + ' @ ' + this._topClusterLevel._zoom);
this._topClusterLevel._recursivelyRemoveChildrenFromMap(this._currentShownBounds, previousZoomLevel - this._topClusterLevel._zoom + 1);
this._topClusterLevel._recursivelyAddChildrenToMap(null, newZoomLevel - this._topClusterLevel._zoom + 1, this._getExpandedVisibleBounds());
},
- //newLevelDepth: How deep down from _topClusterLevel the level we want to show is
- //zoomOutDepth: How deep from ^^that level^^ to the currently shown level (that needs hiding)
_animationZoomOut: function (previousZoomLevel, newZoomLevel) {
- console.log('out ' + previousZoomLevel + ' ' + newZoomLevel + ' @ ' + this._topClusterLevel._zoom);
this._topClusterLevel._recursivelyRemoveChildrenFromMap(this._currentShownBounds, previousZoomLevel - this._topClusterLevel._zoom + 1);
this._topClusterLevel._recursivelyAddChildrenToMap(null, newZoomLevel - this._topClusterLevel._zoom + 1, this._getExpandedVisibleBounds());
}
@@ -360,7 +356,7 @@ L.MarkerClusterGroup.include(true /*!L.DomUtil.TRANSITION*/ ? { //HACK TO JUST D
_animationStart: function () {
this._map._mapPane.className += ' leaflet-cluster-anim';
},
- _animationZoomIn: function (startingClusters, startingUnclustered, depth) {
+ _animationZoomIn: function (previousZoomLevel, newZoomLevel) {
var me = this,
map = this._map,
bounds = this._getExpandedVisibleBounds(),
@@ -418,13 +414,18 @@ L.MarkerClusterGroup.include(true /*!L.DomUtil.TRANSITION*/ ? { //HACK TO JUST D
}, 250);
}, 0);
},
- _animationZoomOut: function (newClusters, newUnclustered, depth) {
+ _animationZoomOut: function (previousZoomLevel, newZoomLevel) {
var map = this._map,
bounds = this._getExpandedVisibleBounds(),
- i;
+ i,
+ depthToStartAt = previousZoomLevel - this._topClusterLevel._zoom,
+ depthToAnimateIn = previousZoomLevel - newZoomLevel;
+ console.log('animationZoomOut ' + depthToStartAt + ' ' + depthToAnimateIn);
//Animate all of the markers in the clusters to move to their cluster center point
- for ( i = 0; i < newClusters.length; i++) {
+ //bounds, depthToStartAt, depthToAnimateIn
+ this._topClusterLevel._recursivelyAnimateChildrenInAndAddSelfToMap(bounds, depthToStartAt, depthToAnimateIn);
+ /*for ( i = 0; i < newClusters.length; i++) {
var c = newClusters[i];
c._recursivelyAnimateChildrenIn(this._map.latLngToLayerPoint(c.getLatLng()).round(), depth);
@@ -439,27 +440,29 @@ L.MarkerClusterGroup.include(true /*!L.DomUtil.TRANSITION*/ ? { //HACK TO JUST D
}
c._addToMap();
}
- }
+ }*/
this._inZoomAnimation++;
var me = this;
//Immediately fire an event to update the opacity (If we immediately set it they won't animate)
setTimeout(function () {
- for (i = 0; i < newClusters.length; i++) {
+ me._topClusterLevel._recursivelyBecomeVisible(bounds, depthToStartAt);
+ /*for (i = 0; i < newClusters.length; i++) {
var n = newClusters[i];
if (n._icon) {
n.setOpacity(1);
}
- }
+ }*/
}, 0);
//TODO: Maybe use the transition timing stuff to make this more reliable
setTimeout(function () {
map._mapPane.className = map._mapPane.className.replace(' leaflet-cluster-anim', '');
- for (i = 0; i < newClusters.length; i++) {
+ me._topClusterLevel._recursivelyRemoveChildrenAndAddNowVisibleMarkers(bounds, depthToStartAt, depthToAnimateIn);
+ /*for (i = 0; i < newClusters.length; i++) {
var cl = newClusters[i];
cl._recursivelyRemoveChildrenFromMap(depth);
}
@@ -468,7 +471,7 @@ L.MarkerClusterGroup.include(true /*!L.DomUtil.TRANSITION*/ ? { //HACK TO JUST D
if (bounds.contains(m._latlng)) {
L.FeatureGroup.prototype.addLayer.call(me, m);
}
- }
+ }*/
me._inZoomAnimation--;
}, 250);
}
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/leaflet-markercluster.git
More information about the Pkg-javascript-commits
mailing list