Skip to content

Commit 2767705

Browse files
elesdoarelesdoar
committed
feat(layercontrol): New layer control
Added new directive layercontrol - visibility on two o more layers - update example 400 - opacity control, supported for HTML5 browsers (Firefox 23+, Safari 4+, iOS 5+, Chrome 6+, Opera 11+, IE 10+, Android 4.2+) - order layers control
1 parent 1a5deb2 commit 2767705

10 files changed

+805
-832
lines changed

‎dist/angular-leaflet-directive.js‎

Lines changed: 226 additions & 241 deletions
Large diffs are not rendered by default.

‎dist/angular-leaflet-directive.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/angular-leaflet-directive_dev_mapped.js‎

Lines changed: 225 additions & 240 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.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: 49 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,18 @@
88
<script src="../dist/angular-leaflet-directive.js"></script>
99
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
1010
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
11-
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
11+
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
1212
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1313
<script>
1414
var app = angular.module("demoapp", ["leaflet-directive"]);
15-
app.controller('ControlsCustomLayerControlController', [ '$scope', function($scope) {
15+
app.controller("ControlsCustomLayerControlController", [ "$scope", function($scope) {
1616
angular.extend($scope, {
17+
layercontrol: {
18+
icons: {
19+
uncheck: "fa fa-toggle-off",
20+
check: "fa fa-toggle-on"
21+
}
22+
},
1723
ripoll: {
1824
lat: 42.20133,
1925
lng: 2.19110,
@@ -28,46 +34,46 @@
2834
layers: {
2935
baselayers: {
3036
osm: {
31-
name: 'OpenStreetMap',
32-
type: 'xyz',
33-
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
37+
name: "OpenStreetMap",
38+
type: "xyz",
39+
url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
3440
layerOptions: {
35-
subdomains: ['a', 'b', 'c'],
36-
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
41+
subdomains: ["a", "b", "c"],
42+
attribution: "&copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
3743
continuousWorld: true
3844
}
3945
},
4046
cycle: {
41-
name: 'OpenCycleMap',
42-
type: 'xyz',
43-
url: 'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',
47+
name: "OpenCycleMap",
48+
type: "xyz",
49+
url: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
4450
layerOptions: {
45-
subdomains: ['a', 'b', 'c'],
46-
attribution: '&copy; <a href="http://www.opencyclemap.org/copyright">OpenCycleMap</a> contributors - &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
51+
subdomains: ["a", "b", "c"],
52+
attribution: "&copy; <a href=\"http://www.opencyclemap.org/copyright\">OpenCycleMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
4753
continuousWorld: true
4854
}
4955
}
5056
},
5157
overlays: {
5258
hillshade: {
53-
name: 'Hillshade Europa',
54-
type: 'wms',
55-
url: 'http://129.206.228.72/cached/hillshade',
59+
name: "Hillshade Europa",
60+
type: "wms",
61+
url: "http://129.206.228.72/cached/hillshade",
5662
visible: true,
5763
layerOptions: {
58-
layers: 'europe_wms:hs_srtm_europa',
59-
format: 'image/png',
64+
layers: "europe_wms:hs_srtm_europa",
65+
format: "image/png",
6066
opacity: 0.25,
61-
attribution: 'Hillshade layer by GIScience http://www.osm-wms.de',
67+
attribution: "Hillshade layer by GIScience http://www.osm-wms.de",
6268
crs: L.CRS.EPSG900913
6369
}
6470
},
6571
fire: {
66-
name: 'OpenFireMap',
67-
type: 'xyz',
68-
url: 'http://openfiremap.org/hytiles/{z}/{x}/{y}.png',
72+
name: "OpenFireMap",
73+
type: "xyz",
74+
url: "http://openfiremap.org/hytiles/{z}/{x}/{y}.png",
6975
layerOptions: {
70-
attribution: '&copy; <a href="http://www.openfiremap.org">OpenFireMap</a> contributors - &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
76+
attribution: "&copy; <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
7177
continuousWorld: true
7278
}
7379
}
@@ -78,42 +84,44 @@
7884
},
7985
addFireLayer: function() {
8086
this.layers.overlays.fire = {
81-
name: 'OpenFireMap',
82-
type: 'xyz',
83-
url: 'http://openfiremap.org/hytiles/{z}/{x}/{y}.png',
87+
name: "OpenFireMap",
88+
type: "xyz",
89+
url: "http://openfiremap.org/hytiles/{z}/{x}/{y}.png",
8490
layerOptions: {
85-
attribution: '&copy; <a href="http://www.openfiremap.org">OpenFireMap</a> contributors - &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
91+
attribution: "&copy; <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
8692
continuousWorld: true
8793
}
8894
};
8995
},
9096
existsFireLayer: function() {
91-
return ('fire' in this.layers.overlays);
97+
return ("fire" in this.layers.overlays);
9298
},
9399
removeHillshadeLayer: function() {
94100
delete this.layers.overlays.hillshade;
95101
},
96102
addHillshadeLayer: function() {
97103
this.layers.overlays.hillshade = {
98-
name: 'Hillshade Europa',
99-
type: 'wms',
100-
url: 'http://129.206.228.72/cached/hillshade',
104+
name: "Hillshade Europa",
105+
type: "wms",
106+
url: "http://129.206.228.72/cached/hillshade",
101107
visible: true,
102108
layerOptions: {
103-
layers: 'europe_wms:hs_srtm_europa',
104-
format: 'image/png',
109+
layers: "europe_wms:hs_srtm_europa",
110+
format: "image/png",
105111
opacity: 0.25,
106-
attribution: 'Hillshade layer by GIScience http://www.osm-wms.de',
112+
attribution: "Hillshade layer by GIScience http://www.osm-wms.de",
107113
crs: L.CRS.EPSG900913
108114
}
109115
};
110116
},
111117
existsHillshadeLayer: function() {
112-
return ('hillshade' in this.layers.overlays);
118+
return ("hillshade" in this.layers.overlays);
113119
}
114120
});
115121
} ]);
116122
</script>
123+
</head>
124+
<body ng-controller="ControlsCustomLayerControlController">
117125
<style>
118126
.angular-leaflet-control-layers {
119127
position: absolute;
@@ -128,14 +136,10 @@
128136

129137
.angular-leaflet-control-layers .lf-row label {
130138
cursor: pointer;
131-
width: 100%;
132-
}
133-
134-
.angular-leaflet-control-layers .lf-row label .lf-icons {
135-
float: right;
139+
width: 75%;
136140
}
137141

138-
.angular-leaflet-control-layers .lf-row label .lf-icon {
142+
.angular-leaflet-control-layers .lf-row .lf-icon {
139143
cursor: pointer;
140144
float: left;
141145
margin-right: 5px;
@@ -145,11 +149,13 @@
145149
.angular-leaflet-control-layers .lf-row label .lf-text {
146150
float: left;
147151
}
152+
153+
.angular-leaflet-control-layers .lf-row .lf-icons {
154+
float: right;
155+
}
148156
</style>
149-
</head>
150-
<body ng-controller="ControlsCustomLayerControlController">
151157
<leaflet center="ripoll" layers="layers" height="480px" width="100%">
152-
<layercontrol order="normal"></layercontrol>
158+
<layercontrol order="normal" icons="layercontrol.icons"></layercontrol>
153159
</leaflet>
154160
<h1>Dynamic addition and deletion of Overlays control</h1>
155161
<button type="button" class="btn btn-default" ng-click="removeHillshadeLayer()" ng-disabled="!existsHillshadeLayer()">Remove Hillshade Overlay</button>

‎examples/js/controllers.js‎

Lines changed: 39 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -592,8 +592,14 @@ var app = angular.module('webapp');
592592
: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}";
593593
});
594594
} ]);
595-
app.controller('ControlsCustomLayerControlController', [ '$scope', function($scope) {
595+
app.controller("ControlsCustomLayerControlController", [ "$scope", function($scope) {
596596
angular.extend($scope, {
597+
layercontrol: {
598+
icons: {
599+
uncheck: "fa fa-toggle-off",
600+
check: "fa fa-toggle-on"
601+
}
602+
},
597603
ripoll: {
598604
lat: 42.20133,
599605
lng: 2.19110,
@@ -608,46 +614,46 @@ var app = angular.module('webapp');
608614
layers: {
609615
baselayers: {
610616
osm: {
611-
name: 'OpenStreetMap',
612-
type: 'xyz',
613-
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
617+
name: "OpenStreetMap",
618+
type: "xyz",
619+
url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
614620
layerOptions: {
615-
subdomains: ['a', 'b', 'c'],
616-
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
621+
subdomains: ["a", "b", "c"],
622+
attribution: "&copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
617623
continuousWorld: true
618624
}
619625
},
620626
cycle: {
621-
name: 'OpenCycleMap',
622-
type: 'xyz',
623-
url: 'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',
627+
name: "OpenCycleMap",
628+
type: "xyz",
629+
url: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
624630
layerOptions: {
625-
subdomains: ['a', 'b', 'c'],
626-
attribution: '&copy; <a href="http://www.opencyclemap.org/copyright">OpenCycleMap</a> contributors - &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
631+
subdomains: ["a", "b", "c"],
632+
attribution: "&copy; <a href=\"http://www.opencyclemap.org/copyright\">OpenCycleMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
627633
continuousWorld: true
628634
}
629635
}
630636
},
631637
overlays: {
632638
hillshade: {
633-
name: 'Hillshade Europa',
634-
type: 'wms',
635-
url: 'http://129.206.228.72/cached/hillshade',
639+
name: "Hillshade Europa",
640+
type: "wms",
641+
url: "http://129.206.228.72/cached/hillshade",
636642
visible: true,
637643
layerOptions: {
638-
layers: 'europe_wms:hs_srtm_europa',
639-
format: 'image/png',
644+
layers: "europe_wms:hs_srtm_europa",
645+
format: "image/png",
640646
opacity: 0.25,
641-
attribution: 'Hillshade layer by GIScience http://www.osm-wms.de',
647+
attribution: "Hillshade layer by GIScience http://www.osm-wms.de",
642648
crs: L.CRS.EPSG900913
643649
}
644650
},
645651
fire: {
646-
name: 'OpenFireMap',
647-
type: 'xyz',
648-
url: 'http://openfiremap.org/hytiles/{z}/{x}/{y}.png',
652+
name: "OpenFireMap",
653+
type: "xyz",
654+
url: "http://openfiremap.org/hytiles/{z}/{x}/{y}.png",
649655
layerOptions: {
650-
attribution: '&copy; <a href="http://www.openfiremap.org">OpenFireMap</a> contributors - &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
656+
attribution: "&copy; <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
651657
continuousWorld: true
652658
}
653659
}
@@ -658,38 +664,38 @@ var app = angular.module('webapp');
658664
},
659665
addFireLayer: function() {
660666
this.layers.overlays.fire = {
661-
name: 'OpenFireMap',
662-
type: 'xyz',
663-
url: 'http://openfiremap.org/hytiles/{z}/{x}/{y}.png',
667+
name: "OpenFireMap",
668+
type: "xyz",
669+
url: "http://openfiremap.org/hytiles/{z}/{x}/{y}.png",
664670
layerOptions: {
665-
attribution: '&copy; <a href="http://www.openfiremap.org">OpenFireMap</a> contributors - &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
671+
attribution: "&copy; <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
666672
continuousWorld: true
667673
}
668674
};
669675
},
670676
existsFireLayer: function() {
671-
return ('fire' in this.layers.overlays);
677+
return ("fire" in this.layers.overlays);
672678
},
673679
removeHillshadeLayer: function() {
674680
delete this.layers.overlays.hillshade;
675681
},
676682
addHillshadeLayer: function() {
677683
this.layers.overlays.hillshade = {
678-
name: 'Hillshade Europa',
679-
type: 'wms',
680-
url: 'http://129.206.228.72/cached/hillshade',
684+
name: "Hillshade Europa",
685+
type: "wms",
686+
url: "http://129.206.228.72/cached/hillshade",
681687
visible: true,
682688
layerOptions: {
683-
layers: 'europe_wms:hs_srtm_europa',
684-
format: 'image/png',
689+
layers: "europe_wms:hs_srtm_europa",
690+
format: "image/png",
685691
opacity: 0.25,
686-
attribution: 'Hillshade layer by GIScience http://www.osm-wms.de',
692+
attribution: "Hillshade layer by GIScience http://www.osm-wms.de",
687693
crs: L.CRS.EPSG900913
688694
}
689695
};
690696
},
691697
existsHillshadeLayer: function() {
692-
return ('hillshade' in this.layers.overlays);
698+
return ("hillshade" in this.layers.overlays);
693699
}
694700
});
695701
} ]);

0 commit comments

Comments
 (0)