diff --git a/docs/tutorial-maps.markdown b/docs/tutorial-maps.markdown index 914d7d52..60ab0a1d 100644 --- a/docs/tutorial-maps.markdown +++ b/docs/tutorial-maps.markdown @@ -102,3 +102,30 @@ view.featureparse = function (e) { }; {% endhighlight %} + +### Turning on clustering + +You can turn on clustering of markers by setting the cluster option: + + var map = new recline.View.Map({ + model: dataset + state: { + cluster: true; + } + }); + +You could also enable marker clustering only if you have more than a +certain number of markers. Here's an example: + + // var map is recline.View.Map instance + // marker cluster threshold + var threshold = 65; + + // enable clustering if there is a large number of markers + var countAfter = 0; + map.features.eachLayer(function(){countAfter++;}); + if (countAfter > threshold) { + // note the map will auto-redraw when you change state! + map.state.set({cluster: true}); + } + diff --git a/src/view.map.js b/src/view.map.js index 23d02e25..ed52590d 100644 --- a/src/view.map.js +++ b/src/view.map.js @@ -28,6 +28,8 @@ this.recline.View = this.recline.View || {}; // latField: {id of field containing latitude in the dataset} // autoZoom: true, // // use cluster support +// // cluster: true = always on +// // cluster: false = always off // cluster: false // } // @@ -217,15 +219,6 @@ my.Map = Backbone.View.extend({ this._remove(doc); } - // enable clustering if there is a large number of markers - var countAfter = 0; - this.features.eachLayer(function(){countAfter++;}); - var sizeIncreased = countAfter - countBefore > 0; - if (!this.state.get('cluster') && countAfter > 64 && sizeIncreased) { - this.state.set({cluster: true}); - return; - } - // this must come before zooming! // if not: errors when using e.g. circle markers like // "Cannot call method 'project' of undefined" diff --git a/test/view.map.test.js b/test/view.map.test.js index 598c1a05..e3af2581 100644 --- a/test/view.map.test.js +++ b/test/view.map.test.js @@ -130,7 +130,7 @@ test('_getGeometryFromRecord non-GeoJSON', function () { }); }); -test('many markers', function () { +test('many markers and clustering', function () { var data = []; for (var i = 0; i<1000; i++) { data.push({ id: i, lon: 13+3*i, lat: 52+i/10}); @@ -150,7 +150,13 @@ test('many markers', function () { dataset.query(); + // this whole test looks a bit odd now + // we used to turn on clustering automatically at a certain level but we do not any more + equal(view.state.get('cluster'), false); + + view.state.set({cluster: true}); equal(view.state.get('cluster'), true); + view.remove(); });