diff --git a/src/module_vmap/module/css/vmap.less b/src/module_vmap/module/css/vmap.less
index b1a22a83179eb27d76840425c40218596caef478..fa7278d2fcf13ac3cdd3f2529f01158bff52c206 100644
--- a/src/module_vmap/module/css/vmap.less
+++ b/src/module_vmap/module/css/vmap.less
@@ -2443,3 +2443,18 @@ div.vmap-select-scale-alert{
     font-size: 16px;
     line-height: 0;
 }
+
+.layerstree-nav {
+    margin-left: 40px;
+}
+
+.layerstree-nav>li>a {
+    padding: 0px 15px;
+    border: 1px solid #8a8a8a !important;
+    color: #333;
+}
+
+.ol-current-projection-compare{
+    bottom: 29px;
+    margin-left: -16%;
+}
diff --git a/src/module_vmap/module/javascript/app/vmap/map/mapcompare.js b/src/module_vmap/module/javascript/app/vmap/map/mapcompare.js
index 597d790f410c1f5a60e66034121d41bb61e1936b..b3304a3c7800e0e991cc42b0c80bd0a11e4ee882 100644
--- a/src/module_vmap/module/javascript/app/vmap/map/mapcompare.js
+++ b/src/module_vmap/module/javascript/app/vmap/map/mapcompare.js
@@ -519,8 +519,10 @@ nsVmap.MapCompare.prototype.mapCompareController = function ($scope, $window, $e
             'size': this_.map.getSize(),
             'tileSize': tileSize
         });
+
         // Définit la vue de la carte
         this_.addView(olView_);
