Skip to content

Commit 93e3397

Browse files
elesdoarelesdoar
committed
feat(layercontrol): Add group option
1 parent 0308e9a commit 93e3397

9 files changed

+128
-30
lines changed

‎dist/angular-leaflet-directive.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3336,6 +3336,7 @@ angular.module("leaflet-directive").directive('layercontrol', ["$filter", "$log"
33363336
scope: {
33373337
icons: '=?',
33383338
autoHideOpacity: '=?', // Hide other opacity controls when one is activated.
3339+
showGroups: '=?', // Hide other opacity controls when one is activated.
33393340
title: '@',
33403341
baseTitle: '@',
33413342
overlaysTitle: '@'
@@ -3349,6 +3350,7 @@ angular.module("leaflet-directive").directive('layercontrol', ["$filter", "$log"
33493350
isDefined = leafletHelpers.isDefined;
33503351
angular.extend($scope, {
33513352
baselayer: '',
3353+
oldGroup: '',
33523354
layerProperties: {},
33533355
rangeIsSupported: leafletHelpers.rangeIsSupported(),
33543356
changeBaseLayer: function(key, e) {
@@ -3475,7 +3477,8 @@ angular.module("leaflet-directive").directive('layercontrol', ["$filter", "$log"
34753477
'<div class="lf-overlays">' +
34763478
'<h5 class="lf-title" ng-if="overlaysTitle">{{ overlaysTitle }}</h5>' +
34773479
'<div class="lf-container">' +
3478-
'<div class="lf-row" ng-repeat="layer in overlaysArray | orderBy:\'index\':order" ng-init="initIndex(layer, $index)">' +
3480+
'<div class="lf-row" ng-repeat="layer in (o = (overlaysArray | orderBy:\'index\':order))" ng-init="initIndex(layer, $index)">' +
3481+
'<h6 ng-if="showGroups &amp;&amp; layer.group &amp;&amp; layer.group != o[$index-1].group">{{ layer.group }}</h6>' +
34793482
'<label class="lf-icon-ol">' +
34803483
'<input class="lf-control-layers-selector" type="checkbox" ng-show="false" ng-model="layer.visible"/> ' +
34813484
'<i class="lf-icon lf-icon-check" ng-class="layer.icon"></i>' +

‎dist/angular-leaflet-directive.min.js

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

‎dist/angular-leaflet-directive_dev_mapped.js

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

‎dist/angular-leaflet-directive_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.

‎examples/0400-controls-custom-layer-control-example.html

Lines changed: 40 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@
2020
check: "fa fa-toggle-on"
2121
}
2222
},
23-
ripoll: {
24-
lat: 42.20133,
25-
lng: 2.19110,
23+
madrid: {
24+
lat: 40.415363,
25+
lng: -3.707398,
2626
zoom: 11
2727
},
2828
markers: {
@@ -66,16 +66,28 @@
6666
opacity: 0.25,
6767
attribution: "Hillshade layer by GIScience http://www.osm-wms.de",
6868
crs: L.CRS.EPSG900913
69-
}
69+
},
70+
group: "Raster"
7071
},
7172
fire: {
72-
name: "OpenFireMap",
73+
name: "Fire Stations",
7374
type: "xyz",
7475
url: "http://openfiremap.org/hytiles/{z}/{x}/{y}.png",
7576
layerOptions: {
7677
attribution: "&copy; <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
7778
continuousWorld: true
78-
}
79+
},
80+
group: "Open Fire Map"
81+
},
82+
em: {
83+
name: "Emergency Rooms",
84+
type: "xyz",
85+
url: "http://openfiremap.org/eytiles/{z}/{x}/{y}.png",
86+
layerOptions: {
87+
attribution: "&copy; <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
88+
continuousWorld: true
89+
},
90+
group: "Open Fire Map"
7991
}
8092
}
8193
},
@@ -84,7 +96,7 @@
8496
},
8597
addFireLayer: function() {
8698
this.layers.overlays.fire = {
87-
name: "OpenFireMap",
99+
name: "Fire Stations",
88100
type: "xyz",
89101
url: "http://openfiremap.org/hytiles/{z}/{x}/{y}.png",
90102
layerOptions: {
@@ -96,6 +108,23 @@
96108
existsFireLayer: function() {
97109
return ("fire" in this.layers.overlays);
98110
},
111+
removeEmergencyRooms: function() {
112+
delete this.layers.overlays.em;
113+
},
114+
addEmergencyRooms: function() {
115+
this.layers.overlays.em = {
116+
name: "Emergency Rooms",
117+
type: "xyz",
118+
url: "http://openfiremap.org/eytiles/{z}/{x}/{y}.png",
119+
layerOptions: {
120+
attribution: "&copy; <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
121+
continuousWorld: true
122+
}
123+
};
124+
},
125+
existsEmergencyRooms: function() {
126+
return ("em" in this.layers.overlays);
127+
},
99128
removeHillshadeLayer: function() {
100129
delete this.layers.overlays.hillshade;
101130
},
@@ -154,14 +183,16 @@
154183
float: right;
155184
}
156185
</style>
157-
<leaflet center="ripoll" layers="layers" height="480px" width="100%">
158-
<layercontrol order="normal" icons="layercontrol.icons" auto-hide-opacity="true"
186+
<leaflet center="madrid" layers="layers" height="480px" width="100%">
187+
<layercontrol order="normal" icons="layercontrol.icons" auto-hide-opacity="true" show-groups="true"
159188
title="Layer Manager" base-title="Base Layers" overlays-title="Overlays Layers"></layercontrol>
160189
</leaflet>
161190
<h1>Dynamic addition and deletion of Overlays control</h1>
162191
<button type="button" class="btn btn-default" ng-click="removeHillshadeLayer()" ng-disabled="!existsHillshadeLayer()">Remove Hillshade Overlay</button>
163192
<button type="button" class="btn btn-default" ng-click="removeFireLayer()" ng-disabled="!existsFireLayer()">Remove Fire Overlay</button>
193+
<button type="button" class="btn btn-default" ng-click="removeEmergencyRooms()" ng-disabled="!existsEmergencyRooms()">Remove Emergency Rooms Overlay</button>
164194
<button type="button" class="btn btn-default" ng-click="addHillshadeLayer()" ng-disabled="existsHillshadeLayer()">Add Hillshade Overlay</button>
165195
<button type="button" class="btn btn-default" ng-click="addFireLayer()" ng-disabled="existsFireLayer()">Add Fire Overlay</button>
196+
<button type="button" class="btn btn-default" ng-click="addEmergencyRooms()" ng-disabled="existsEmergencyRooms()">Add Emergency Rooms Overlay</button>
166197
</body>
167198
</html>

‎examples/js/controllers.js

Lines changed: 36 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -600,9 +600,9 @@ var app = angular.module('webapp');
600600
check: "fa fa-toggle-on"
601601
}
602602
},
603-
ripoll: {
604-
lat: 42.20133,
605-
lng: 2.19110,
603+
madrid: {
604+
lat: 40.415363,
605+
lng: -3.707398,
606606
zoom: 11
607607
},
608608
markers: {
@@ -646,16 +646,28 @@ var app = angular.module('webapp');
646646
opacity: 0.25,
647647
attribution: "Hillshade layer by GIScience http://www.osm-wms.de",
648648
crs: L.CRS.EPSG900913
649-
}
649+
},
650+
group: "Raster"
650651
},
651652
fire: {
652-
name: "OpenFireMap",
653+
name: "Fire Stations",
653654
type: "xyz",
654655
url: "http://openfiremap.org/hytiles/{z}/{x}/{y}.png",
655656
layerOptions: {
656657
attribution: "&copy; <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
657658
continuousWorld: true
658-
}
659+
},
660+
group: "Open Fire Map"
661+
},
662+
em: {
663+
name: "Emergency Rooms",
664+
type: "xyz",
665+
url: "http://openfiremap.org/eytiles/{z}/{x}/{y}.png",
666+
layerOptions: {
667+
attribution: "&copy; <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
668+
continuousWorld: true
669+
},
670+
group: "Open Fire Map"
659671
}
660672
}
661673
},
@@ -664,7 +676,7 @@ var app = angular.module('webapp');
664676
},
665677
addFireLayer: function() {
666678
this.layers.overlays.fire = {
667-
name: "OpenFireMap",
679+
name: "Fire Stations",
668680
type: "xyz",
669681
url: "http://openfiremap.org/hytiles/{z}/{x}/{y}.png",
670682
layerOptions: {
@@ -676,6 +688,23 @@ var app = angular.module('webapp');
676688
existsFireLayer: function() {
677689
return ("fire" in this.layers.overlays);
678690
},
691+
removeEmergencyRooms: function() {
692+
delete this.layers.overlays.em;
693+
},
694+
addEmergencyRooms: function() {
695+
this.layers.overlays.em = {
696+
name: "Emergency Rooms",
697+
type: "xyz",
698+
url: "http://openfiremap.org/eytiles/{z}/{x}/{y}.png",
699+
layerOptions: {
700+
attribution: "&copy; <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
701+
continuousWorld: true
702+
}
703+
};
704+
},
705+
existsEmergencyRooms: function() {
706+
return ("em" in this.layers.overlays);
707+
},
679708
removeHillshadeLayer: function() {
680709
delete this.layers.overlays.hillshade;
681710
},

‎examples/js/controllers/ControlsCustomLayerControlController.js

Lines changed: 36 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
check: "fa fa-toggle-on"
77
}
88
},
9-
ripoll: {
10-
lat: 42.20133,
11-
lng: 2.19110,
9+
madrid: {
10+
lat: 40.415363,
11+
lng: -3.707398,
1212
zoom: 11
1313
},
1414
markers: {
@@ -52,16 +52,28 @@
5252
opacity: 0.25,
5353
attribution: "Hillshade layer by GIScience http://www.osm-wms.de",
5454
crs: L.CRS.EPSG900913
55-
}
55+
},
56+
group: "Raster"
5657
},
5758
fire: {
58-
name: "OpenFireMap",
59+
name: "Fire Stations",
5960
type: "xyz",
6061
url: "http://openfiremap.org/hytiles/{z}/{x}/{y}.png",
6162
layerOptions: {
6263
attribution: "&copy; <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
6364
continuousWorld: true
64-
}
65+
},
66+
group: "Open Fire Map"
67+
},
68+
em: {
69+
name: "Emergency Rooms",
70+
type: "xyz",
71+
url: "http://openfiremap.org/eytiles/{z}/{x}/{y}.png",
72+
layerOptions: {
73+
attribution: "&copy; <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
74+
continuousWorld: true
75+
},
76+
group: "Open Fire Map"
6577
}
6678
}
6779
},
@@ -70,7 +82,7 @@
7082
},
7183
addFireLayer: function() {
7284
this.layers.overlays.fire = {
73-
name: "OpenFireMap",
85+
name: "Fire Stations",
7486
type: "xyz",
7587
url: "http://openfiremap.org/hytiles/{z}/{x}/{y}.png",
7688
layerOptions: {
@@ -82,6 +94,23 @@
8294
existsFireLayer: function() {
8395
return ("fire" in this.layers.overlays);
8496
},
97+
removeEmergencyRooms: function() {
98+
delete this.layers.overlays.em;
99+
},
100+
addEmergencyRooms: function() {
101+
this.layers.overlays.em = {
102+
name: "Emergency Rooms",
103+
type: "xyz",
104+
url: "http://openfiremap.org/eytiles/{z}/{x}/{y}.png",
105+
layerOptions: {
106+
attribution: "&copy; <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
107+
continuousWorld: true
108+
}
109+
};
110+
},
111+
existsEmergencyRooms: function() {
112+
return ("em" in this.layers.overlays);
113+
},
85114
removeHillshadeLayer: function() {
86115
delete this.layers.overlays.hillshade;
87116
},

‎examples/json/examples.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -487,7 +487,7 @@
487487
],
488488
"controls": [
489489
{
490-
"date": "2015-06-23T18:28:20.967Z",
490+
"date": "2015-06-23T21:33:38.318Z",
491491
"section": "controls",
492492
"onlyStandAlone": false,
493493
"id": "/controls/custom-layer-control-example",

‎src/directives/layercontrol.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ angular.module("leaflet-directive").directive('layercontrol', function ($filter,
44
scope: {
55
icons: '=?',
66
autoHideOpacity: '=?', // Hide other opacity controls when one is activated.
7+
showGroups: '=?', // Hide other opacity controls when one is activated.
78
title: '@',
89
baseTitle: '@',
910
overlaysTitle: '@'
@@ -17,6 +18,7 @@ angular.module("leaflet-directive").directive('layercontrol', function ($filter,
1718
isDefined = leafletHelpers.isDefined;
1819
angular.extend($scope, {
1920
baselayer: '',
21+
oldGroup: '',
2022
layerProperties: {},
2123
rangeIsSupported: leafletHelpers.rangeIsSupported(),
2224
changeBaseLayer: function(key, e) {
@@ -143,7 +145,8 @@ angular.module("leaflet-directive").directive('layercontrol', function ($filter,
143145
'<div class="lf-overlays">' +
144146
'<h5 class="lf-title" ng-if="overlaysTitle">{{ overlaysTitle }}</h5>' +
145147
'<div class="lf-container">' +
146-
'<div class="lf-row" ng-repeat="layer in overlaysArray | orderBy:\'index\':order" ng-init="initIndex(layer, $index)">' +
148+
'<div class="lf-row" ng-repeat="layer in (o = (overlaysArray | orderBy:\'index\':order))" ng-init="initIndex(layer, $index)">' +
149+
'<h6 ng-if="showGroups &amp;&amp; layer.group &amp;&amp; layer.group != o[$index-1].group">{{ layer.group }}</h6>' +
147150
'<label class="lf-icon-ol">' +
148151
'<input class="lf-control-layers-selector" type="checkbox" ng-show="false" ng-model="layer.visible"/> ' +
149152
'<i class="lf-icon lf-icon-check" ng-class="layer.icon"></i>' +

0 commit comments

Comments
 (0)