layercontrol - More than 1 map on the DOM

[santiquetzal]

When adding a <layercontrol> inside a leaflet map with id, the following error is shown:

angular.js:13920 Error: [ui-leaflet] - You have more than 1 map on the DOM, you must provide the map ID to the leafletData.getXXX call. Where one of the following mapIds mapViewer are available.
    at _obtainEffectiveMapId (http://localhost:8080/bower_components/ui-leaflet/dist/ui-leaflet.js:746:23)
    at getDefer (http://localhost:8080/bower_components/ui-leaflet/dist/ui-leaflet.js:902:22)
    at Object.self.(anonymous function) [as getLayers] (http://localhost:8080/bower_components/ui-leaflet/dist/ui-leaflet.js:555:25)
    at http://localhost:8080/bower_components/ui-leaflet/dist/ui-leaflet.js:3712:33
    at Scope.$digest (http://localhost:8080/bower_components/angular/angular.js:17524:23)
    at Scope.$apply (http://localhost:8080/bower_components/angular/angular.js:17790:24)
    at done (http://localhost:8080/bower_components/angular/angular.js:11831:47)
    at completeRequest (http://localhost:8080/bower_components/angular/angular.js:12033:7)
    at XMLHttpRequest.requestLoaded (http://localhost:8080/bower_components/angular/angular.js:11966:9)

I reviewed the code, and found that in https://github.com/angular-ui/ui-leaflet/blob/leaflet-1.X/src/directives/layercontrol.js there is no mapId,

I fixed locally adding a mapId to the directive and $scope.mapId / scope.mapId to the lines (of that directive) that need a mapId:

L.29    leafletData.getMap($scope.mapId).then(function (map) {
L.30    leafletData.getLayers($scope.mapId).then(function (leafletLayers) {
L.201  controller.getMap(scope.mapId).then(function (map) {
L.204   leafletData.getLayers(scope.mapId).then(function (leafletLayers) {
L.218   leafletData.getLayers(scope.mapId).then(function () {

Example of my map

<leaflet id="mapViewer"
         layers="$ctrl.layers"
         markers="$ctrl.markers" markers-nested="true"
         height="{{$ctrl.height}}" width="{{$ctrl.width}}">
    <layercontrol map-id="mapViewer"
                  icons="$ctrl.layercontrol.icons"
                  title="{{'mapviewer.tools.layercontrol.title' | translate }}"
                  base-title="{{'mapviewer.tools.layercontrol.base.layers' | translate }}"
                  overlays-title="{{'mapviewer.tools.layercontrol.overlay.layers' | translate }}"></layercontrol>
</leaflet>

I don't know if there is a better solution, but this works for me.