mohsen-angular-leaflet-directive
Version:
angular-leaflet-directive - An AngularJS directive to easily interact with Leaflet maps
210 lines (203 loc) • 10.1 kB
HTML
<html ng-app="demoapp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
<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.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) {
angular.extend($scope, {
layercontrol: {
icons: {
uncheck: "fa fa-toggle-off",
check: "fa fa-toggle-on"
}
},
madrid: {
lat: 40.415363,
lng: -3.707398,
zoom: 11
},
markers: {
m1: {
lat: 42.20133,
lng: 2.19110
}
},
layers: {
baselayers: {
osm: {
name: "OpenStreetMap",
type: "xyz",
url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
layerOptions: {
subdomains: ["a", "b", "c"],
attribution: "© <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",
layerOptions: {
subdomains: ["a", "b", "c"],
attribution: "© <a href=\"http://www.opencyclemap.org/copyright\">OpenCycleMap</a> contributors - © <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",
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
},
group: "Raster"
},
fire: {
name: "Fire Stations",
type: "xyz",
url: "http://openfiremap.org/hytiles/{z}/{x}/{y}.png",
layerOptions: {
attribution: "© <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - © <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: "© <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - © <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
continuousWorld: true
},
group: "Open Fire Map"
}
}
},
removeFireLayer: function() {
delete this.layers.overlays.fire;
},
addFireLayer: function() {
this.layers.overlays.fire = {
name: "Fire Stations",
type: "xyz",
url: "http://openfiremap.org/hytiles/{z}/{x}/{y}.png",
layerOptions: {
attribution: "© <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - © <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
continuousWorld: true
},
group: "Open Fire Map"
};
},
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: "© <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - © <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
continuousWorld: true
},
group: "Open Fire Map"
};
},
existsEmergencyRooms: function() {
return ("em" 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",
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
},
group: "Raster"
};
},
existsHillshadeLayer: function() {
return ("hillshade" in this.layers.overlays);
}
});
} ]);
</script>
</head>
<body ng-controller="ControlsCustomLayerControlController">
<style>
.angular-leaflet-control-layers {
position: absolute;
background: white;
z-index: 100;
left: 10px;
top: 100px;
width: 200px;
box-shadow: 1px 1px 5px #333;
padding: 5px;
}
.angular-leaflet-control-layers .lf-row label {
cursor: pointer;
width: 75%;
}
.angular-leaflet-control-layers .lf-row .lf-icon-ol {
padding-left: 8px;
}
.angular-leaflet-control-layers .lf-row .lf-icon {
cursor: pointer;
float: left;
margin-right: 5px;
padding-top: 2px;
}
.angular-leaflet-control-layers .lf-row label .lf-text {
float: left;
}
.angular-leaflet-control-layers .lf-row .lf-icon-ol-group {
color: #00650a;
}
.angular-leaflet-control-layers .lf-row .lf-icons {
float: right;
}
</style>
<leaflet lf-center="madrid" lf-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>