ui-leaflet
ui-leaflet copied to clipboard
angular-ui
PruneCluster integration
From @pmusaraj on February 16, 2015 20:24
I'm using this directive with mavrkercluster currently, and with many markers I'm having performance issues. Granted, the performance issues are on mobile phones and tablets (not on a regular browser), but I was wondering whether there is a more lightweight and faster clustering solution.
And I ran into PruneCluster https://github.com/SINTEF-9012/PruneCluster
Does anybody have any experience with it? I'm curious to try and integrate it with the directive, but I'm not entirely sure how to go about it. I'm not a very good JS developer, but I'm willing to give it a try. If anyone has any pointers, that'd be great!
Copied from original issue: tombatossals/angular-leaflet-directive#635
From @ivanssa on October 5, 2015 19:37
Hello guys I'm with the same problem of performance pmusaraj I wonder if someone could help integrate https://github.com/SINTEF-9012/PruneCluster with angular-leaflet-directive? I would like to use on a map app that works in ionic.
From @pmusaraj on October 5, 2015 19:46
@ivanssa I actually forgot to follow-up on this issue, but I have successfully used PruneCluster with angular-leaflet-directive. You can follow the usage directions for PruneCluster, and then when it's time to add it to your angular-leaflet-directive map, do the following:
leafletData.getMap().then(function(map) {
map.addLayer(pruneCluster);
});
Basically, you need to add the pruneCluster object to the map after the map gets loaded by the directive.
From @simison on October 5, 2015 20:7
We're using PruneCluster with this package at Trustroots. Works great and performance is superb.
https://github.com/Trustroots/trustroots/search?utf8=%E2%9C%93&q=prunecluster
From @ivanssa on October 7, 2015 23:41
Hello everyone thanks for the feedback, the more I tried and have not managed to successfully get the error "TypeError: Unable to get property 'getMap' of undefined or null reference" I received a undefined for leafletData there so I created the variable with var leafletData ; and now I get error in GetMap I'm trying to put together the pruneCluster this leaflet that uses Git-directive with ionic "https://github.com/calendee/ionic-leafletjs-map-demo" I am grateful to be able to help me solve this problem in my project.
From @pmusaraj on October 8, 2015 2:31
You need to initialize leafletData in your controller function declaration. Like so :
.controller('ListCtrl', function($scope, leafletData, leafletEvents) {
and then it's available for you using in the controller.
From @ivanssa on October 8, 2015 23:0
Hello guys, It works now, I would very much like to thank the help, I am desperate now I'm very happy that I'll be able to get a good grade on my college work, thank you even nmccready, pmusaraj and simison ...
@ivanssa do you have code for how you got this working. I might start to explore to integrate this.
From @ivanssa on October 20, 2015 8:11
Hello @nmccready , after so wrap your head finally managed to create a basic code working with some features for those who need to PruneCluster with Angle, below is the complete code:
I'm currently working on a list of objects {} and not an array [] as needed to access the following items through uid code, now what is missing and am studying a way to remove only one point on the map, for the removeMarkers () function PruneCluster removes all elements or a list, it is possible to remove only an object but for that I have to do several "forEach" to sweep the vector and create a removal list which leaves the poor performance, so I managed to remove a dirtamente item vector using "delete markers ['uid']" but I can not remove it from the map after leafletView.ProcessView (), I am grateful to be able to help solve this problem.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>AngularPrune</title>
<link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css">
<script type='text/javascript' src="http://code.angularjs.org/1.2.2/angular.js"></script>
<script type='text/javascript' src="http://tombatossals.github.io/angular-leaflet-directive/dist/angular-leaflet-directive.min.js"></script>
<script type='text/javascript' src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="lib/dist/PruneCluster.js"></script>
<link rel="stylesheet" href="lib/dist/LeafletStyleSheet.css"/>
<style type='text/css'>
</style>
</head>
<body ng-app="AngularPrune">
<body ng-controller="AngularPruneController">
<leaflet center="center" markers="markers" layers="layers" width='800' height='400'></leaflet>
<br>
<button ng-click="removeMarkers()">Remove uidb Marker</button>
</body>
<script type='text/javascript'>
var app = angular.module('AngularPrune', ['leaflet-directive']);
app.controller('AngularPruneController', ['$scope', 'leafletData','leafletEvents', function ($scope, leafletData,leafletEvents) {
// 1 Make PruneCluster View
var leafletView = new PruneClusterForLeaflet(60);
angular.extend($scope, {
center: {
lat:-22.911948,
lng:-43.230162,
zoom: 15
},
layers: {
baselayers: {
osm: {
name: 'OpenStreetMap',
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
type: 'xyz'
}
},
overlays: {
markersOverlay: {
name: 'Markers',
type: 'group',
visible: true
}
},
events: {
map: {
enable: ['context'],
logic: 'emit'
}
}
},
markers: {
"testMarker": {
layer: 'markersOverlay',
lat:-22.911948,
lng:-43.232162,
focus: false,
message: 'My Marker on Leaflet',
compileMessage: true
}
}
});
// Make Variable List of Object
var markers = {};
// Add Prune on map Layer
leafletData.getMap().then(function(map) {
function addPoint(uid, latitude,longitude) {
var marker = new PruneCluster.Marker(latitude,longitude);
// Make Object List
markers[uid] = marker;
console.log(markers);
leafletView.RegisterMarker(marker);
leafletView.ProcessView();
}
addPoint('uida',-22.911948,-43.230162);
addPoint('uidb',-22.911948,-43.230162);
addPoint('uidc',-22.911948,-43.230162);
console.log(markers['uida']);
map.addLayer(leafletView);
});
var pos=0;
// Test Cluster and UnCluster RealTime
window.setInterval(function () {
if(pos<100){
markers['uida'].position.lng += 0.0001;
}else{
markers['uida'].position.lng -= 0.0001;
if(pos>=200){
pos=0;
}
}
leafletView.ProcessView();
pos++;
},100);
$scope.removeMarkers = function() {
console.log(markers);
delete markers['uidb'];
console.log(markers);
leafletView.ProcessView();
}
}]);
</script>
</body>
</html>
