139 | 
140 | 
141 |
142 | - **one-circle** - put all the elements into one circle
143 |
144 | 
145 | 
146 | 
147 |
148 | - **concentric** - elements are placed automatically into concentric circles, there is a maximum of 4 circles
149 |
150 | 
151 | 
152 | 
153 |
154 | - **clock** - fills circles around the cluster marker in the style of clocks
155 |
156 | 
157 | 
158 | 
159 |
160 | - **clock-concentric** - in the case of one circle, elements are places based on the concentric style, more circles are dislocated in the clock style
161 |
162 | 
163 | 
164 | 
165 |
166 | - **original-locations** - elements are placed at their original locations
167 |
168 | 
169 | 
170 | 
171 |
172 | \*_can be changed - \_circleSpiralSwitchover variable in the original markerCluster code_
173 |
174 | ## Helping Circles
175 |
176 | the new type geometry called "helpingCircle" to make the cluster more visually-consistent (not supported for **origin-locations** strategy and **spiral** strategy)
177 |
178 | ## Options
179 |
180 | - **elementsPlacementStrategy** (default value 'clock-concentric') - defines the strategy for placing markers in cluster, see above
181 | - **spiderfiedClassName** (default value false) - a classname value for spiderfied markers, usefull for styling...
182 |
183 | ### Options that are valid for placement strategies 'concentric', 'clock' and 'clock-concentric'
184 |
185 | - **firstCircleElements** (default value **10**) - the number of elements in the first circle
186 | - **elementsMultiplier** (default value **1.5**) - the multiplicator of elements number for the next circle
187 | - **spiderfyDistanceSurplus** (default value **30**) - the value to be added to each new circle distance value
188 | - **helpingCircles** (default value **true**) - switch drawing helping circles on
189 | - **helpingCircleOptions** (default value **{ fillOpacity: 0, color: 'grey', weight: 0.6 }** ) - the style object for helpingCircle element
190 |
191 | ## Notes:
192 |
193 | - this subplugin was not tested with the animations turned on (`animation` and `animateAddingMarkers` variables)
194 | - `circleMarkers` should be preferred to markers
195 | - use with `L.SVG` renderer if possible (`L.Canvas` renderer has technical issues with some visual properties, see [#6](https://github.com/adammertel/Leaflet.MarkerCluster.PlacementStrategies/issues/6))
196 |
--------------------------------------------------------------------------------
/dist/leaflet-markercluster.placementstrategies.js:
--------------------------------------------------------------------------------
1 |
2 | /*
3 | markerCluster placement-strategies subplugin for leaflet.markercluster
4 | https://github.com/adammertel/Leaflet.MarkerCluster.PlacementStrategies
5 | Adam Mertel | univie
6 | */
7 | "use strict";/*global L:true*/L.MarkerClusterGroup.include({_noanimationUnspiderfy:function a(){if(this._spiderfied){//this._spiderfied._noanimationUnspiderfy();
8 | this._spiderfied.unspiderfy()}}});L.MarkerCluster.include({spiderfy:function a(){var b=this._group;var c=b.options;if(b._spiderfied===this||b._inZoomAnimation){return}var d=this.getAllChildMarkers();var e=b._map;var f=e.latLngToLayerPoint(this._latlng);var g=[];// add options.spiderfiedClassName to the spiderfied markers
9 | if(c.spiderfiedClassName){for(var h in d){var i=d[h];// marker
10 | if(i.getIcon){var j=i.getIcon();if(j){if(j.options.className){if(!j.options.className.includes(c.spiderfiedClassName)){j.options.className+=" "+c.spiderfiedClassName}}else{j.options.className=c.spiderfiedClassName}}//circleMarker
11 | }else if(d[h].setStyle){var k=d[h].options.className;d[h].setStyle({className:k+" "+c.spiderfiedClassName})}}}b._unspiderfy();b._spiderfied=this;this._clockHelpingGeometries=[];// TODO Maybe: childMarkers order by distance to center
12 | // applies chosen placement strategy
13 | switch(c.elementsPlacementStrategy){case"default":if(d.length>=this._circleSpiralSwitchover){g=this._generatePointsSpiral(d.length,f)}else{g=this._generatePointsCircle(d.length,f)}break;case"spiral":g=this._generatePointsSpiral(d.length,f);break;case"one-circle":g=this._generatePointsCircle(d.length,f);break;case"concentric":g=this._generatePointsConcentricCircles(d.length,f);break;case"clock":g=this._generatePointsClocksCircles(d.length,f,false);break;case"clock-concentric":g=this._generatePointsClocksCircles(d.length,f,true);break;case"original-locations":g=this._getOriginalLocations(d,b._map);break;default:}this._animationSpiderfy(d,g)},unspiderfy:function a(b){// remove _supportiveGeometries from map
14 | this._removeClockHelpingCircles();/// Argument from zoomanim if being called in a zoom animation or null otherwise
15 | if(this._group._inZoomAnimation){return}this._animationUnspiderfy(b);this._group._spiderfied=null},_generatePointsCircle:function a(b,c){var d=this._group.options.spiderfyDistanceMultiplier*this._circleFootSeparation*(2+b),e=d/this._2PI,//radius from circumference
16 | f=this._2PI/b,g=[];var h,j;g.length=b;for(h=b-1;h>=0;h--){j=this._circleStartAngle+h*f;g[h]=new L.Point(c.x+e*Math.cos(j),c.y+e*Math.sin(j))._round()}this._createHelpingCircle(c,e);return g},_generatePointsSpiral:function a(b,c){var d=this._group.options.spiderfyDistanceMultiplier,e=d*this._spiralFootSeparation,f=d*this._spiralLengthFactor*this._2PI,g=[];var h,j=0;var k=d*this._spiralLengthStart;g.length=b;// Higher index, closer position to cluster center.
17 | for(h=b-1;h>=0;h--){j+=e/k+h*0.0005;g[h]=new L.Point(c.x+k*Math.cos(j),c.y+k*Math.sin(j))._round();k+=f/j}return g},// auxiliary method - returns placement of vertex of given regular n-side polygon
18 | _regularPolygonVertexPlacement:function a(b,c,d,e){var f=this._2PI/c;var g=f*b;// in case of two vertices, right-left placement is more estetic
19 | if(c!==2){g-=1.6}return new L.Point(d.x+Math.cos(g)*e,d.y+Math.sin(g)*e)._round()},// clock strategy placement.
20 | // regularFirstCicle parameter - true if first elements in the first circle are placed regularly
21 | _generatePointsClocksCircles:function a(b,c,d){var e=[];var f=this._group.options;var g=f.firstCircleElements;var h=this._circleFootSeparation*1.5,// offset of the first circle
22 | j=f.spiderfyDistanceMultiplier,// multiplier of the offset for a next circle
23 | k=f.spiderfyDistanceSurplus,// multiplier of the offset for a next circle
24 | l=f.elementsMultiplier;// multiplier of number of elements in the next circle
25 | var m=1,n=g,o=h,p=0;this._createHelpingCircle(c,o);// iterating elements
26 | for(var q=1;q<=b;q++){var r=q-p;// position of current element in this circle
27 | // changing the circle
28 | if(r>n){m+=1;p+=n;r=q-p;// position of current element in this circle
29 | n=Math.floor(n*l);o=(k+o)*j;this._createHelpingCircle(c,o)}if(d&&m===1){e[q-1]=this._regularPolygonVertexPlacement(r-1,Math.min(g,b),c,o)}else{e[q-1]=this._regularPolygonVertexPlacement(r-1,n,c,o)}}return e},// method for creating and storing helping circles for clock/concentric circles strategy
30 | _createHelpingCircle:function a(b,c){var d=this._group;var e=d.options;if(e.helpingCircles){var f={radius:c};// keeping without fill if it is not defined
31 | if(!e.clockHelpingCircleOptions.fill){e.clockHelpingCircleOptions.fillColor="none"}L.extend(f,e.clockHelpingCircleOptions);var g=new L.CircleMarker(d._map.layerPointToLatLng(b),f);d._featureGroup.addLayer(g);this._clockHelpingGeometries.push(g)}},// concentric circles strategy placement.
32 | // divide elements of cluster into concentric zones based on elementsMultiplier and firstCircleElements parameters
33 | _generatePointsConcentricCircles:function a(b,d){var e=this;var f=this._group.options;var g=[];var h=f.firstCircleElements,j=this._circleFootSeparation*1.5,// offset of the first circle
34 | k=f.spiderfyDistanceMultiplier,// multiplier of the offset for a next circle
35 | c=f.elementsMultiplier,// multiplier of number of elements in the next circle
36 | l=f.spiderfyDistanceSurplus,// multiplier of the offset for a next circle
37 | m=Math.round(h*c);// number of elements in the second circle
38 | var n=[{distance:j,noElements:0},{distance:(l+j)*k,noElements:0},{distance:(2*l+j)*k*k,noElements:0},{distance:(3*l+j)*k*k*k,noElements:0}];// number of points in the second circle
39 | if(b>h){n[1].noElements=m;if(helementsPlacementStrategy:
105 | 114 | 115 |opacity of base map:
116 | 123 | 124 |base map:
125 | 130 | 131 |shapes:
132 | 136 | 137 |showCoverageOnHover:
139 | 143 |spiderfyOnMaxZoom:
144 | 148 |zoomToBoundsOnClick:
149 | 153 |maxClusterRadius:
154 | 166 | 167 |spiderfyDistanceSurplus:
170 | 180 | 181 |distanceMultiplier:
182 | 189 | 190 |firstCircleElements:
191 | 197 | 198 |elementsMultiplier:
199 | 209 | 210 |helpingCircles :
213 | 217 | 218 |color:
219 | 226 | 227 |stroke weight:
228 | 249 | 250 |stroke opacity:
251 | 263 | 264 |stroke style:
265 | 288 | 289 |Data: random points
290 |