Page slows to a halt with 10,000 ol-markers created

[fisyher]

I am currently evaluating the usage of angular-openlayers directive for our map application project. One requirement is that it must be able to render up to 10000 features on the map without any negative impact on user experience.

I have tested using ol-marker directive with ng-repeat of a markers array containing 10000 marker objects. The result is the page instantly freezes and unresponsive. I have also tested using raw openlayers api to create the same markers and the performance is much better.

The attached txt files are actually html test pages modified from 061-markers-add-remove-example.html; one using ng-repeat of ol-markers, the other using basic OSM layer and raw ol3 api to create the features.

TestMarkersRepeat.txt
TestMarkersWebglMapAngularOnly.txt

[juristr]

@fisyher Hi, do you have that set up on some branch/GitHub repo so that I can get it and test it myself? Did you already figure out where the possible bottleneck could be?

Hi,
I had a similar problem, than found that in ol-marker is code:

map.on('pointerdown', handleDrag);
map.on('pointerup', handleDrag);
map.on('pointerdrag', handleDrag);

if I comment it everything works good and fast - I could have done it because my app has no use of dragging.
I guess (just guess - didn't verify it at all) that there is an event added to map with each marker, so with 10 000 markers map has 10 000 similar events to serve, which slows it down seriously.
Hope it helps.

[juristr]

@2pr sure, maybe we could selectively enable drag&drop support only.

[juristr]

@2pr @fisyher Could you maybe take a look at the awesome PR #293, @NiclasLindgren just contributed? I think this could be related and potentially fix this issue here.

I'm going to merge that branch in very soon, would just be cool if some of you could also give it a look as you were having problems related to this.

[juristr]

We just merged in PR #293 which should solve this issue. I'm closing this bug. In case it's still happening, feel free to reopen the issue.

[mobitum]

Seems like problem still persist. I have 500 markers in dataset and this simple code in view:

<openlayers ol-center="mapcenter" width="100%" height="600px">
  <ol-marker ng-repeat="pkt in punkty" ol-marker-properties="pkt"></ol-marker>
</openlayers>

and controller:

angular.module('app')
    .controller('SimpleController', function ($scope, $filter, Markers) {
        $scope.markers = [];
        Markers.get().then(function (result) {
            angular.forEach(result, function (val, key) {
                $scope.markers[key] = {
                    lat: parseFloat(val.LAT),
                    lon: parseFloat(val.LNG),
                    label: {
                        message: val.MSG
                        show: false,
                        showOnMouseClick: true,
                        showOnMouseOver: false,
                        keepOneOverlayVisible: false
                    }
                };
            });
        }, function (err) {
            console.log(err);
        });

        $scope.mapcenter = {
            lat: 52.069167,
            lon: 19.480556,
            zoom: 6.5
        };
})

Loading this map freezes app after first click/drag
I made some tests and commenting out this code in olMarker directive makes the map usable, which of course leads to make markers never show its labels:
if (evt.type === 'pointerdown') {
[...]
var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
return feature;
});
// Get associated marker properties
pickProperties = (feature ? feature.get('marker') : null);
[...]
scope.$watch('properties', function (properties) {
[...]
properties.handleInteraction = function (evt) {
[...]
var feature = map.forEachFeatureAtPixel(pixel, function (feature) {
return feature;
});

Seems like every click/drag event the map.forEachFeatureAtPixel is called 500 times which probably causes map to freeze.

[roberthunt]

I am seeing the same sort of issues with ~250 markers on the map generated in a similar way using ng-repeat at the moment, it seems to be related to clicking/dragging as it's quite responsive until you interact with it.