+
         // Définit les couches de la carte
         for (var i = 0; i < olLayers_.length; i++) {
             this_.addLayer(olLayers_[i]);
@@ -533,6 +535,12 @@ nsVmap.MapCompare.prototype.mapCompareController = function ($scope, $window, $e
         setTimeout(function () {
             this_.updateCompareScaleMap();
         });
+
+        // Affiche le nom de la carte
+        this_.displayMapName();
+
+        // Affiche le nom de la carte
+        this_.displayMapProj();
     })
 
     /**
@@ -765,3 +773,35 @@ nsVmap.MapCompare.prototype.mapCompareController.prototype.addView = function (o
         });
     }
 };
+
+/**
+ * Display the map name tool
+ */
+nsVmap.MapCompare.prototype.mapCompareController.prototype.displayMapName = function () {
+    oVmap.log('nsVmap.nsMapManager.LayersTree.prototype.LayertreeController.prototype.displayMapName');
+
+    if ($("#map-name-compare").length == 0) {
+        $('#olMapCompare').children().children('.ol-overlaycontainer-stopevent').append('<div class="ol-map-name ol-map-name-compare ol-unselectable"><span id="map-name-compare" class="ol-control"></span></div>');
+    }
+
+    var vMapCatalog = oVmap.getMapManager().getMapCatalog();
+    for (var i = 0; i < vMapCatalog['maps'].length; i++) {
+        if (vMapCatalog['maps'][i]['compare'] === true) {
+            var currentMapName = vMapCatalog['maps'][i]['name'];
+        }
+    }
+    $("#map-name-compare").html(currentMapName);
+}
+
+/**
+ * Display the map proj tool
+ */
+nsVmap.MapCompare.prototype.mapCompareController.prototype.displayMapProj = function () {
+    oVmap.log('nsVmap.nsMapManager.LayersTree.prototype.LayertreeController.prototype.displayMapProj');
+
+    if ($("#current-projection-compare").length == 0) {
+        $('#olMapCompare').children().children('.ol-overlaycontainer-stopevent').append('<div class="ol-current-projection ol-unselectable ol-current-projection-compare"><span id="current-projection-compare" class="ol-control"></span></div>');
+    }
+
+    $("#current-projection-compare").html(oVmap['oProjections'][oVmap.getMapCompare().getOLMap().getView().getProjection().getCode()]);
+}
diff --git a/src/module_vmap/module/javascript/app/vmap/mapmanager/layerstree.js b/src/module_vmap/module/javascript/app/vmap/mapmanager/layerstree.js
index 673cb4e0f66ff2e60cc0b2faab5137030da12bb0..2a5fe743b519e0186dae873e6317327fee403212 100644
--- a/src/module_vmap/module/javascript/app/vmap/mapmanager/layerstree.js
+++ b/src/module_vmap/module/javascript/app/vmap/mapmanager/layerstree.js
@@ -117,6 +117,19 @@ nsVmap.nsMapManager.LayersTree.prototype.LayertreeController = function ($scope,
      */
     $scope['tree'] = oVmap.getMapManager().getLayersTree();
 
+
+    /**
+     * The map compare layersTree
+     * @type {object}
+     */
+    $scope['compareTree'] = {};
+
+
+    /**
+     * The active map
+     */
+    $scope['activeMap'] = 1;
+
     /**
      * The current properties
      */
@@ -194,6 +207,17 @@ nsVmap.nsMapManager.LayersTree.prototype.LayertreeController = function ($scope,
 };
 oVmap.module.controller('AppLayertreeController', nsVmap.nsMapManager.LayersTree.prototype.LayertreeController);
 
+/**
+ * Resize the layertools
+ */
+nsVmap.nsMapManager.LayersTree.prototype.LayertreeController.prototype.resize = function () {
+    oVmap.log('nsVmap.nsMapManager.LayersTree.LayertreeController.resize');
+
+    setTimeout(function () {
+        oVmap.resizeLayerTools();
+    });
+}
+
 /**
  * Set a layer visible or not
  * @param {ol.layer.Base} olLayer
@@ -270,6 +294,8 @@ nsVmap.nsMapManager.LayersTree.prototype.LayertreeController.prototype.setGroupV
     }
 
     this.memoriseGroupVisible(node);
+
+    oVmap['scope'].$broadcast('layersChanged');
 };
 
 /**
@@ -350,6 +376,14 @@ nsVmap.nsMapManager.LayersTree.prototype.LayertreeController.prototype.reloadTre
     // relance le chargement des couches avec le nouvel arbre
     this.loadTree();
 
+    // Arbre pour la comparaison
+    if(this.scope_["$root"]["compare_enabled"]){
+        var oCompareTree = jQuery.extend(true, {}, oVmap.getMapManager().getCompareLayersTree());
+        this.scope_['compareTree'] = oCompareTree;
+    } else {
+        this.scope_['compareTree'] = {};
+    }
+
     oVmap.resizeLayerTools(false);
 };
 
@@ -638,6 +672,20 @@ nsVmap.nsMapManager.LayersTree.prototype.LayertreeController.prototype.closeLaye
             }
         }
     }
+
+    if (goog.isDefAndNotNull(this.scope_['compareTree'])) {
+        if (goog.isArray(this.scope_['compareTree']['children'])) {
+            for (var i = 0; i < this.scope_['compareTree']['children'].length; i++) {
+                if (goog.isDefAndNotNull(this.scope_['compareTree']['children'][i]['children'])) {
+                    for (var ii = 0; ii < this.scope_['compareTree']['children'][i]['children'].length; ii++) {
+                        if (goog.isDefAndNotNull(this.scope_['compareTree']['children'][i]['children'][ii]['olLayer'])) {
+                            this.scope_['compareTree']['children'][i]['children'][ii]['displayedMenu'] = false;
+                        }
+                    }
+                }
+            }
+        }
+    }
 };
 
 /**
diff --git a/src/module_vmap/module/javascript/app/vmap/mapmanager/maplegend.js b/src/module_vmap/module/javascript/app/vmap/mapmanager/maplegend.js
index 48d2e54ec1915eb1e28b91b4908630d62aa5b32c..c6759068d12cdca81139276cf329080ba8fe1adf 100644
--- a/src/module_vmap/module/javascript/app/vmap/mapmanager/maplegend.js
+++ b/src/module_vmap/module/javascript/app/vmap/mapmanager/maplegend.js
@@ -136,7 +136,17 @@ nsVmap.nsMapManager.MapLegend.prototype.maplegendController = function ($scope)
     /**
      * @private
      */
-    this['aUrls'] = [];
+    this['oUrls'] = {};
+
+    /**
+     * @private
+     */
+    this['oCompareUrls'] = {};
+
+    /**
+     * The active map
+     */
+    $scope['activeMap'] = 1;
 
     /**
      * Contains the events stocked by listenLayers()
@@ -158,6 +168,18 @@ nsVmap.nsMapManager.MapLegend.prototype.maplegendController = function ($scope)
     });
 };
 
+
+/**
+ * Resize the layertools
+ */
+nsVmap.nsMapManager.MapLegend.prototype.maplegendController.prototype.resize = function () {
+    oVmap.log('nsVmap.nsMapManager.MapLegend.maplegendController.resize');
+
+    setTimeout(function () {
+        oVmap.resizeLayerTools();
+    });
+}
+
 /**
  * Loads the legend
  * @export
@@ -165,18 +187,26 @@ nsVmap.nsMapManager.MapLegend.prototype.maplegendController = function ($scope)
 nsVmap.nsMapManager.MapLegend.prototype.maplegendController.prototype.loadLegend = function () {
     oVmap.log('nsVmap.nsMapManager.MapLegend.maplegendController.loadLegend');
 
-    this['oUrls'] = this.getLegendUrls();
+    this['oUrls'] = this.getLegendUrls(oVmap.getMap().getOLMap());
     this.downloadLegendImgs(this['oUrls']);
+
+    if(this.$scope_["$root"]["compare_enabled"]){
+        this['oCompareUrls'] = this.getLegendUrls(oVmap.getMapCompare().getOLMap());
+        this.downloadLegendImgs(this['oCompareUrls']);
+    } else {
+        this['oCompareUrls'] = {};
+    }
 };
 
 /**
  * Get the legend URLs
+ * @param {object} olMap
  * @returns {object}
  */
-nsVmap.nsMapManager.MapLegend.prototype.maplegendController.prototype.getLegendUrls = function () {
+nsVmap.nsMapManager.MapLegend.prototype.maplegendController.prototype.getLegendUrls = function (olMap) {
     oVmap.log('nsVmap.nsMapManager.MapLegend.maplegendController.getLegendUrls');
 
-    var aLayers = oVmap.getMap().getOLMap().getLayers().getArray();
+    var aLayers = olMap.getLayers().getArray();
     var oUrls = {};
 
     // Récupération des URL WMS
diff --git a/src/module_vmap/module/javascript/app/vmap/mapmanager/mapmanager.js b/src/module_vmap/module/javascript/app/vmap/mapmanager/mapmanager.js
index 13114d60d7874701fa6fc84a16d079e020ee1634..d42d368d9bce08e8b42bcc399a3efab62aee2ec9 100644
--- a/src/module_vmap/module/javascript/app/vmap/mapmanager/mapmanager.js
+++ b/src/module_vmap/module/javascript/app/vmap/mapmanager/mapmanager.js
@@ -314,7 +314,7 @@ nsVmap.nsMapManager.MapManager.prototype.loadCompareMap = function (element) {
     var this_ = this;
     this_.getAjaxLayersTree(sUrl, function(oTree){
 
-        oVmap.log("oTree: ", oTree);
+        oVmap.log("oCompareTree: ", oTree);
 
         // Change la variable oLayersTree
         this_.setCompareLayersTree(oTree);
@@ -927,7 +927,7 @@ nsVmap.nsMapManager.MapManager.prototype.ajaxGetMapCatalog = function (sUrl) {
  * @return {object<LayersTree>}
  */
 nsVmap.nsMapManager.MapManager.prototype.getAjaxLayersTree = function (sUrl, callback) {
-    var LayersTree;
+    var oLayersTree;
 
     ajaxRequest({
         'method': 'GET',
@@ -937,11 +937,9 @@ nsVmap.nsMapManager.MapManager.prototype.getAjaxLayersTree = function (sUrl, cal
         'success': function (response) {
             var data = JSON.parse(response['data']);
             if (goog.isDef(data['mapjsons'])) {
-                LayersTree = data['mapjsons'][0];
+                oLayersTree = data['mapjsons'][0];
             }
-
-            oVmap.log(LayersTree);
-            callback.call(this, LayersTree);
+            callback.call(this, oLayersTree);
         }
     });
 };
diff --git a/src/module_vmap/module/javascript/app/vmap/tools/controls.js b/src/module_vmap/module/javascript/app/vmap/tools/controls.js
index 67b20e2e0fa4df43af05829b3365f6282f0ae60d..6fee41a7d7821c2ffb37070543fbe7aaef4e23df 100755
--- a/src/module_vmap/module/javascript/app/vmap/tools/controls.js
+++ b/src/module_vmap/module/javascript/app/vmap/tools/controls.js
@@ -31,7 +31,7 @@ goog.require('ol.format.TopoJSON');
 /**
  * @classdesc
  * Class {@link nsVmap.nsToolsManager.Controls}: Add the controls defined in data/tools.json,
- * available : Attribution, FullScreen, MousePosition, OverviewMap, Rotate, ScaleLine, Zoom, ZoomSlider, 
+ * available : Attribution, FullScreen, MousePosition, OverviewMap, Rotate, ScaleLine, Zoom, ZoomSlider,
  * ZoomToExtent, CurrentProjection, DragAndDrop (GPX,GeoJSON,IGC,KML,TopoJSON)
  * @param {array} aControls Controls to set
  * @constructor
@@ -273,7 +273,7 @@ nsVmap.nsToolsManager.Controls.prototype.addControl = function (control) {
 /**
  * Toggle a control to the ol map
  * @param {string} control Control to toggle
- * @param {boolean} bActive 
+ * @param {boolean} bActive
  * @export
  */
 nsVmap.nsToolsManager.Controls.prototype.setToolActive = function (control, bActive) {
@@ -426,4 +426,4 @@ nsVmap.nsToolsManager.Controls.prototype.getOverviewMap = function () {
 
 // Définit la directive et le controller
 oVmap.module.directive('appControls', nsVmap.nsToolsManager.Controls.prototype.controlsDirective);
-oVmap.module.controller('AppControlsController', nsVmap.nsToolsManager.Controls.prototype.controlsController);
\ No newline at end of file
+oVmap.module.controller('AppControlsController', nsVmap.nsToolsManager.Controls.prototype.controlsController);
diff --git a/src/module_vmap/module/javascript/app/vmap/tools/print.js b/src/module_vmap/module/javascript/app/vmap/tools/print.js
index efc99e6add1af7135b89c9210efd195df339902c..11d16df791e0e3264dd1b1fed622b4db3647e2fc 100644
--- a/src/module_vmap/module/javascript/app/vmap/tools/print.js
+++ b/src/module_vmap/module/javascript/app/vmap/tools/print.js
@@ -635,14 +635,22 @@ nsVmap.nsToolsManager.Print.prototype.printController.prototype.print = function
     var printStyleId = opt_options.printStyleId;
 
     // Set includesJSON
-    var includesJson = JSON.stringify([{
+    var aIncludes = [{
             'target': '#map_legend',
-            'html': this_.getLegendTemplate()
-        }]);
+            'html': this_.getLegendTemplate('#maplegend')
+        }];
+    if(this.$scope_["$root"]["compare_enabled"]){
+        aIncludes.push({
+            'target': '#map_legend_compare',
+            'html': this_.getLegendTemplate('#compare_maplegend')
+        });
+    }
+    var includesJson = JSON.stringify(aIncludes);
 
     // Set scope
     var oPrintScope = goog.isDefAndNotNull(opt_options.scope) ? opt_options.scope : {};
     oPrintScope['date'] = goog.isDefAndNotNull(oPrintScope['date']) ? oPrintScope['date'] : today;
+    oPrintScope['compare_mode'] = this.$scope_["$root"]["compare_enabled"] === true ? true : false;
     var sScope = JSON.stringify(oPrintScope);
 
     // Ouvre la fenêtre d'impression
@@ -780,6 +788,10 @@ nsVmap.nsToolsManager.Print.prototype.printController.prototype.print = function
     return 1;
 };
 
+/**
+ * Get the maps JSON defs
+ * @param  {object} opt_options
+ */
 nsVmap.nsToolsManager.Print.prototype.printController.prototype.getMapsJsonDef = function (opt_options) {
     oVmap.log('nsVmap.nsToolsManager.Print.prototype.printController.prototype.getMapsJsonDef');
 
@@ -928,11 +940,12 @@ nsVmap.nsToolsManager.Print.prototype.printController.prototype.getTemplateTarge
 
 /**
  * Get the html definition of the template with base64 images
+ * @param  {string} sTarget
  * @returns {String}
  */
-nsVmap.nsToolsManager.Print.prototype.printController.prototype.getLegendTemplate = function () {
+nsVmap.nsToolsManager.Print.prototype.printController.prototype.getLegendTemplate = function (sTarget) {
 
-    var template = $('#maplegend').clone();
+    var template = $(sTarget).clone();
 
     // Transforme les images en base64
     template.find('img').each(function (index) {
diff --git a/src/module_vmap/module/template/layers/layertree.html b/src/module_vmap/module/template/layers/layertree.html
index 5002135b16e7963f77a07de5163eee7f95c04f80..3141c44e2381b972cbd1df47df5f2c3cd7f5de90 100644
--- a/src/module_vmap/module/template/layers/layertree.html
+++ b/src/module_vmap/module/template/layers/layertree.html
@@ -12,10 +12,20 @@
 </div>
 
 <div id="layertree" class="layers-tool" collapse="{{ctrl.layerstree_collapsed === true ? 'out' : 'in'}}">
+
+    <ul class="nav nav-tabs layerstree-nav left" ng-show="$root.compare_enabled">
+        <li ng-class="{'active' : activeMap == 1}">
+            <a href="#" ng-click="activeMap=1;ctrl.resize()">Carte 1</a>
+        </li>
+        <li ng-class="{'active' : activeMap == 2}">
+            <a href="#" ng-click="activeMap=2;ctrl.resize()">Carte 2</a>
+        </li>
+    </ul>
     <div class="indicators">
         <span class="text-info icon-eye" style="font-size: 18px;line-height: 0" title="Définit si la couche est visible"></span>
     </div>
-    <ul class="tree">
+
+    <ul class="tree" ng-show="activeMap == 1 || !$root.compare_enabled">
         <div ng-repeat="node in tree.children| orderBy : 'name'" ng-if="node.view === undefined">
 
             <!-- Service -->
@@ -140,6 +150,108 @@
             </ul>
         </div>
     </ul>
+
+    <ul class="tree" ng-show="activeMap == 2 && $root.compare_enabled">
+        <div ng-repeat="node in compareTree.children| orderBy : 'name'" ng-if="node.view === undefined">
+
+            <!-- Service -->
+            <div class="layerstree-phather">
+                <div class="tree-father-collapse-btn service-name left" data-toggle="collapse" data-target="#comparetree_element_{{$id}}" onclick="setTimeout(function () {
+                                oVmap.resizeLayerTools(true)
+                            }, 500)" title="{{node.name}}">
+                    {{node.name}}
+                </div>
+                <div class="checkbox checkbox-info inline-checkbox right"
+                     ng-class="{'checkbox_indeterminate': node.visible === null}">
+                    <input id="compare_service_{{$id}}_visible"
+                           ng-init="node.visible = ctrl.isGroupVisible(node)"
+                           ng-model="node.visible"
+                           ng-model-options="{getterSetter: true}"
+                           ng-click="ctrl.setGroupVisible(node)"
+                           type="checkbox"
+                           style="cursor:pointer; position: absolute"
+                           title="Definit si le groupe est visible">
+                    <label for="compare_service_{{$id}}_visible"
+                           style="cursor:pointer"
+                           title="Definit si le groupe est visible"></label>
+                </div>
+            </div>
+
+            <!-- Calque -->
+            <ul id="comparetree_element_{{$id}}" class="collapse layers-tree-ul tree-element" ng-class="{'in': ctrl.layers_collapsed !== true}">
+                <div ng-repeat="layer in node.children">
+                    <li>
+                        <ul class="list-group-item layertree-item auto-height">
+
+                            <!-- Nom du calque -->
+                            <div class="layer-name layer-name-tree" title="{{layer.name}}">{{layer.name}}</div>
+                            <div class="layer-checkboxes">
+                                <button type="button"
+                                        class="btn btn-xs margin-sides-10 hidden"
+                                        ng-click="layer.olLayer.getSource().refreshWithTimestamp()">
+                                    <span class="glyphicon glyphicon-refresh"></span>
+                                </button>
+                                <div type="button" class="btn btn-xs layer-menu-button" ng-click="ctrl.toggleLayerMenu(layer, $event)">
+                                    <span ng-class="{'icon-filter': layer.olLayer.get('is_filtered'), 'icon-format_list_bulleted': !layer.olLayer.get('is_filtered')}"></span>
+                                </div>
+                                <!-- Checkbox visible -->
+                                <div class="checkbox checkbox-info inline-checkbox" style="z-index: 10;">
+                                    <input id="{{layer.$$hashKey}}_compare_visible_order_checkbox"
+                                           type="checkbox"
+                                           style="cursor:pointer; position: absolute"
+                                           title="Definit si le calque est visible"
+                                           ng-checked="layer.olLayer.values.visible === true"
+                                           ng-click="ctrl.setVisible(layer.olLayer, !layer.olLayer.values.visible);node.visible = ctrl.isGroupVisible(node)">
+                                    <label for="{{layer.$$hashKey}}_compare_visible_order_checkbox" style="cursor:pointer" title="Definit si la couche est visible"></label>
+                                </div>
+                            </div>
+                        </ul>
+                    </li>
+                    <div class="dropdown-menu layer-menu" ng-class="{'block': layer.displayedMenu === true}">
+                        <div class="layer-menu-list">
+                            <li ng-if="layer.olLayer.get('is_filtered')" ng-click="ctrl.displayFilterLayerModal(layer.olLayer)">
+                                <a href="#">
+                                    <span class="icon-filter"></span>
+                                    Filtre
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#">
+                                    <div class="row">
+                                        <div class="col-xs-6">
+                                            <span class="icon-star-half"></span>
+                                            Transparence
+                                        </div>
+                                        <div class="col-xs-6">
+                                            <div class="layer-menu-list-slider">
+                                                <input data-app-layer-opacity-slider="" id="compare_slider_layer_form_{{layer.$$hashKey}}" type="text">
+                                            </div>
+                                        </div>
+                                    </div>
+                                </a>
+                            </li>
+                            <li ng-if="layer.olLayer.get('type') === 'imagewms' || layer.olLayer.get('type') === 'tilewms'"
+                                ng-repeat="sublayer in layer.olLayer.get('sublayers')">
+                                <div class="sublayer-checkboxes">
+                                    <!-- Checkbox visible -->
+                                    <div class="checkbox checkbox-info sublayer-checkbox inline-checkbox">
+                                        <input id="{{layer.$$hashKey}}_compare_sublayer_{{sublayer}}_visible_checkbox"
+                                               type="checkbox"
+                                               style="cursor:pointer; position: absolute"
+                                               title="Definit si la couche est visible"
+                                               ng-checked="ctrl.isSublayerActive(layer.olLayer, sublayer)"
+                                               ng-disabled="layer.olLayer.values.visible !== true"
+                                               ng-click="ctrl.toggleSubLayer(layer.olLayer, sublayer, '#' + layer.$$hashKey + '_sublayer_' + sublayer + '_visible_checkbox')">
+                                        <label for="{{layer.$$hashKey}}_compare_sublayer_{{sublayer}}_visible_checkbox" style="cursor:pointer" title="Definit si la couche est visible">{{sublayer}}</label>
+                                    </div>
+                                </div>
+                            </li>
+                        </div>
+                    </div>
+                </div>
+            </ul>
+        </div>
+    </ul>
 </div>
 
 <!--Modale pour le filtrage-->
diff --git a/src/module_vmap/module/template/layers/maplegend.html b/src/module_vmap/module/template/layers/maplegend.html
index a82570aa249be47f2f17a50eb48f4238af16d693..4c34eb4904c8941687b5019d7b7c9d20076a7b57 100755
--- a/src/module_vmap/module/template/layers/maplegend.html
+++ b/src/module_vmap/module/template/layers/maplegend.html
@@ -1,9 +1,9 @@
 <div class="maplegendtool">
     <div ng-if="!$root.is_mobile" id="maplegendcontainer-button">
-        <div class="list-group-item active pointer maplegend-button-content" 
-             title="Légende de la carte" 
+        <div class="list-group-item active pointer maplegend-button-content"
+             title="Légende de la carte"
              collapse="{{ctrl.legend_collapsed === true ? 'out' : 'in'}}"
-             data-target="#maplegendcontainer" 
+             data-target="#maplegendcontainer"
              onclick="oVmap.getMapManager().collapseElement(this)">
             <span class="icon-info list-group-icon"></span>
             <span>Légende</span>
@@ -12,7 +12,15 @@
         </div>
     </div>
     <div id="maplegendcontainer" class="layers-tool legend" collapse="{{ctrl.legend_collapsed === true ? 'out' : 'in'}}">
-        <div id="maplegend" class="tree legend">
+        <ul class="nav nav-tabs layerstree-nav" ng-show="$root.compare_enabled">
+            <li ng-class="{'active' : activeMap == 1}">
+                <a href="#" ng-click="activeMap=1;ctrl.resize()">Carte 1</a>
+            </li>
+            <li ng-class="{'active' : activeMap == 2}">
+                <a href="#" ng-click="activeMap=2;ctrl.resize()">Carte 2</a>
+            </li>
+        </ul>
+        <div id="maplegend" class="tree legend" ng-show="activeMap == 1 || !$root.compare_enabled">
             <div ng-repeat="(sLayerName, layer) in ctrl.oUrls" class="layer-legend"
                  ng-show="ctrl.areLegendsLoaded(layer)">
                 <div id="legend_father{{$index}}" data-toggle="collapse" data-target="#legend_element_{{$index}}">
@@ -23,7 +31,26 @@
                 <div id="legend_element_{{$index}}" class="collapse in">
                     <ul class="list-group-item auto-height">
                         <div ng-repeat="node in layer"
-                             ng-show="node.legendBlobURL">                            
+                             ng-show="node.legendBlobURL">
+                            <img ng-src="{{node.legendBlobURL}}" class="legend-img" legend-image-node>
+                        </div>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <div id="compare_maplegend" class="tree legend" ng-show="activeMap == 2 && $root.compare_enabled">
+            <div ng-repeat="(sLayerName, layer) in ctrl.oCompareUrls" class="layer-legend"
+                 ng-show="ctrl.areLegendsLoaded(layer)">
+                <div id="compare_legend_father{{$index}}" data-toggle="collapse" data-target="#compere_legend_element_{{$index}}">
+                    <div style="display: inline-block; width:98%">
+                        <div class="legend_father_name" title="{{sLayerName}}">{{sLayerName}}</div>
+                    </div>
+                </div>
+                <div id="compare_legend_element_{{$index}}" class="collapse in">
+                    <ul class="list-group-item auto-height">
+                        <div ng-repeat="node in layer"
+                             ng-show="node.legendBlobURL">
                             <img ng-src="{{node.legendBlobURL}}" class="legend-img" legend-image-node>
                         </div>
                     </ul>
@@ -31,4 +58,4 @@
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>