examples/0400-controls-custom-layer-control-example.html

<!DOCTYPE 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="../bower_components/angular-simple-logger/dist/angular-simple-logger.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: "&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",
                            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",
                                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: "&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"
                        }
                    }
                },
                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: "&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"
                    };
                },
                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
                        },
                        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" 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>