Skip to content
This repository was archived by the owner on Sep 20, 2019. It is now read-only.

Commit e0afb02

Browse files
nmccreadynmccready
committed
Merge pull request #77 from cgat/watch-options
feat(markers,paths,geojson,watchOptions): More flexible watch options…
2 parents ffcfa2f + 963de33 commit e0afb02

25 files changed

+474
-360
lines changed

‎dist/ui-leaflet.js

Lines changed: 131 additions & 101 deletions
Large diffs are not rendered by default.

‎dist/ui-leaflet.min.js

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/ui-leaflet.min.no-header.js

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/ui-leaflet_dev_mapped.js

Lines changed: 131 additions & 101 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/ui-leaflet_dev_mapped.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎doc/markers-attribute.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,13 @@ Markers watches
9696
Every marker you add to the map is watched for changes by default, so a change in a marker property will be reflected on the map directly. This feature can be disabled if you don't need to dynamic modification of markers and prefer better performance. This is the command used to disable markers watchers:
9797

9898
```
99-
<leaflet markers="markers" watch-markers="false"></leaflet>
99+
<leaflet markers="markers" watch-options='watchOptions'></leaflet>
100+
```
101+
102+
where:
103+
104+
```
105+
scope.watchOptions = { markers: { type: null, individual: { type: null } } };
100106
```
101107

