[Pkg-javascript-commits] [leaflet-markercluster] 160/219: Corrected spiderfy leg anim and leg opacity option
Jonas Smedegaard
dr at jones.dk
Sat May 7 09:39:30 UTC 2016
This is an automated email from the git hooks/post-receive script.
js pushed a commit to branch master
in repository leaflet-markercluster.
commit d6d4e7f89ffbbc0b41396279e106be8a77cf896c
Author: ghybs <ghybs1 at gmail.com>
Date: Thu Oct 22 23:13:04 2015 +0400
Corrected spiderfy leg anim and leg opacity option
Spiderfy leg animation should be corrected now for all cases (options set or not, animated or not).
Corrected use of `spiderLegPolylineOptions` so that it defines final opacity in animation mode.
Therefore, we can now specify a default opacity value (chose 0.5 as this was the previous animation final opacity) that drives the animation end.
Updated README in consequence.
---
README.md | 4 +-
dist/MarkerCluster.css | 18 +++++---
src/MarkerCluster.Spiderfier.js | 94 ++++++++++++++++++++---------------------
src/MarkerClusterGroup.js | 2 +-
4 files changed, 62 insertions(+), 56 deletions(-)
diff --git a/README.md b/README.md
index ded5f9a..1202a47 100644
--- a/README.md
+++ b/README.md
@@ -36,7 +36,7 @@ By default the Clusterer enables some nice defaults for you:
* **zoomToBoundsOnClick**: When you click a cluster we zoom to its bounds.
* **spiderfyOnMaxZoom**: When you click a cluster at the bottom zoom level we spiderfy it so you can see all of its markers. (*Note: the spiderfy occurs at the current zoom level if all items within the cluster are physically located at the same latitude and longitude.*)
* **removeOutsideVisibleBounds**: Clusters and markers too far from the viewport are removed from the map for performance.
-* **spiderLegPolylineOptions**: Allows you to specify [PolylineOptions](http://leafletjs.com/reference.html#polyline-options) to style spider legs. By default, they are `{ weight: 1.5, color: '#222' }`.
+* **spiderLegPolylineOptions**: Allows you to specify [PolylineOptions](http://leafletjs.com/reference.html#polyline-options) to style spider legs. By default, they are `{ weight: 1.5, color: '#222', opacity: 0.5 }`.
You can disable any of these as you want in the options when you create the MarkerClusterGroup:
```javascript
@@ -78,7 +78,7 @@ If you need to update the clusters icon (e.g. they are based on markers real-tim
* **maxClusterRadius**: The maximum radius that a cluster will cover from the central marker (in pixels). Default 80. Decreasing will make more, smaller clusters. You can also use a function that accepts the current map zoom and returns the maximum cluster radius in pixels.
* **polygonOptions**: Options to pass when creating the L.Polygon(points, options) to show the bounds of a cluster. Defaults to empty, which lets Leaflet use the [default Path options](http://leafletjs.com/reference.html#path-options).
* **singleMarkerMode**: If set to true, overrides the icon for all added markers to make them appear as a 1 size cluster. Note: the markers are not replaced by cluster objects, only their icon is replaced. Hence they still react to normal events, and option `disableClusteringAtZoom` does not restore their previous icon (see [#391](https://github.com/Leaflet/Leaflet.markercluster/issues/391)).
-* **spiderLegPolylineOptions**: Allows you to specify [PolylineOptions](http://leafletjs.com/reference.html#polyline-options) to style spider legs. By default, they are `{ weight: 1.5, color: '#222' }`.
+* **spiderLegPolylineOptions**: Allows you to specify [PolylineOptions](http://leafletjs.com/reference.html#polyline-options) to style spider legs. By default, they are `{ weight: 1.5, color: '#222', opacity: 0.5 }`.
* **spiderfyDistanceMultiplier**: Increase from 1 to increase the distance away from the center that spiderfied markers are placed. Use if you are using big marker icons (Default: 1).
* **iconCreateFunction**: Function used to create the cluster icon [See default as example](https://github.com/Leaflet/Leaflet.markercluster/blob/15ed12654acdc54a4521789c498e4603fe4bf781/src/MarkerClusterGroup.js#L542).
diff --git a/dist/MarkerCluster.css b/dist/MarkerCluster.css
index f16d3aa..c60d71b 100644
--- a/dist/MarkerCluster.css
+++ b/dist/MarkerCluster.css
@@ -1,6 +1,14 @@
-.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow, .leaflet-cluster-spider-leg {
- -webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in, -webkit-stroke-dashoffset 0.3s ease-out;
- -moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in, -moz-stroke-dashoffset 0.3s ease-out;
- -o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in, -o-stroke-dashoffset 0.3s ease-out;
- transition: transform 0.3s ease-out, opacity 0.3s ease-in, stroke-dashoffset 0.3s ease-out;
+.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
+ -webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
+ -moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
+ -o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
+ transition: transform 0.3s ease-out, opacity 0.3s ease-in;
+}
+
+.leaflet-cluster-spider-leg {
+ /* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
+ -webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
+ -moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
+ -o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
+ transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}
diff --git a/src/MarkerCluster.Spiderfier.js b/src/MarkerCluster.Spiderfier.js
index 1677ab2..5f302c4 100644
--- a/src/MarkerCluster.Spiderfier.js
+++ b/src/MarkerCluster.Spiderfier.js
@@ -68,9 +68,10 @@ L.MarkerCluster.include({
},
_generatePointsSpiral: function (count, centerPt) {
- var legLength = this._group.options.spiderfyDistanceMultiplier * this._spiralLengthStart,
- separation = this._group.options.spiderfyDistanceMultiplier * this._spiralFootSeparation,
- lengthFactor = this._group.options.spiderfyDistanceMultiplier * this._spiralLengthFactor,
+ var spiderfyDistanceMultiplier = this._group.options.spiderfyDistanceMultiplier,
+ legLength = spiderfyDistanceMultiplier * this._spiralLengthStart,
+ separation = spiderfyDistanceMultiplier * this._spiralFootSeparation,
+ lengthFactor = spiderfyDistanceMultiplier * this._spiralLengthFactor,
angle = 0,
res = [],
i;
@@ -116,20 +117,27 @@ L.MarkerCluster.include({
}
});
+//Non Animated versions of everything
L.MarkerClusterNonAnimated = L.MarkerCluster.extend({
- //Non Animated versions of everything
_animationSpiderfy: function (childMarkers, positions) {
var group = this._group,
map = group._map,
fg = group._featureGroup,
+ legOptions = this._group.options.spiderLegPolylineOptions,
i, m, leg, newPos;
- for (i = childMarkers.length - 1; i >= 0; i--) {
+ // Traverse in ascending order to make sure that inner circleMarkers are on top of further legs. Normal markers are re-ordered by newPosition.
+ // The reverse order trick no longer improves performance on modern browsers.
+ for (i = 0; i < childMarkers.length; i++) {
newPos = map.layerPointToLatLng(positions[i]);
m = childMarkers[i];
// Add the leg before the marker, so that in case the latter is a circleMarker, the leg is behind it.
+ leg = new L.Polyline([this._latlng, newPos], legOptions);
+ map.addLayer(leg);
+ m._spiderLeg = leg;
+ // Now add the marker.
m._preSpiderfyLatlng = m._latlng;
m.setLatLng(newPos);
if (m.setZIndexOffset) {
@@ -137,11 +145,6 @@ L.MarkerClusterNonAnimated = L.MarkerCluster.extend({
}
fg.addLayer(m);
-
- var legOptions = this._group.options.spiderLegPolylineOptions;
- leg = new L.Polyline([this._latlng, newPos], legOptions);
- map.addLayer(leg);
- m._spiderLeg = leg;
}
this.setOpacity(0.3);
group.fire('spiderfied');
@@ -152,8 +155,8 @@ L.MarkerClusterNonAnimated = L.MarkerCluster.extend({
}
});
+//Animated versions here
L.MarkerCluster.include({
- //Animated versions here
SVG_ANIMATION: (function () {
return document.createElementNS('http://www.w3.org/2000/svg', 'animate').toString().indexOf('SVGAnimate') > -1;
}()),
@@ -164,48 +167,55 @@ L.MarkerCluster.include({
fg = group._featureGroup,
thisLayerLatLng = this._latlng,
thisLayerPos = map.latLngToLayerPoint(thisLayerLatLng),
- initialLegOpacity = L.Path.SVG ? 0 : 0.3,
+ svgAnim = L.Path.SVG && this.SVG_ANIMATION,
legOptions = this._group.options.spiderLegPolylineOptions,
- svg = L.Path.SVG && this.SVG_ANIMATION,
+ finalLegOpacity = legOptions.opacity,
i, m, leg, legPath, legLength, newPos;
- if (legOptions.opacity === undefined) {
- legOptions.opacity = initialLegOpacity;
+ if (finalLegOpacity === undefined) {
+ finalLegOpacity = L.MarkerClusterGroup.prototype.options.spiderLegPolylineOptions.opacity;
}
+
// Add the class for CSS transitions.
legOptions.className = (legOptions.className || '') + ' leaflet-cluster-spider-leg';
- //Add markers and spider legs to map hidden at our center point
- for (i = childMarkers.length - 1; i >= 0; i--) {
+ // Add markers and spider legs to map, hidden at our center point.
+ // Traverse in ascending order to make sure that inner circleMarkers are on top of further legs. Normal markers are re-ordered by newPosition.
+ // The reverse order trick no longer improves performance on modern browsers.
+ for (i = 0; i < childMarkers.length; i++) {
m = childMarkers[i];
newPos = map.layerPointToLatLng(positions[i]);
// Add the leg before the marker, so that in case the latter is a circleMarker, the leg is behind it.
leg = new L.Polyline([thisLayerLatLng, newPos], legOptions);
+
+ // If the initial opacity of the spider leg is not 0 then it appears before the animation starts.
+ if (svgAnim) {
+ leg.setStyle({opacity: 0});
+ }
map.addLayer(leg);
m._spiderLeg = leg;
- if (svg) {
+ // Explanations: https://jakearchibald.com/2013/animated-line-drawing-svg/
+ // In our case the transition property is declared in the CSS file.
+ if (svgAnim) {
legPath = leg._path;
legLength = legPath.getTotalLength() + 0.1; // Need a small extra length to avoid remaining dot in Firefox.
- // Dash the leg so that dash covers the entire leg and so does the interval.
legPath.style.strokeDasharray = legLength + ' ' + legLength;
- // Start with offset covering the entire leg, so that it is filled with interval only.
legPath.style.strokeDashoffset = legLength;
- legPath.style.opacity = 0;
}
- //If it is a marker, add it now and we'll animate it out
+ // If it is a marker, add it now and we'll animate it out
if (m.setOpacity) {
- m.setZIndexOffset(1000000); //Make these appear on top of EVERYTHING
+ m.setZIndexOffset(1000000); // Make normal markers appear on top of EVERYTHING
m.clusterHide();
fg.addLayer(m);
m._setPos(thisLayerPos);
} else {
- //Vectors just get immediately added
+ // Vectors just get immediately added
fg.addLayer(m);
}
}
@@ -227,29 +237,16 @@ L.MarkerCluster.include({
}
// Animate leg (animation is actually delegated to CSS transition).
- if (svg) {
- legPath = m._spiderLeg._path;
+ if (svgAnim) {
+ leg = m._spiderLeg;
+ legPath = leg._path;
legPath.style.strokeDashoffset = 0;
- legPath.style.opacity = 0.5;
+ //legPath.style.strokeOpacity = finalLegOpacity;
+ leg.setStyle({opacity: finalLegOpacity});
}
}
this.setOpacity(0.3);
- // No longer needed???
- //Set the opacity of the spiderLegs back to their correct value
- // The animations above override this until they complete.
- // If the initial opacity of the spiderlegs isn't 0 then they appear before the animation starts.
- /*if (L.Path.SVG) {
- this._group._forceLayout();
-
- for (i = childMarkers.length - 1; i >= 0; i--) {
- m = childMarkers[i]._spiderLeg;
-
- m.options.opacity = 0.5;
- m._path.setAttribute('stroke-opacity', 0.5);
- }
- }*/
-
setTimeout(function () {
group._animationEnd();
group.fire('spiderfied');
@@ -262,8 +259,8 @@ L.MarkerCluster.include({
fg = group._featureGroup,
thisLayerPos = zoomDetails ? map._latLngToNewLayerPoint(this._latlng, zoomDetails.zoom, zoomDetails.center) : map.latLngToLayerPoint(this._latlng),
childMarkers = this.getAllChildMarkers(),
- svg = L.Path.SVG && this.SVG_ANIMATION,
- m, i, legPath, legLength;
+ svgAnim = L.Path.SVG && this.SVG_ANIMATION,
+ m, i, leg, legPath, legLength;
group._animationStart();
@@ -272,7 +269,7 @@ L.MarkerCluster.include({
for (i = childMarkers.length - 1; i >= 0; i--) {
m = childMarkers[i];
- //Marker was added to us after we were spidified
+ //Marker was added to us after we were spiderfied
if (!m._preSpiderfyLatlng) {
continue;
}
@@ -289,11 +286,12 @@ L.MarkerCluster.include({
}
// Animate the spider leg back in (animation is actually delegated to CSS transition).
- if (svg) {
- legPath = m._spiderLeg._path;
+ if (svgAnim) {
+ leg = m._spiderLeg;
+ legPath = leg._path;
legLength = legPath.getTotalLength() + 0.1;
legPath.style.strokeDashoffset = legLength;
- legPath.style.opacity = 0;
+ leg.setStyle({opacity: 0});
}
}
diff --git a/src/MarkerClusterGroup.js b/src/MarkerClusterGroup.js
index 6369297..1ed0a04 100644
--- a/src/MarkerClusterGroup.js
+++ b/src/MarkerClusterGroup.js
@@ -32,7 +32,7 @@ L.MarkerClusterGroup = L.FeatureGroup.extend({
spiderfyDistanceMultiplier: 1,
// Make it possible to specify a polyline options on a spider leg
- spiderLegPolylineOptions: { weight: 1.5, color: '#222' },
+ spiderLegPolylineOptions: { weight: 1.5, color: '#222', opacity: 0.5 },
// When bulk adding layers, adds markers in chunks. Means addLayers may not add all the layers in the call, others will be loaded during setTimeouts
chunkedLoading: false,
--
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