knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cluster markers to handle larger datasets

Browse Source
This commit is contained in:
Dominik Moritz 2012-09-12 00:09:07 +01:00
parent b190e3b8a8
commit 751cd095ce
2 changed files with 64 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/view.map.js
View File

@ -53,12 +53,22 @@ my.Map = Backbone.View.extend({
geomField: null,
lonField: null,
latField: null,
autoZoom: true
autoZoom: true,
cluster: true
},
options.state
);
this.state = new recline.Model.ObjectState(stateData);
this._clusterOptions = {
zoomToBoundsOnClick: true,
//disableClusteringAtZoom: 10,
maxClusterRadius: 80,
singleMarkerMode: false,
skipDuplicateAddTesting: true,
animateAddingMarkers: false
};
// Listen to changes in the fields
this.model.fields.bind('change', function() {
self._setupGeometryField();
@ -93,7 +103,7 @@ my.Map = Backbone.View.extend({
// ### infobox
//
// Function to create infoboxes used in popups. The default behaviour is very simple and just lists all attributes.
//
//
// Users should override this function to customize behaviour i.e.
//
// view = new View({...});
@ -146,8 +156,11 @@ my.Map = Backbone.View.extend({
}
if (this._geomReady() && this.mapReady){
if (action == 'reset' || action == 'refresh'){
if (action == 'refresh' || action == 'reset') {
this.features.clearLayers();
// recreate cluster group because of issues with clearLayer
this.map.removeLayer(this.markers);
this.markers = new L.MarkerClusterGroup(this._clusterOptions);
this._add(this.model.records.models);
} else if (action == 'add' && doc){
this._add(doc);
@ -161,6 +174,13 @@ my.Map = Backbone.View.extend({
this._zoomPending = true;
}
}
this.map.removeLayer(this.features);
this.map.removeLayer(this.markers);
if (this.state.get('cluster')) {
this.map.addLayer(this.markers);
} else {
this.map.addLayer(this.features);
}
}
},
@ -198,6 +218,9 @@ my.Map = Backbone.View.extend({
if (!(docs instanceof Array)) docs = [docs];
// removing ad re-adding the layer enables faster bulk loading
self.map.removeLayer(self.markers);
var count = 0;
var wrongSoFar = 0;
_.every(docs, function(doc){
@ -236,9 +259,11 @@ my.Map = Backbone.View.extend({
}
return true;
});
self.map.addLayer(self.markers);
},
// Private: Remove one or n features to the map
// Private: Remove one or n features from the map
//
_remove: function(docs){
@ -347,7 +372,7 @@ my.Map = Backbone.View.extend({
//
_zoomToFeatures: function(){
var bounds = this.features.getBounds();
if (bounds.getNorthEast()){
if (bounds && bounds.getNorthEast() && bounds.getSouthWest()){
this.map.fitBounds(bounds);
} else {
this.map.setView([0, 0], 2);
@ -360,15 +385,27 @@ my.Map = Backbone.View.extend({
// on [OpenStreetMap](http://openstreetmap.org).
//
_setupMap: function(){
var self = this;
this.map = new L.Map(this.$map.get(0));
var mapUrl = "http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png";
var osmAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png">';
var bg = new L.TileLayer(mapUrl, {maxZoom: 18, attribution: osmAttribution ,subdomains: '1234'});
this.map.addLayer(bg);
var bg = new L.TileLayer(mapUrl, {maxZoom: 18, attribution: osmAttribution ,subdomains: '1234'}).addTo(this.map);
this.features = new L.GeoJSON();
this.map.addLayer(this.features);
this.markers = new L.MarkerClusterGroup(this._clusterOptions);
m = this.map;
l = this.markers;
this.features = new L.GeoJSON(null,{
pointToLayer: function (feature, latlng) {
var marker = new L.marker(latlng);
self.markers.addLayer(marker);
return marker;
}
});
//this.map.addLayer(this.features);
//this.map.addLayer(this.markers);
this.map.setView([0, 0], 2);
@ -441,19 +478,23 @@ my.MapMenu = Backbone.View.extend({
</div> \
<div class="editor-options" > \
<label class="checkbox"> \
<input type="checkbox" id="editor-auto-zoom" checked="checked" /> \
<input type="checkbox" id="editor-auto-zoom" value="autozoom" checked="checked" /> \
Auto zoom to features</label> \
<label class="checkbox"> \
<input type="checkbox" id="editor-cluster" value="cluster" checked="checked" /> \
Cluster markers</label> \
</div> \
<input type="hidden" class="editor-id" value="map-1" /> \
</div> \
</form> \
',
',
// Define here events for UI elements
events: {
'click .editor-update-map': 'onEditorSubmit',
'change .editor-field-type': 'onFieldTypeChange',
'click #editor-auto-zoom': 'onAutoZoomChange'
'click #editor-auto-zoom': 'onAutoZoomChange',
'click #editor-cluster': 'onClusteringChange'
},
initialize: function(options) {
@ -486,10 +527,14 @@ my.MapMenu = Backbone.View.extend({
}
if (this.state.get('autoZoom')) {
this.el.find('#editor-auto-zoom').attr('checked', 'checked');
}
else {
} else {
this.el.find('#editor-auto-zoom').removeAttr('checked');
}
if (this.state.get('cluster')) {
this.el.find('#editor-cluster').attr('checked', 'checked');
} else {
this.el.find('#editor-cluster').removeAttr('checked');
}
return this;
},
@ -540,6 +585,10 @@ my.MapMenu = Backbone.View.extend({
this.state.set({autoZoom: !this.state.get('autoZoom')});
},
onClusteringChange: function(e){
this.state.set({cluster: !this.state.get('cluster')});
},
// Private: Helper function to select an option from a select list
//
_selectOption: function(id,value){

1
test/index.html
View File

@ -15,6 +15,7 @@
<script type="text/javascript" src="../vendor/mustache/0.5.0-dev/mustache.js"></script>
<script type="text/javascript" src="../vendor/bootstrap/2.0.2/bootstrap.js"></script>
<script type="text/javascript" src="../vendor/leaflet/0.4.4/leaflet-src.js"></script>
<script type="text/javascript" src="../vendor/leaflet.markercluster/leaflet.markercluster.js"></script>
<script type="text/javascript" src="../vendor/slickgrid/2.0.1/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="../vendor/slickgrid/2.0.1/jquery.event.drag-2.0.min.js"></script>
<script type="text/javascript" src="../vendor/slickgrid/2.0.1/slick.grid.min.js"></script>