102108
By default the markers will be watched, so we can change its properties dynamically, like in [this demo](http://angular-ui.github.io/ui-leaflet/examples/markers-update-example.html).

‎examples/0118-basic-double-map-events-example.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
1010
<script>
1111
var app = angular.module("demoapp", ['ui-leaflet']);
12-
app.controller("BasicDoubleMapEventsController", [ "$scope", "$log", "leafletData", "leafletEvents", function($scope, $log, leafletData, leafletEvents) {
12+
app.controller("BasicDoubleMapEventsController", [ "$scope", "$log", "leafletData", "leafletMapEvents", function($scope, $log, leafletData, leafletMapEvents) {
1313
angular.extend($scope, {
1414
london: {
1515
lat: 51.505,
@@ -30,12 +30,12 @@
3030

3131
$scope.events = {
3232
map: {
33-
enable: leafletEvents.getAvailableMapEvents(),
33+
enable: leafletMapEvents.getAvailableMapEvents(),
3434
logic: 'emit'
3535
}
3636
};
3737

38-
var mapEvents = leafletEvents.getAvailableMapEvents();
38+
var mapEvents = leafletMapEvents.getAvailableMapEvents();
3939
for (var k in mapEvents) {
4040
var eventName = 'leafletDirectiveMap.' + mapEvents[k];
4141
$scope.$on(eventName, function(event){

‎examples/0303-paths-3000-items-example.html

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,14 @@
1717
defaults: {
1818
scrollWheelZoom: false
1919
},
20+
watchOptions: {
21+
paths: {
22+
type: 'watch',
23+
individual: {
24+
type: null
25+
}
26+
}
27+
},
2028
//restrict map panning for this region
2129
maxbounds: {
2230
northEast: {
@@ -50,15 +58,19 @@
5058

5159
//bind locationGrid to zoom level
5260
$scope.$watch("centroid.zoom", function (zoom) {
61+
var tempPaths;
5362
if (zoom <= 3) {
5463
//clear path object
5564
$scope.paths = {};
5665

66+
//make new paths
67+
tempPaths = {};
68+
5769
//get location data and initialize leaflet circles
5870
LocationDataService.getLocationsTenGrid().then(function (res) {
5971
angular.forEach(res.data, function (value, key) {
6072
if (value.lat !== null && value.lon !== null) {
61-
$scope.paths['circle' + key] = {
73+
tempPaths['circle' + key] = {
6274
type: 'circle',
6375
className: 'testClass',
6476
fillColor: 'DarkSlateGray',
@@ -73,6 +85,7 @@
7385
};
7486
}
7587
});
88+
$scope.paths = tempPaths;
7689
}, function (error) {
7790
console.log('An error occured!', error);
7891
});
@@ -81,11 +94,14 @@
8194
//clear path object
8295
$scope.paths = {};
8396

97+
//make new paths
98+
tempPaths = {};
99+
84100
//get location data and initialize leaflet circles
85101
LocationDataService.getLocationsZeroOneGrid().then(function (res) {
86102
angular.forEach(res.data, function (value, key) {
87103
if (value.lat !== null && value.lon !== null) {
88-
$scope.paths['circle' + key] = {
104+
tempPaths['circle' + key] = {
89105
type: 'circle',
90106
className: 'testClass',
91107
fillColor: 'DarkSlateGray',
@@ -100,6 +116,7 @@
100116
};
101117
}
102118
});
119+
$scope.paths = tempPaths;
103120
}, function (error) {
104121
console.log('An error occured!', error);
105122
});
@@ -141,7 +158,7 @@
141158
</script>
142159
</head>
143160
<body ng-controller="Paths3000ItemsController">
144-
<leaflet watch-paths="false" lf-center="centroid" maxbounds="maxbounds" layers="layers" paths="paths" defaults="defaults" width="100%" height="480px"></leaflet>
161+
<leaflet watch-options="watchOptions" lf-center="centroid" maxbounds="maxbounds" layers="layers" paths="paths" defaults="defaults" width="100%" height="480px"></leaflet>
145162
<h1>3000 items in a map performance</h1>
146163
</body>
147164
</html>

‎examples/0514-markers-delayed-events.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
1010
<script>
1111
var app = angular.module("demoapp", ['ui-leaflet']);
12-
app.controller("MarkersDelayedEventsController", ["$scope", "leafletEvents", function($scope, leafletEvents){
12+
app.controller("MarkersDelayedEventsController", ["$scope", "leafletMarkerEvents", function($scope, leafletMarkerEvents){
1313
angular.extend($scope, {
1414
london: {
1515
lat: 51.505,
@@ -40,12 +40,12 @@
4040

4141
$scope.events = {
4242
markers: {
43-
enable: leafletEvents.getAvailableMarkerEvents(),
43+
enable: leafletMarkerEvents.getAvailableEvents(),
4444
}
4545
};
4646

4747
$scope.eventDetected = "No events yet...";
48-
var markerEvents = leafletEvents.getAvailableMarkerEvents();
48+
var markerEvents = leafletMarkerEvents.getAvailableEvents();
4949
for (var k in markerEvents){
5050
var eventName = 'leafletDirectiveMarker.' + markerEvents[k];
5151
$scope.$on(eventName, function(event, args){

‎examples/0604-mixed-markers-nested-events-example.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css"/>
1010
<script>
1111
var app = angular.module("demoapp", ['ui-leaflet']);
12-
app.controller("MixedMarkersNestedEventsController", ["$scope", "leafletEvents", function ($scope, leafletEvents) {
12+
app.controller("MixedMarkersNestedEventsController", ["$scope", "leafletMarkerEvents", function ($scope, leafletMarkerEvents) {
1313
$scope.map = {
1414
show: true
1515
};
@@ -53,12 +53,12 @@
5353

5454
$scope.events = {
5555
markers: {
56-
enable: leafletEvents.getAvailableMarkerEvents()
56+
enable: leafletMarkerEvents.getAvailableEvents()
5757
}
5858
};
5959

6060
$scope.eventDetected = "No events yet...";
61-
var markerEvents = leafletEvents.getAvailableMarkerEvents();
61+
var markerEvents = leafletMarkerEvents.getAvailableEvents();
6262
for (var k in markerEvents) {
6363
var eventName = 'leafletDirectiveMarker.' + markerEvents[k];
6464
$scope.$on(eventName, function (event, args) {

‎examples/0605-mixed-overlays-markers-nested-no-watch-example.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,12 @@
3333
});
3434
}, 4000);
3535
angular.extend($scope, {
36-
markersWatchOptions: {
37-
doWatch: false,
38-
isDeep: false,
39-
individual: {
40-
doWatch: false,
41-
isDeep: false
36+
watchOptions: {
37+
markers: {
38+
type: null,
39+
individual: {
40+
type: null
41+
}
4242
}
4343
},
4444
center: {
@@ -160,7 +160,7 @@
160160
markers="markers"
161161
layers="layers"
162162
markers-nested="true"
163-
markers-watch-options="markersWatchOptions"
163+
watch-options="watchOptions"
164164
height="480px" width="100%">
165165
</leaflet>
166166
<h1>Overlays with nested markers no watchers example</h1>

‎examples/js/controllers.js

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ var app = angular.module('webapp');
127127
});
128128
};
129129
}]);
130-
app.controller("BasicDoubleMapEventsController", [ "$scope", "$log", "leafletData", "leafletEvents", function($scope, $log, leafletData, leafletEvents) {
130+
app.controller("BasicDoubleMapEventsController", [ "$scope", "$log", "leafletData", "leafletMapEvents", function($scope, $log, leafletData, leafletMapEvents) {
131131
angular.extend($scope, {
132132
london: {
133133
lat: 51.505,
@@ -147,11 +147,11 @@ var app = angular.module('webapp');
147147
});
148148
$scope.events = {
149149
map: {
150-
enable: leafletEvents.getAvailableMapEvents(),
150+
enable: leafletMapEvents.getAvailableMapEvents(),
151151
logic: 'emit'
152152
}
153153
};
154-
var mapEvents = leafletEvents.getAvailableMapEvents();
154+
var mapEvents = leafletMapEvents.getAvailableMapEvents();
155155
for (var k in mapEvents) {
156156
var eventName = 'leafletDirectiveMap.' + mapEvents[k];
157157
$scope.$on(eventName, function(event){
@@ -3232,7 +3232,7 @@ var app = angular.module('webapp');
32323232
},
32333233
});
32343234
} ]);
3235-
app.controller("MarkersDelayedEventsController", ["$scope", "leafletEvents", function($scope, leafletEvents){
3235+
app.controller("MarkersDelayedEventsController", ["$scope", "leafletMarkerEvents", function($scope, leafletMarkerEvents){
32363236
angular.extend($scope, {
32373237
london: {
32383238
lat: 51.505,
@@ -3261,11 +3261,11 @@ var app = angular.module('webapp');
32613261
};
32623262
$scope.events = {
32633263
markers: {
3264-
enable: leafletEvents.getAvailableMarkerEvents(),
3264+
enable: leafletMarkerEvents.getAvailableEvents(),
32653265
}
32663266
};
32673267
$scope.eventDetected = "No events yet...";
3268-
var markerEvents = leafletEvents.getAvailableMarkerEvents();
3268+
var markerEvents = leafletMarkerEvents.getAvailableEvents();
32693269
for (var k in markerEvents){
32703270
var eventName = 'leafletDirectiveMarker.' + markerEvents[k];
32713271
$scope.$on(eventName, function(event, args){
@@ -4058,12 +4058,12 @@ var app = angular.module('webapp');
40584058
});
40594059
}, 4000);
40604060
angular.extend($scope, {
4061-
markersWatchOptions: {
4062-
doWatch: false,
4063-
isDeep: false,
4064-
individual: {
4065-
doWatch: false,
4066-
isDeep: false
4061+
watchOptions: {
4062+
markers: {
4063+
type: null
4064+
individual: {
4065+
type: null
4066+
}
40674067
}
40684068
},
40694069
center: {
@@ -4196,7 +4196,7 @@ var app = angular.module('webapp');
41964196
console.log(data);
41974197
});
41984198
}]);
4199-
app.controller("MixedMarkersNestedEventsController", ["$scope", "leafletEvents", function ($scope, leafletEvents) {
4199+
app.controller("MixedMarkersNestedEventsController", ["$scope", "leafletMarkerEvents", function ($scope, leafletMarkerEvents) {
42004200
$scope.map = {
42014201
show: true
42024202
};
@@ -4238,11 +4238,11 @@ var app = angular.module('webapp');
42384238
};
42394239
$scope.events = {
42404240
markers: {
4241-
enable: leafletEvents.getAvailableMarkerEvents()
4241+
enable: leafletMarkerEvents.getAvailableEvents()
42424242
}
42434243
};
42444244
$scope.eventDetected = "No events yet...";
4245-
var markerEvents = leafletEvents.getAvailableMarkerEvents();
4245+
var markerEvents = leafletMarkerEvents.getAvailableEvents();
42464246
for (var k in markerEvents) {
42474247
var eventName = 'leafletDirectiveMarker.' + markerEvents[k];
42484248
$scope.$on(eventName, function (event, args) {

‎examples/js/controllers/BasicDoubleMapEventsController.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
app.controller("BasicDoubleMapEventsController", [ "$scope", "$log", "leafletData", "leafletEvents", function($scope, $log, leafletData, leafletEvents) {
1+
app.controller("BasicDoubleMapEventsController", [ "$scope", "$log", "leafletData", "leafletMapEvents", function($scope, $log, leafletData, leafletMapEvents) {
22
angular.extend($scope, {
33
london: {
44
lat: 51.505,
@@ -18,11 +18,11 @@
1818
});
1919
$scope.events = {
2020
map: {
21-
enable: leafletEvents.getAvailableMapEvents(),
21+
enable: leafletMapEvents.getAvailableMapEvents(),
2222
logic: 'emit'
2323
}
2424
};
25-
var mapEvents = leafletEvents.getAvailableMapEvents();
25+
var mapEvents = leafletMapEvents.getAvailableMapEvents();
2626
for (var k in mapEvents) {
2727
var eventName = 'leafletDirectiveMap.' + mapEvents[k];
2828
$scope.$on(eventName, function(event){

‎examples/js/controllers/MarkersDelayedEventsController.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
app.controller("MarkersDelayedEventsController", ["$scope", "leafletEvents", function($scope, leafletEvents){
1+
app.controller("MarkersDelayedEventsController", ["$scope", "leafletMarkerEvents", function($scope, leafletMarkerEvents){
22
angular.extend($scope, {
33
london: {
44
lat: 51.505,
@@ -27,11 +27,11 @@
2727
};
2828
$scope.events = {
2929
markers: {
30-
enable: leafletEvents.getAvailableMarkerEvents(),
30+
enable: leafletMarkerEvents.getAvailableEvents(),
3131
}
3232
};
3333
$scope.eventDetected = "No events yet...";
34-
var markerEvents = leafletEvents.getAvailableMarkerEvents();
34+
var markerEvents = leafletMarkerEvents.getAvailableEvents();
3535
for (var k in markerEvents){
3636
var eventName = 'leafletDirectiveMarker.' + markerEvents[k];
3737
$scope.$on(eventName, function(event, args){

‎examples/js/controllers/MixedMOverlaysMarkersNestedNoWatchController.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,12 @@
2121
});
2222
}, 4000);
2323
angular.extend($scope, {
24-
markersWatchOptions: {
25-
doWatch: false,
26-
isDeep: false,
27-
individual: {
28-
doWatch: false,
29-
isDeep: false
24+
watchOptions: {
25+
markers: {
26+
type: null
27+
individual: {
28+
type: null
29+
}
3030
}
3131
},
3232
center: {

‎examples/js/controllers/MixedMarkersNestedEventsController.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
app.controller("MixedMarkersNestedEventsController", ["$scope", "leafletEvents", function ($scope, leafletEvents) {
1+
app.controller("MixedMarkersNestedEventsController", ["$scope", "leafletMarkerEvents", function ($scope, leafletMarkerEvents) {
22
$scope.map = {
33
show: true
44
};
@@ -40,11 +40,11 @@
4040
};
4141
$scope.events = {
4242
markers: {
43-
enable: leafletEvents.getAvailableMarkerEvents()
43+
enable: leafletMarkerEvents.getAvailableEvents()
4444
}
4545
};
4646
$scope.eventDetected = "No events yet...";
47-
var markerEvents = leafletEvents.getAvailableMarkerEvents();
47+
var markerEvents = leafletMarkerEvents.getAvailableEvents();
4848
for (var k in markerEvents) {
4949
var eventName = 'leafletDirectiveMarker.' + markerEvents[k];
5050
$scope.$on(eventName, function (event, args) {

‎src/directives/geojson.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ angular.module('ui-leaflet')
22
.directive('geojson', function (leafletLogger, $rootScope, leafletData, leafletHelpers,
33
leafletWatchHelpers, leafletDirectiveControlsHelpers,leafletIterators, leafletGeoJsonEvents) {
44
var _maybeWatch = leafletWatchHelpers.maybeWatch,
5-
_watchOptions = leafletHelpers.watchOptions,
5+
_defaultWatchOptions = leafletHelpers.watchOptions,
66
_extendDirectiveControls = leafletDirectiveControlsHelpers.extend,
77
hlp = leafletHelpers,
88
$it = leafletIterators;
@@ -21,7 +21,13 @@ angular.module('ui-leaflet')
2121
_hasSetLeafletData = false;
2222

2323
controller.getMap().then(function(map) {
24-
var watchOptions = leafletScope.geojsonWatchOptions || _watchOptions;
24+
var watchOptions;
25+
if(leafletScope.watchOptions && leafletScope.watchOptions.geojson) {
26+
watchOptions = leafletScope.watchOptions.geojson;
27+
}
28+
else {
29+
watchOptions = _defaultWatchOptions;
30+
}
2531

2632
var _hookUpEvents = function(geojson, maybeName){
2733
var onEachFeature;

‎src/directives/leaflet.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@ angular.module('ui-leaflet', ['nemLogging']).directive('leaflet',
1818
controls : '=',
1919
decorations : '=',
2020
eventBroadcast : '=',
21-
markersWatchOptions : '=',
22-
geojsonWatchOptions : '='
21+
watchOptions : '='
2322
},
2423
transclude: true,
2524
template: '<div class="angular-leaflet-map"><div ng-transclude></div></div>',

0 commit comments

Comments
 (0)