Skip to content

Commit

Permalink
feat(layercontrol): Add group option
Browse files Browse the repository at this point in the history
  • Loading branch information
@elesdoar
elesdoar committed Jun 23, 2015
1 parent 0308e9a commit 93e3397
Show file tree
Hide file tree
Showing 9 changed files with 128 additions and 30 deletions.
5 changes: 4 additions & 1 deletion dist/angular-leaflet-directive.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3336,6 +3336,7 @@ angular.module("leaflet-directive").directive('layercontrol', ["$filter", "$log"
scope: {
icons: '=?',
autoHideOpacity: '=?', // Hide other opacity controls when one is activated.
showGroups: '=?', // Hide other opacity controls when one is activated.
title: '@',
baseTitle: '@',
overlaysTitle: '@'
Expand All @@ -3349,6 +3350,7 @@ angular.module("leaflet-directive").directive('layercontrol', ["$filter", "$log"
isDefined = leafletHelpers.isDefined;
angular.extend($scope, {
baselayer: '',
oldGroup: '',
layerProperties: {},
rangeIsSupported: leafletHelpers.rangeIsSupported(),
changeBaseLayer: function(key, e) {
Expand Down Expand Up @@ -3475,7 +3477,8 @@ angular.module("leaflet-directive").directive('layercontrol', ["$filter", "$log"
'<div class="lf-overlays">' +
'<h5 class="lf-title" ng-if="overlaysTitle">{{ overlaysTitle }}</h5>' +
'<div class="lf-container">' +
'<div class="lf-row" ng-repeat="layer in overlaysArray | orderBy:\'index\':order" ng-init="initIndex(layer, $index)">' +
'<div class="lf-row" ng-repeat="layer in (o = (overlaysArray | orderBy:\'index\':order))" ng-init="initIndex(layer, $index)">' +
'<h6 ng-if="showGroups &amp;&amp; layer.group &amp;&amp; layer.group != o[$index-1].group">{{ layer.group }}</h6>' +
'<label class="lf-icon-ol">' +
'<input class="lf-control-layers-selector" type="checkbox" ng-show="false" ng-model="layer.visible"/> ' +
'<i class="lf-icon lf-icon-check" ng-class="layer.icon"></i>' +
Expand Down
4 changes: 2 additions & 2 deletions dist/angular-leaflet-directive.min.js
View file

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion dist/angular-leaflet-directive_dev_mapped.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/angular-leaflet-directive_dev_mapped.js.map
View file

Large diffs are not rendered by default.

49 changes: 40 additions & 9 deletions examples/0400-controls-custom-layer-control-example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@
check: "fa fa-toggle-on"
}
},
ripoll: {
lat: 42.20133,
lng: 2.19110,
madrid: {
lat: 40.415363,
lng: -3.707398,
zoom: 11
},
markers: {
Expand Down Expand Up @@ -66,16 +66,28 @@
opacity: 0.25,
attribution: "Hillshade layer by GIScience http://www.osm-wms.de",
crs: L.CRS.EPSG900913
}
},
group: "Raster"
},
fire: {
name: "OpenFireMap",
name: "Fire Stations",
type: "xyz",
url: "http://openfiremap.org/hytiles/{z}/{x}/{y}.png",
layerOptions: {
attribution: "&copy; <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
continuousWorld: true
}
},
group: "Open Fire Map"
},
em: {
name: "Emergency Rooms",
type: "xyz",
url: "http://openfiremap.org/eytiles/{z}/{x}/{y}.png",
layerOptions: {
attribution: "&copy; <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
continuousWorld: true
},
group: "Open Fire Map"
}
}
},
Expand All @@ -84,7 +96,7 @@
},
addFireLayer: function() {
this.layers.overlays.fire = {
name: "OpenFireMap",
name: "Fire Stations",
type: "xyz",
url: "http://openfiremap.org/hytiles/{z}/{x}/{y}.png",
layerOptions: {
Expand All @@ -96,6 +108,23 @@
existsFireLayer: function() {
return ("fire" in this.layers.overlays);
},
removeEmergencyRooms: function() {
delete this.layers.overlays.em;
},
addEmergencyRooms: function() {
this.layers.overlays.em = {
name: "Emergency Rooms",
type: "xyz",
url: "http://openfiremap.org/eytiles/{z}/{x}/{y}.png",
layerOptions: {
attribution: "&copy; <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
continuousWorld: true
}
};
},
existsEmergencyRooms: function() {
return ("em" in this.layers.overlays);
},
removeHillshadeLayer: function() {
delete this.layers.overlays.hillshade;
},
Expand Down Expand Up @@ -154,14 +183,16 @@
float: right;
}
</style>
<leaflet center="ripoll" layers="layers" height="480px" width="100%">
<layercontrol order="normal" icons="layercontrol.icons" auto-hide-opacity="true"
<leaflet center="madrid" layers="layers" height="480px" width="100%">
<layercontrol order="normal" icons="layercontrol.icons" auto-hide-opacity="true" show-groups="true"
title="Layer Manager" base-title="Base Layers" overlays-title="Overlays Layers"></layercontrol>
</leaflet>
<h1>Dynamic addition and deletion of Overlays control</h1>
<button type="button" class="btn btn-default" ng-click="removeHillshadeLayer()" ng-disabled="!existsHillshadeLayer()">Remove Hillshade Overlay</button>
<button type="button" class="btn btn-default" ng-click="removeFireLayer()" ng-disabled="!existsFireLayer()">Remove Fire Overlay</button>
<button type="button" class="btn btn-default" ng-click="removeEmergencyRooms()" ng-disabled="!existsEmergencyRooms()">Remove Emergency Rooms Overlay</button>
<button type="button" class="btn btn-default" ng-click="addHillshadeLayer()" ng-disabled="existsHillshadeLayer()">Add Hillshade Overlay</button>
<button type="button" class="btn btn-default" ng-click="addFireLayer()" ng-disabled="existsFireLayer()">Add Fire Overlay</button>
<button type="button" class="btn btn-default" ng-click="addEmergencyRooms()" ng-disabled="existsEmergencyRooms()">Add Emergency Rooms Overlay</button>
</body>
</html>
43 changes: 36 additions & 7 deletions examples/js/controllers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -600,9 +600,9 @@ var app = angular.module('webapp');
check: "fa fa-toggle-on"
}
},
ripoll: {
lat: 42.20133,
lng: 2.19110,
madrid: {
lat: 40.415363,
lng: -3.707398,
zoom: 11
},
markers: {
Expand Down Expand Up @@ -646,16 +646,28 @@ var app = angular.module('webapp');
opacity: 0.25,
attribution: "Hillshade layer by GIScience http://www.osm-wms.de",
crs: L.CRS.EPSG900913
}
},
group: "Raster"
},
fire: {
name: "OpenFireMap",
name: "Fire Stations",
type: "xyz",
url: "http://openfiremap.org/hytiles/{z}/{x}/{y}.png",
layerOptions: {
attribution: "&copy; <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
continuousWorld: true
}
},
group: "Open Fire Map"
},
em: {
name: "Emergency Rooms",
type: "xyz",
url: "http://openfiremap.org/eytiles/{z}/{x}/{y}.png",
layerOptions: {
attribution: "&copy; <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
continuousWorld: true
},
group: "Open Fire Map"
}
}
},
Expand All @@ -664,7 +676,7 @@ var app = angular.module('webapp');
},
addFireLayer: function() {
this.layers.overlays.fire = {
name: "OpenFireMap",
name: "Fire Stations",
type: "xyz",
url: "http://openfiremap.org/hytiles/{z}/{x}/{y}.png",
layerOptions: {
Expand All @@ -676,6 +688,23 @@ var app = angular.module('webapp');
existsFireLayer: function() {
return ("fire" in this.layers.overlays);
},
removeEmergencyRooms: function() {
delete this.layers.overlays.em;
},
addEmergencyRooms: function() {
this.layers.overlays.em = {
name: "Emergency Rooms",
type: "xyz",
url: "http://openfiremap.org/eytiles/{z}/{x}/{y}.png",
layerOptions: {
attribution: "&copy; <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
continuousWorld: true
}
};
},
existsEmergencyRooms: function() {
return ("em" in this.layers.overlays);
},
removeHillshadeLayer: function() {
delete this.layers.overlays.hillshade;
},
Expand Down
43 changes: 36 additions & 7 deletions examples/js/controllers/ControlsCustomLayerControlController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
check: "fa fa-toggle-on"
}
},
ripoll: {
lat: 42.20133,
lng: 2.19110,
madrid: {
lat: 40.415363,
lng: -3.707398,
zoom: 11
},
markers: {
Expand Down Expand Up @@ -52,16 +52,28 @@
opacity: 0.25,
attribution: "Hillshade layer by GIScience http://www.osm-wms.de",
crs: L.CRS.EPSG900913
}
},
group: "Raster"
},
fire: {
name: "OpenFireMap",
name: "Fire Stations",
type: "xyz",
url: "http://openfiremap.org/hytiles/{z}/{x}/{y}.png",
layerOptions: {
attribution: "&copy; <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
continuousWorld: true
}
},
group: "Open Fire Map"
},
em: {
name: "Emergency Rooms",
type: "xyz",
url: "http://openfiremap.org/eytiles/{z}/{x}/{y}.png",
layerOptions: {
attribution: "&copy; <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
continuousWorld: true
},
group: "Open Fire Map"
}
}
},
Expand All @@ -70,7 +82,7 @@
},
addFireLayer: function() {
this.layers.overlays.fire = {
name: "OpenFireMap",
name: "Fire Stations",
type: "xyz",
url: "http://openfiremap.org/hytiles/{z}/{x}/{y}.png",
layerOptions: {
Expand All @@ -82,6 +94,23 @@
existsFireLayer: function() {
return ("fire" in this.layers.overlays);
},
removeEmergencyRooms: function() {
delete this.layers.overlays.em;
},
addEmergencyRooms: function() {
this.layers.overlays.em = {
name: "Emergency Rooms",
type: "xyz",
url: "http://openfiremap.org/eytiles/{z}/{x}/{y}.png",
layerOptions: {
attribution: "&copy; <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
continuousWorld: true
}
};
},
existsEmergencyRooms: function() {
return ("em" in this.layers.overlays);
},
removeHillshadeLayer: function() {
delete this.layers.overlays.hillshade;
},
Expand Down
2 changes: 1 addition & 1 deletion examples/json/examples.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -487,7 +487,7 @@
],
"controls": [
{
"date": "2015-06-23T18:28:20.967Z",
"date": "2015-06-23T21:33:38.318Z",
"section": "controls",
"onlyStandAlone": false,
"id": "/controls/custom-layer-control-example",
Expand Down
5 changes: 4 additions & 1 deletion src/directives/layercontrol.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ angular.module("leaflet-directive").directive('layercontrol', function ($filter,
scope: {
icons: '=?',
autoHideOpacity: '=?', // Hide other opacity controls when one is activated.
showGroups: '=?', // Hide other opacity controls when one is activated.
title: '@',
baseTitle: '@',
overlaysTitle: '@'
Expand All @@ -17,6 +18,7 @@ angular.module("leaflet-directive").directive('layercontrol', function ($filter,
isDefined = leafletHelpers.isDefined;
angular.extend($scope, {
baselayer: '',
oldGroup: '',
layerProperties: {},
rangeIsSupported: leafletHelpers.rangeIsSupported(),
changeBaseLayer: function(key, e) {
Expand Down Expand Up @@ -143,7 +145,8 @@ angular.module("leaflet-directive").directive('layercontrol', function ($filter,
'<div class="lf-overlays">' +
'<h5 class="lf-title" ng-if="overlaysTitle">{{ overlaysTitle }}</h5>' +
'<div class="lf-container">' +
'<div class="lf-row" ng-repeat="layer in overlaysArray | orderBy:\'index\':order" ng-init="initIndex(layer, $index)">' +
'<div class="lf-row" ng-repeat="layer in (o = (overlaysArray | orderBy:\'index\':order))" ng-init="initIndex(layer, $index)">' +
'<h6 ng-if="showGroups &amp;&amp; layer.group &amp;&amp; layer.group != o[$index-1].group">{{ layer.group }}</h6>' +
'<label class="lf-icon-ol">' +
'<input class="lf-control-layers-selector" type="checkbox" ng-show="false" ng-model="layer.visible"/> ' +
'<i class="lf-icon lf-icon-check" ng-class="layer.icon"></i>' +
Expand Down

0 comments on commit 93e3397

Please sign in to comment.