Skip to content

Commit

Permalink
feat(layercontrol): New layer control
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@elesdoar
elesdoar committed Jun 23, 2015
1 parent 1a5deb2 commit 2767705
Show file tree
Hide file tree
Showing 10 changed files with 805 additions and 832 deletions.
467 changes: 226 additions & 241 deletions dist/angular-leaflet-directive.js
View file

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions dist/angular-leaflet-directive.min.js
View file

Large diffs are not rendered by default.

465 changes: 225 additions & 240 deletions dist/angular-leaflet-directive_dev_mapped.js
View file

Large diffs are not rendered by default.

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

Large diffs are not rendered by default.

92 changes: 49 additions & 43 deletions examples/0400-controls-custom-layer-control-example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,18 @@
<script src="../dist/angular-leaflet-directive.js"></script>
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
var app = angular.module("demoapp", ["leaflet-directive"]);
app.controller('ControlsCustomLayerControlController', [ '$scope', function($scope) {
app.controller("ControlsCustomLayerControlController", [ "$scope", function($scope) {
angular.extend($scope, {
layercontrol: {
icons: {
uncheck: "fa fa-toggle-off",
check: "fa fa-toggle-on"
}
},
ripoll: {
lat: 42.20133,
lng: 2.19110,
Expand All @@ -28,46 +34,46 @@
layers: {
baselayers: {
osm: {
name: 'OpenStreetMap',
type: 'xyz',
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
name: "OpenStreetMap",
type: "xyz",
url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
layerOptions: {
subdomains: ['a', 'b', 'c'],
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
subdomains: ["a", "b", "c"],
attribution: "&copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
continuousWorld: true
}
},
cycle: {
name: 'OpenCycleMap',
type: 'xyz',
url: 'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',
name: "OpenCycleMap",
type: "xyz",
url: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
layerOptions: {
subdomains: ['a', 'b', 'c'],
attribution: '&copy; <a href="http://www.opencyclemap.org/copyright">OpenCycleMap</a> contributors - &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
subdomains: ["a", "b", "c"],
attribution: "&copy; <a href=\"http://www.opencyclemap.org/copyright\">OpenCycleMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
continuousWorld: true
}
}
},
overlays: {
hillshade: {
name: 'Hillshade Europa',
type: 'wms',
url: 'http://129.206.228.72/cached/hillshade',
name: "Hillshade Europa",
type: "wms",
url: "http://129.206.228.72/cached/hillshade",
visible: true,
layerOptions: {
layers: 'europe_wms:hs_srtm_europa',
format: 'image/png',
layers: "europe_wms:hs_srtm_europa",
format: "image/png",
opacity: 0.25,
attribution: 'Hillshade layer by GIScience http://www.osm-wms.de',
attribution: "Hillshade layer by GIScience http://www.osm-wms.de",
crs: L.CRS.EPSG900913
}
},
fire: {
name: 'OpenFireMap',
type: 'xyz',
url: 'http://openfiremap.org/hytiles/{z}/{x}/{y}.png',
name: "OpenFireMap",
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',
attribution: "&copy; <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
continuousWorld: true
}
}
Expand All @@ -78,42 +84,44 @@
},
addFireLayer: function() {
this.layers.overlays.fire = {
name: 'OpenFireMap',
type: 'xyz',
url: 'http://openfiremap.org/hytiles/{z}/{x}/{y}.png',
name: "OpenFireMap",
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',
attribution: "&copy; <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
continuousWorld: true
}
};
},
existsFireLayer: function() {
return ('fire' in this.layers.overlays);
return ("fire" in this.layers.overlays);
},
removeHillshadeLayer: function() {
delete this.layers.overlays.hillshade;
},
addHillshadeLayer: function() {
this.layers.overlays.hillshade = {
name: 'Hillshade Europa',
type: 'wms',
url: 'http://129.206.228.72/cached/hillshade',
name: "Hillshade Europa",
type: "wms",
url: "http://129.206.228.72/cached/hillshade",
visible: true,
layerOptions: {
layers: 'europe_wms:hs_srtm_europa',
format: 'image/png',
layers: "europe_wms:hs_srtm_europa",
format: "image/png",
opacity: 0.25,
attribution: 'Hillshade layer by GIScience http://www.osm-wms.de',
attribution: "Hillshade layer by GIScience http://www.osm-wms.de",
crs: L.CRS.EPSG900913
}
};
},
existsHillshadeLayer: function() {
return ('hillshade' in this.layers.overlays);
return ("hillshade" in this.layers.overlays);
}
});
} ]);
</script>
</head>
<body ng-controller="ControlsCustomLayerControlController">
<style>
.angular-leaflet-control-layers {
position: absolute;
Expand All @@ -128,14 +136,10 @@

.angular-leaflet-control-layers .lf-row label {
cursor: pointer;
width: 100%;
}

.angular-leaflet-control-layers .lf-row label .lf-icons {
float: right;
width: 75%;
}

.angular-leaflet-control-layers .lf-row label .lf-icon {
.angular-leaflet-control-layers .lf-row .lf-icon {
cursor: pointer;
float: left;
margin-right: 5px;
Expand All @@ -145,11 +149,13 @@
.angular-leaflet-control-layers .lf-row label .lf-text {
float: left;
}

.angular-leaflet-control-layers .lf-row .lf-icons {
float: right;
}
</style>
</head>
<body ng-controller="ControlsCustomLayerControlController">
<leaflet center="ripoll" layers="layers" height="480px" width="100%">
<layercontrol order="normal"></layercontrol>
<layercontrol order="normal" icons="layercontrol.icons"></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>
Expand Down
72 changes: 39 additions & 33 deletions examples/js/controllers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -592,8 +592,14 @@ var app = angular.module('webapp');
: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}";
});
} ]);
app.controller('ControlsCustomLayerControlController', [ '$scope', function($scope) {
app.controller("ControlsCustomLayerControlController", [ "$scope", function($scope) {
angular.extend($scope, {
layercontrol: {
icons: {
uncheck: "fa fa-toggle-off",
check: "fa fa-toggle-on"
}
},
ripoll: {
lat: 42.20133,
lng: 2.19110,
Expand All @@ -608,46 +614,46 @@ var app = angular.module('webapp');
layers: {
baselayers: {
osm: {
name: 'OpenStreetMap',
type: 'xyz',
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
name: "OpenStreetMap",
type: "xyz",
url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
layerOptions: {
subdomains: ['a', 'b', 'c'],
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
subdomains: ["a", "b", "c"],
attribution: "&copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
continuousWorld: true
}
},
cycle: {
name: 'OpenCycleMap',
type: 'xyz',
url: 'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',
name: "OpenCycleMap",
type: "xyz",
url: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
layerOptions: {
subdomains: ['a', 'b', 'c'],
attribution: '&copy; <a href="http://www.opencyclemap.org/copyright">OpenCycleMap</a> contributors - &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
subdomains: ["a", "b", "c"],
attribution: "&copy; <a href=\"http://www.opencyclemap.org/copyright\">OpenCycleMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
continuousWorld: true
}
}
},
overlays: {
hillshade: {
name: 'Hillshade Europa',
type: 'wms',
url: 'http://129.206.228.72/cached/hillshade',
name: "Hillshade Europa",
type: "wms",
url: "http://129.206.228.72/cached/hillshade",
visible: true,
layerOptions: {
layers: 'europe_wms:hs_srtm_europa',
format: 'image/png',
layers: "europe_wms:hs_srtm_europa",
format: "image/png",
opacity: 0.25,
attribution: 'Hillshade layer by GIScience http://www.osm-wms.de',
attribution: "Hillshade layer by GIScience http://www.osm-wms.de",
crs: L.CRS.EPSG900913
}
},
fire: {
name: 'OpenFireMap',
type: 'xyz',
url: 'http://openfiremap.org/hytiles/{z}/{x}/{y}.png',
name: "OpenFireMap",
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',
attribution: "&copy; <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
continuousWorld: true
}
}
Expand All @@ -658,38 +664,38 @@ var app = angular.module('webapp');
},
addFireLayer: function() {
this.layers.overlays.fire = {
name: 'OpenFireMap',
type: 'xyz',
url: 'http://openfiremap.org/hytiles/{z}/{x}/{y}.png',
name: "OpenFireMap",
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',
attribution: "&copy; <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
continuousWorld: true
}
};
},
existsFireLayer: function() {
return ('fire' in this.layers.overlays);
return ("fire" in this.layers.overlays);
},
removeHillshadeLayer: function() {
delete this.layers.overlays.hillshade;
},
addHillshadeLayer: function() {
this.layers.overlays.hillshade = {
name: 'Hillshade Europa',
type: 'wms',
url: 'http://129.206.228.72/cached/hillshade',
name: "Hillshade Europa",
type: "wms",
url: "http://129.206.228.72/cached/hillshade",
visible: true,
layerOptions: {
layers: 'europe_wms:hs_srtm_europa',
format: 'image/png',
layers: "europe_wms:hs_srtm_europa",
format: "image/png",
opacity: 0.25,
attribution: 'Hillshade layer by GIScience http://www.osm-wms.de',
attribution: "Hillshade layer by GIScience http://www.osm-wms.de",
crs: L.CRS.EPSG900913
}
};
},
existsHillshadeLayer: function() {
return ('hillshade' in this.layers.overlays);
return ("hillshade" in this.layers.overlays);
}
});
} ]);
Expand Down
Loading

0 comments on commit 2767705

Please sign in to comment.