examlple(markerCluster perf no watch)cluster example zero watches on …

…markers shows much improvement /#19
angular-ui · Nov 19, 2015 · 16dc339 · 16dc339
1 parent 936c39c
commit 16dc339
Showing 1 changed file with 88 additions and 0 deletions.
diff --git a/examples/0512-markers-clustering-10000-markers-example-no-watch.html b/examples/0512-markers-clustering-10000-markers-example-no-watch.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html ng-app="demoapp">
+
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="../bower_components/angular/angular.min.js"></script>
+    <script src="../bower_components/leaflet/dist/leaflet.js"></script>
+    <script src="../bower_components/angular-simple-logger/dist/angular-simple-logger.js"></script>
+    <script src="../bower_components/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
+    <script src="../dist/ui-leaflet.js"></script>
+    <link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
+    <link rel="stylesheet" href="../bower_components/leaflet.markercluster/dist/MarkerCluster.css" />
+    <link rel="stylesheet" href="../bower_components/leaflet.markercluster/dist/MarkerCluster.Default.css" />
+    <script>
+        var app = angular.module("demoapp", ['ui-leaflet']);
+        app.controller("MarkersClustering10000MarkersController", ["$scope", "$http", "leafletData",
+        function($scope, $http, leafletData) {
+
+            var addressPointsToMarkers = function(points) {
+                return points.map(function(ap) {
+                    return {
+                        layer: 'realworld',
+                        lat: ap[0],
+                        lng: ap[1]
+                    };
+                });
+            };
+
+            angular.extend($scope, {
+                center: {
+                    lat: -37.9212959167,
+                    lng: 175.5604435167,
+                    zoom: 11
+                },
+                watchOptions: {
+                    markers: {
+                        type: null,
+                        individual: {
+                            type: null
+                        }
+                    }
+                },
+                events: {
+                    map: {
+                        enable: ['moveend', 'popupopen'],
+                        logic: 'emit'
+                    },
+                    marker: {
+                        enable: [],
+                        logic: 'emit'
+                    }
+                },
+                layers: {
+                    baselayers: {
+                        osm: {
+                            name: 'OpenStreetMap',
+                            type: 'xyz',
+                            url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+                        }
+                    },
+                    overlays: {
+                        realworld: {
+                            name: "Real world data",
+                            type: "markercluster",
+                            visible: true
+                        }
+                    }
+                }
+            });
+
+            $http.get("json/realworld.10000.json").success(function(data) {
+                leafletData.getDirectiveControls().then(function (controls) {
+                    var markers = addressPointsToMarkers(data)
+                    controls.markers.create(markers ,$scope.markers);
+                    $scope.markers = markers;
+                });
+            });
+        }]);
+    </script>
+</head>
+
+<body ng-controller="MarkersClustering10000MarkersController">
+    <leaflet lf-center="center" markers="markers" layers="layers" event-broadcast="events" watch-options="watchOptions" width="100%" height="480px">
+    </leaflet>
+    <h1>Marker clustering example (10000 markers)</h1>
+</body>
+
+</html>