layers.js

angular.module('ui-leaflet').directive('layers', function (leafletLogger, $q, leafletData, leafletHelpers, leafletLayerHelpers, leafletControlHelpers, leafletWatchHelpers) {
    return {
        restrict: "A",
        scope: false,
        replace: false,
        require: 'leaflet',
        controller: function ($scope) {
            $scope._leafletLayers = $q.defer();
            this.getLayers = function () {
                return $scope._leafletLayers.promise;
            };
        },
        link: function (scope, element, attrs, controller) {
            var isDefined = leafletHelpers.isDefined,
                errorHeader = leafletHelpers.errorHeader,
                $log = leafletLogger,
                leafletLayers = {},
                leafletScope = controller.getLeafletScope(),
                layers = leafletScope.layers,
                createLayer = leafletLayerHelpers.createLayer,
                safeAddLayer = leafletLayerHelpers.safeAddLayer,
                safeRemoveLayer = leafletLayerHelpers.safeRemoveLayer,
                changeOpacityListener = leafletLayerHelpers.changeOpacityListener,
                updateLayersControl = leafletControlHelpers.updateLayersControl,
                maybeWatch = leafletWatchHelpers.maybeWatch,
                isLayersControlVisible = false;

            scope.$on('$destroy', function () {
                leafletControlHelpers.destroyMapLayersControl(scope.mapId);
            });

            controller.getMap().then(function (map) {

                // We have baselayers to add to the map
                scope._leafletLayers.resolve(leafletLayers);
                leafletData.setLayers(leafletLayers, attrs.id);

                leafletLayers.baselayers = {};
                leafletLayers.overlays = {};

                var mapId = attrs.id;

                _makeActiveBaseLayer();

                // Setup all baselayers definitions
                for (var layerName in layers.baselayers) {
                    var newBaseLayer = createLayer(layers.baselayers[layerName]);
                    if (!isDefined(newBaseLayer)) {
                        delete layers.baselayers[layerName];
                        continue;
                    }
                    leafletLayers.baselayers[layerName] = newBaseLayer;
                    if (layers.baselayers[layerName].top) {
                        safeAddLayer(map, leafletLayers.baselayers[layerName]);
                    }
                    layers.baselayers[layerName].doRefresh = false;
                    _watchBaseFn(layerName);
                }

                // Setup the Overlays
                for (layerName in layers.overlays) {
                    if (layers.overlays[layerName].type === 'cartodb') { }
                    var newOverlayLayer = createLayer(layers.overlays[layerName]);
                    if (!isDefined(newOverlayLayer)) {
                        delete layers.overlays[layerName];
                        continue;
                    }
                    leafletLayers.overlays[layerName] = newOverlayLayer;
                    // Only add the visible overlays to the map
                    if (layers.overlays[layerName].visible === true) {
                        safeAddLayer(map, leafletLayers.overlays[layerName]);
                    }
                    layers.overlays[layerName].doRefresh = false;
                    _watchOverlayFn(layerName);
                }

                // Watch for the base layers
                maybeWatch(leafletScope, 'layers.baselayers', { type: 'watchCollection' }, function (newBaseLayers, oldBaseLayers) {
                    if (angular.equals(newBaseLayers, oldBaseLayers)) {
                        isLayersControlVisible = updateLayersControl(map, mapId, isLayersControlVisible, newBaseLayers, layers.overlays, leafletLayers);
                        return true;
                    }
                    _createBaseLayer(newBaseLayers);
                });

                // Watch for the overlay layers
                maybeWatch(leafletScope, 'layers.overlays', { type: 'watchCollection' }, function (newOverlayLayers, oldOverlayLayers) {
                    if (angular.equals(newOverlayLayers, oldOverlayLayers)) {
                        isLayersControlVisible = updateLayersControl(map, mapId, isLayersControlVisible, layers.baselayers, newOverlayLayers, leafletLayers);
                        return true;
                    }
                    _createOverlayLayers(newOverlayLayers);
                });

                function _createBaseLayer(newBaseLayers) {
                    $log.debug(errorHeader, '_createBaseLayer', newBaseLayers);
                    // Delete layers from the array
                    for (var name in leafletLayers.baselayers) {
                        if (!isDefined(newBaseLayers[name])) {
                            _removeBaseLayer(name);
                        }
                    }
                    // add new layers
                    for (var newName in newBaseLayers) {
                        if (!isDefined(leafletLayers.baselayers[newName])) {
                            var testBaseLayer = createLayer(newBaseLayers[newName]);
                            if (isDefined(testBaseLayer)) {
                                leafletLayers.baselayers[newName] = testBaseLayer;
                                // Only add the visible layer to the map
                                if (newBaseLayers[newName].visible) {
                                    safeAddLayer(map, leafletLayers.baselayers[newName]);
                                }
                            }
                            newBaseLayers[newName].doRefresh = false;
                            _watchBaseFn(newName);
                        }
                    }

                    _makeActiveBaseLayer();

                    // Only show the layers switch selector control if we have more than one baselayer + overlay
                    isLayersControlVisible = updateLayersControl(map, mapId, isLayersControlVisible, newBaseLayers, layers.overlays, leafletLayers);
                }

                function _watchBaseFn(name) {
                    var baseWatchPath = "layers.baselayers[\"" + name + "\"]";
                    maybeWatch(leafletScope, baseWatchPath, { type: 'watchCollection' },
                        function (layerData, old, clearWatch) {
                            if (layerData === old) {
                                return;
                            }
                            if (!isDefined(layerData)) {
                                _removeBaseLayer(name);
                                clearWatch();
                                return;
                            }
                            if (isDefined(old) && old.doRefresh && !layerData.doRefresh) {
                                return;
                            }
                            _updateBaseLayer(name, layerData, old);
                        });
                }

                function _removeBaseLayer(name) {
                    $log.debug('_removeBaseLayer', name);
                    // Remove from the map if it's on it
                    if (map.hasLayer(leafletLayers.baselayers[name])) {
                        map.removeLayer(leafletLayers.baselayers[name]);
                    }
                    delete leafletLayers.baselayers[name];
                }

                function _updateBaseLayer(name, layerData) {
                    $log.debug(errorHeader, '_updateBaseLayer', layerData);

                    if (layerData.doRefresh) {
                        if (map.hasLayer(leafletLayers.baselayers[name])) {
                            map.removeLayer(leafletLayers.baselayers[name]);
                        }
                        if (!map.hasLayer(leafletLayers.baselayers[name])) {
                            var testBaseLayer = createLayer(layerData);
                            if (isDefined(testBaseLayer)) {
                                leafletLayers.baselayers[name] = testBaseLayer;
                                safeAddLayer(map, leafletLayers.baselayers[name]);
                            }
                        }
                        layerData.doRefresh = false;
                        return;
                    }

                    if (isDefined(layerData.top)) {
                        if (layerData.top && !map.hasLayer(leafletLayers.baselayers[name])) {
                            safeAddLayer(map, leafletLayers.baselayers[name]);
                        } else if (!layerData.top && map.hasLayer(leafletLayers.baselayers[name])) {
                            map.removeLayer(leafletLayers.baselayers[name]);
                        }
                    }
                }

                function _makeActiveBaseLayer() {
                    //we have layers, so we need to make, at least, one active
                    var found = false;
                    // search for an active layer
                    for (var key in layers.baselayers) {
                        if (layers.baselayers[key].top) {
                            found = true;
                            break;
                        }
                    }
                    // If there is no active layer make one active
                    if (!found && Object.keys(layers.baselayers).length > 0) {
                        layers.baselayers[Object.keys(layers.baselayers)[0]].top = true;
                    }
                }

                function _createOverlayLayers(newOverlayLayers) {
                    $log.debug(errorHeader, '_createOverlayLayers', newOverlayLayers);

                    // Delete layers from the array
                    for (var name in leafletLayers.overlays) {
                        if (!isDefined(newOverlayLayers[name])) {
                            _removeOverlayLayer(name, newOverlayLayers[name]);
                        }
                    }

                    // add new overlays
                    for (var newName in newOverlayLayers) {
                        if (!isDefined(leafletLayers.overlays[newName])) {
                            var testOverlayLayer = createLayer(newOverlayLayers[newName]);
                            if (!isDefined(testOverlayLayer)) {
                                // If the layer creation fails, continue to the next overlay
                                continue;
                            }
                            leafletLayers.overlays[newName] = testOverlayLayer;
                            if (newOverlayLayers[newName].visible) {
                                safeAddLayer(map, leafletLayers.overlays[newName]);
                            }

                            if (isDefined(newOverlayLayers[newName].index) && leafletLayers.overlays[newName].setZIndex) {
                                leafletLayers.overlays[newName].setZIndex(newOverlayLayers[newName].index);
                            }

                            newOverlayLayers[newName].doRefresh = false;
                            _watchOverlayFn(newName);
                        }
                    }

                    // Only add the layers switch selector control if we have more than one baselayer + overlay
                    isLayersControlVisible = updateLayersControl(map, mapId, isLayersControlVisible, layers.baselayers, newOverlayLayers, leafletLayers);
                }

                function _watchOverlayFn(name) {
                    var overlayWatchPath = "layers.overlays[\"" + name + "\"]";
                    maybeWatch(leafletScope, overlayWatchPath, { type: 'watchCollection' },
                        function (layerData, old, clearWatch) {
                            if (layerData === old) { return; }
                            if (!isDefined(layerData)) {
                                _removeOverlayLayer(name, layerData);
                                clearWatch();
                                return;
                            }
                            if (isDefined(old) && old.doRefresh && !layerData.doRefresh) {
                                return;
                            }
                            _updateOverlayLayer(name, layerData, old);
                        });
                }

                function _removeOverlayLayer(name, layerData) {
                    $log.debug(errorHeader, '_removeOverlayLayer', name, layerData);
                    // Remove from the map if it's on it
                    if (map.hasLayer(leafletLayers.overlays[name])) {
                        // Safe remove when ArcGIS layers is loading.
                        var options = isDefined(layerData) ? layerData.layerOptions : null;
                        safeRemoveLayer(map, leafletLayers.overlays[name], options);
                    }
                    // TODO: Depending on the layer type we will have to delete what's included on it
                    delete leafletLayers.overlays[name];
                }

                function _updateOverlayLayer(name, layerData, old) {
                    $log.debug(errorHeader, '_updateOverlayLayer', name, layerData, old);

                    // check for the .doRefresh property to remove/add overLayers
                    if (layerData.doRefresh) {
                        if (map.hasLayer(leafletLayers.overlays[name])) {
                            var options = isDefined(layerData) ? layerData.layerOptions : null;
                            safeRemoveLayer(map, leafletLayers.overlays[name], options);
                        }
                        if (!map.hasLayer(leafletLayers.overlays[name])) {
                            var testOverlayLayer = createLayer(layerData);
                            if (isDefined(testOverlayLayer)) {
                                leafletLayers.overlays[name] = testOverlayLayer;
                                safeAddLayer(map, leafletLayers.overlays[name]);
                            }
                        }
                        layerData.doRefresh = false;
                    }

                    // check for the .visible property to hide/show overLayers
                    if (layerData.visible && !map.hasLayer(leafletLayers.overlays[name])) {
                        safeAddLayer(map, leafletLayers.overlays[name]);
                    } else if (!layerData.visible && map.hasLayer(leafletLayers.overlays[name])) {
                        // Safe remove when ArcGIS layers is loading.
                        safeRemoveLayer(map, leafletLayers.overlays[name], layerData.layerOptions);
                    }

                    // check for the .layerOptions.opacity property has changed.
                    var ly = leafletLayers.overlays[name];
                    if (map.hasLayer(leafletLayers.overlays[name])) {
                        if (layerData.layerOptions.opacity !== old.layerOptions.opacity) {

                            if (isDefined(ly.setOpacity)) {
                                ly.setOpacity(layerData.layerOptions.opacity);
                            }
                            if (isDefined(ly.getLayers) && isDefined(ly.eachLayer)) {
                                ly.eachLayer(changeOpacityListener(layerData.layerOptions.opacity));
                            }
                        }

                        if (isDefined(layerData.index) && ly.setZIndex &&
                            layerData.index !== old.index) {
                            ly.setZIndex(layerData.index);
                        }
                    }

                    //refresh heatmap data if present
                    if (layerData.visible && map._loaded && layerData.data && layerData.type === "heatmap") {
                        leafletLayers.overlays[name].setData(layerData.data);
                        leafletLayers.overlays[name].update();
                    }
                }
            });
        }
    };
});