-
Notifications
You must be signed in to change notification settings - Fork 632
/
Copy path0204-layers-dynamic-addition-example.html
93 lines (88 loc) · 4.2 KB
/
0204-layers-dynamic-addition-example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html ng-app="demoapp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/leaflet/dist/leaflet.js"></script><script src="../bower_components/angular-simple-logger/dist/index.js"></script>
<script src="../dist/angular-leaflet-directive.min.js"></script>
<script>
var app = angular.module("demoapp", ["leaflet-directive"]);
app.controller("LayersDynamicAdditionController", [ "$scope", function($scope) {
$scope.definedLayers = {
mapbox_wheat: {
name: 'Mapbox Wheat Paste',
url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
type: 'xyz',
layerOptions: {
apikey: 'pk.eyJ1IjoiYnVmYW51dm9scyIsImEiOiJLSURpX0pnIn0.2_9NrLz1U9bpwMQBhVk97Q',
mapid: 'bufanuvols.lia35jfp'
}
},
osm: {
name: 'OpenStreetMap',
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
type: 'xyz'
}
};
$scope.definedOverlays = {
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',
opacity: 0.25,
attribution: 'Hillshade layer by GIScience http://www.osm-wms.de',
crs: L.CRS.EPSG900913
}
}
};
angular.extend($scope, {
bern: {
lat: 46.916,
lng: 7.466,
zoom: 10
},
layers: {
baselayers: {
osm: $scope.definedLayers.osm,
mapbox_wheat: $scope.definedLayers.mapbox_wheat
},
overlays: {
hillshade: $scope.definedOverlays.hillshade
}
}
});
$scope.toggleLayer = function(layerName) {
var baselayers = $scope.layers.baselayers;
if (baselayers.hasOwnProperty(layerName)) {
delete baselayers[layerName];
} else {
baselayers[layerName] = $scope.definedLayers[layerName];
}
};
$scope.toggleOverlay = function(overlayName) {
var overlays = $scope.layers.overlays;
if (overlays.hasOwnProperty(overlayName)) {
delete overlays[overlayName];
} else {
overlays[overlayName] = $scope.definedOverlays[overlayName];
}
};
}]);
</script>
</head>
<body ng-controller="LayersDynamicAdditionController">
<leaflet center="bern" layers="layers" width="100%" height="480px"></leaflet>
<h1>Dynamic addition/removal of layers</h1>
<button type="button" ng-if="layers.baselayers['mapbox_wheat']" ng-click="toggleLayer('mapbox_wheat')">Remove Mapbox Wheat Layer</button>
<button type="button" ng-if="!layers.baselayers['mapbox_wheat']" ng-click="toggleLayer('mapbox_wheat')">Add Mapbox Wheat Layer</button>
<button type="button" ng-if="layers.baselayers['osm']" ng-click="toggleLayer('osm')">Remove OpenStreetMap Layer</button>
<button type="button" ng-if="!layers.baselayers['osm']" ng-click="toggleLayer('osm')">Add OpenStreetMap Layer</button>
<button type="button" ng-if="layers.overlays['hillshade']" ng-click="toggleOverlay('hillshade')">Remove Hillshade Europe Overlay</button>
<button type="button" ng-if="!layers.overlays['hillshade']" ng-click="toggleOverlay('hillshade')">Add Hillshade Europe Overlay</button>
</body>
</html>