From 500f524a7e0367d6b7aa0a28abe6c57fd4b67607 Mon Sep 17 00:00:00 2001
From: Anthony Borghi <anthony.borghi@veremes.com>
Date: Mon, 5 Nov 2018 16:18:25 +0100
Subject: [PATCH] Instanciation du composant Map pour la comparaison et synchro
avec le composant classique
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Retouche sur le HTML existant :
- cache le sélecteur de carte si le mode comparaison n'est pas actif
- ajout d'un séparateur central
- render du composant sur déploiement des panneau latéraux
Synchro de la carte et curseur de positionnement :
- centre
- résolution
- pointer
---
src/module_vmap/module/css/vmap.less | 34 +-
.../javascript/app/vmap/map/mapcompare.js | 407 ++++++++++++++++++
.../app/vmap/mapmanager/mapmanager.js | 56 ++-
.../module/javascript/app/vmap/requires.js | 3 +-
.../javascript/app/vmap/tools/compare.js | 8 -
.../module/javascript/app/vmap/vmap.js | 30 +-
.../module/template/tools/basictools.html | 2 +-
.../template/tools/comparemapmanager.html | 4 +-
src/module_vmap/module/template/vmap.html | 4 +-
9 files changed, 530 insertions(+), 18 deletions(-)
create mode 100644 src/module_vmap/module/javascript/app/vmap/map/mapcompare.js
diff --git a/src/module_vmap/module/css/vmap.less b/src/module_vmap/module/css/vmap.less
index 9d931968..1a006740 100644
--- a/src/module_vmap/module/css/vmap.less
+++ b/src/module_vmap/module/css/vmap.less
@@ -236,7 +236,7 @@ html, body {
position: relative;
height: 100%;
}
-app-map > div {
+app-map > div, app-map-compare > div{
width: auto;
height: 100%;
background-color: @background;
@@ -395,6 +395,9 @@ input[readonly] {
width : calc(50% ~"-" @right-sidebar-width/2);
float: left;
}
+#map-container-compare.half{
+ border-left: solid 2px #4a4a41;
+}
/*#map-container.right-module-bar-present{
width : calc(100% ~"-" @right-sidebar-width);
}*/
@@ -836,6 +839,35 @@ app-layertree button:hover {
text-align: center;
background-color: transparent;
}
+
+.ol-target-overlay .ol-target
+{ border: 1px solid transparent;
+ box-shadow: 0 0 1px 1px #fff;
+ display: block;
+ height: 20px;
+ width: 0;
+}
+
+.ol-target-overlay .ol-target:after,
+.ol-target-overlay .ol-target:before
+{ content:"";
+ border: 1px solid #369;
+ box-shadow: 0 0 1px 1px #fff;
+ display: block;
+ width: 20px;
+ height: 0;
+ position:absolute;
+ top:10px;
+ left:-10px;
+}
+.ol-target-overlay .ol-target:after
+{ box-shadow: none;
+ height: 20px;
+ width: 0;
+ top:0px;
+ left:0px;
+}
+
#map-name, #current-projection{
position: initial;
}
diff --git a/src/module_vmap/module/javascript/app/vmap/map/mapcompare.js b/src/module_vmap/module/javascript/app/vmap/map/mapcompare.js
new file mode 100644
index 00000000..7de5fd55
--- /dev/null
+++ b/src/module_vmap/module/javascript/app/vmap/map/mapcompare.js
@@ -0,0 +1,407 @@
+/* global nsVmap, ol, oVmap, goog, angular, vitisApp, bootbox */
+
+/**
+ * @author: Anthony Borghi
+ * @Description: Fichier contenant la classe nsVmap.MapCompare
+ * cette classe permet l'initialisation de la carte
+ */
+
+goog.provide('nsVmap.MapCompare');
+
+goog.require('oVmap');
+
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('MapJSON');
+goog.require('ol.Overlay');
+
+/**
+ * @classdesc
+ * Class {@link nsVmap.MapCompare}: initializes the map to compare
+ *
+ * @constructor
+ * @export
+ */
+nsVmap.MapCompare = function () {
+ oVmap.log("nsVmap.MapCompare");
+
+ var this_ = this;
+
+ /**
+ * Map layers
+ * @type {Array.<ol.layer>}
+ * @private
+ */
+ this.olLayers_ = [];
+
+ /**
+ * Map view
+ * @type {ol.View}
+ * @private
+ */
+ this.olView_ = new ol.View({
+ center: [0, 0],
+ zoom: 2
+ });
+
+ /**
+ * Map
+ * @type {ol.map}
+ * @private
+ */
+ this.oOpenLayersMap_ = new ol.Map({
+ layers: this.olLayers_,
+ view: this.olView_,
+ moveTolerance: 5
+ });
+
+ this.oOpenLayersMap_.getViewport().setAttribute('id', 'map1Compare');
+}
+
+/**
+ * nsVmap.Map.oOpenLayersMap_ getter
+ * @return {ol.map} Used map
+ * @export
+ * @api experimental
+ */
+nsVmap.MapCompare.prototype.getOLMap = function () {
+ return this.oOpenLayersMap_;
+};
+
+/**
+ * nsVmap.Map.olView_ setter
+ * @param {ol.View} view View to use
+ * @export
+ * @api experimental
+ */
+nsVmap.MapCompare.prototype.setOpenLayersView = function (view) {
+ this.olView_ = view;
+ this.oOpenLayersMap_.setView(this.olView_);
+};
+
+/**
+ * App-specific directive wrapping the ngeo map directive. The directive's
+ * controller has a property "map" including a reference to the OpenLayers
+ * map.
+ *
+ * @return {angular.Directive} The directive specs.
+ * @constructor
+ */
+nsVmap.MapCompare.prototype.mapCompareDirective = function () {
+ oVmap.log("nsVmap.MapCompare.prototype.mapCompareDirective");
+ return {
+ restrict: 'E',
+ scope: {
+ 'map': '=appMap'
+ },
+ controller: 'AppMapCompareController',
+ controllerAs: 'ctrl',
+ bindToController: true,
+ template: '<div id="olMapCompare"></div>'
+ };
+};
+
+/**
+ * The application's main controller.
+ * @ngInject
+ * @constructor
+ */
+nsVmap.MapCompare.prototype.mapCompareController = function ($scope, $window, $element, $timeout) {
+ oVmap.log("nsVmap.MapCompare.prototype.mapController");
+ var this_ = this;
+
+ /**
+ * @private
+ */
+ this.$scope_ = $scope;
+
+ /**
+ * @type {object}
+ */
+ this.element = $element;
+
+ /**
+ * Animation duration
+ * @type Number
+ * @private
+ */
+ this.duration = 1000;
+
+ /**
+ * @type {ol.Map}
+ * @private
+ */
+ this.map = this['map'];
+ /**
+ * @type {ol.Overlay}
+ * @private
+ */
+ this.targetOverlay_ = null;
+ /**
+ * @type {string}
+ * @private
+ */
+ this.isOnElement = 'map';
+
+ /**
+ * Objet permettant de lancer des fonctions utiles
+ * pour parser la définition de la carte
+ * @type MapJSON
+ */
+ var oMapJSON = new MapJSON({
+ 'properties': oVmap['properties']
+ });
+
+ var tileSize = [oVmap['properties']['vmap']['wmsTilesWidth'], oVmap['properties']['vmap']['wmsTilesHeight']];
+
+ /**
+ * Contains the tileloaderror and imageloaderror events
+ * @private
+ */
+ this.loadErrorEventsContainer_ = [];
+
+ this.map.setTarget('olMapCompare');
+
+ $scope.$on("mapCompareChanged", function(){
+ // MAJ de la taille du composant
+ this_.map.setSize([document.getElementById('olMapCompare').offsetWidth, document.getElementById('olMapCompare').offsetHeight]);
+ if (this_.map.getLayers().getArray().length > 0)
+ this_.map.getLayers().clear();
+
+ var tree_ = oVmap.getMapManager().getCompareLayersTree();
+ var olView_ = oMapJSON.getViewFromDef(tree_, {
+ 'size': this_.map.getSize(),
+ 'tileSize': tileSize
+ });
+
+ var olLayers_ = oMapJSON.getLayersFromDef(tree_, {
+ '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]);
+ }
+ $timeout(function(){
+ this_.synchronizeMap();
+ }, 10);
+
+ })
+
+ /**
+ * Update the map size with animation
+ * @type goog.async.AnimationDelay
+ */
+ this.animationDelay = new goog.async.AnimationDelay(
+ function () {
+ this_.map.updateSize();
+ this_.map.renderSync();
+ if (goog.now() - start < this_.duration) {
+ this_.animationDelay.start();
+ }
+ }, $window);
+
+ /**
+ * Watch for resizing
+ */
+ $scope.$watchCollection(function () {
+ return [this_.element.children()[0]['clientWidth'], this_.element.children()[0]['clientHeight']];
+ }, function () {
+ this_.startAnimation();
+ });
+};
+
+// Définit les directives et controlleurs
+oVmap.module.directive('appMapCompare', nsVmap.MapCompare.prototype.mapCompareDirective);
+oVmap.module.controller('AppMapCompareController', nsVmap.MapCompare.prototype.mapCompareController);
+
+/**
+ * Update the map size with animation
+ * @returns {undefined}
+ * @export
+ */
+nsVmap.MapCompare.prototype.mapCompareController.prototype.startAnimation = function () {
+ oVmap.log('nsVmap.MapCompare.prototype.mapCompareController.prototype.startAnimation');
+ start = goog.now();
+ this.animationDelay.stop();
+ this.animationDelay.start();
+};
+
+/**
+ * Update the map size with animation
+ * @returns {undefined}
+ * @export
+ */
+nsVmap.MapCompare.prototype.mapCompareController.prototype.synchronizeMap = function () {
+ oVmap.log('nsVmap.MapCompare.prototype.mapCompareController.prototype.synchronizeMap');
+ var this_ = this;
+ // blocage infinite loop
+ oVmap.getMap().getOLMap().getTargetElement().addEventListener('mousedown', function(){this_.isOnElement = 'map';});
+ this_.map.getTargetElement().addEventListener('mousedown', function(){this_.isOnElement = 'mapCompare';});
+ // position du curseur sur l'autre carte
+ oVmap.getMap().getOLMap().on('pointermove', function(e){
+ var coord = e.coordinate;
+ //si le composant existe sur l'autre composant on le supprime
+ if(angular.element(".over-map-compare.ol-target-overlay").length > 0){
+ this_.targetOverlay_.setPosition(undefined);
+ this_.map.removeOverlay(this_.targetOverlay_);
+ this_.targetOverlay_ = undefined;
+ angular.element(".over-map-compare.ol-target-overlay").remove();
+ }
+ // si le composant n'existe pas on le crée
+ if (!this_.targetOverlay_){
+ var element = document.createElement("div");
+ element.classList.add("ol-target");
+ this_.targetOverlay_ = new ol.Overlay({ 'element': element });
+ this_.targetOverlay_.setPositioning('center-center');
+ this_.map.addOverlay(this_.targetOverlay_);
+ element.parentElement.classList.add("ol-target-overlay");
+ element.parentElement.classList.add("over-map");
+ // hack to render targetOverlay before positioning it
+ this_.targetOverlay_.setPosition([0,0]);
+ }
+
+ var oldProjection = oVmap.getMap().getOLMap().getView().getProjection().getCode();
+ var newProjection = this_.map.getView().getProjection().getCode();
+
+ var convertCoord = ol.proj.transform(coord, oldProjection, newProjection)
+
+ this_.targetOverlay_.setPosition(convertCoord);
+ });
+ this_.map.on('pointermove', function(e){
+ var coord = e.coordinate;
+ //si le composant existe sur l'autre composant on le supprime
+ if(angular.element(".over-map.ol-target-overlay").length > 0){
+ this_.targetOverlay_.setPosition(undefined);
+ oVmap.getMap().getOLMap().removeOverlay(this_.targetOverlay_);
+ this_.targetOverlay_ = undefined;
+ angular.element(".over-map-compare.ol-target-overlay").remove();
+ }
+ // si le composant n'existe pas on le crée
+ if (!this_.targetOverlay_){
+ var element = document.createElement("div");
+ element.classList.add("ol-target");
+ this_.targetOverlay_ = new ol.Overlay({ 'element': element });
+ this_.targetOverlay_.setPositioning('center-center');
+ oVmap.getMap().getOLMap().addOverlay(this_.targetOverlay_);
+ element.parentElement.classList.add("ol-target-overlay");
+ element.parentElement.classList.add("over-map-compare");
+ // hack to render targetOverlay before positioning it
+ this_.targetOverlay_.setPosition([0,0]);
+ }
+
+ var oldProjection = this_.map.getView().getProjection().getCode();
+ var newProjection = oVmap.getMap().getOLMap().getView().getProjection().getCode();
+
+ var convertCoord = ol.proj.transform(coord, oldProjection, newProjection)
+
+ this_.targetOverlay_.setPosition(convertCoord);
+ });
+ // synchro de la carte avec la carte de comparaison
+ oVmap.getMap().getOLMap().getView().on("change:center", function(e){
+ if(this_.isOnElement === 'map'){
+ // Récupère l'étendue de la carte principale
+ var oldCenter = oVmap.getMap().getOLMap().getView().getCenter();
+
+ // Récupère l'ancienne et la nouvelle projection
+ var oldProjection = oVmap.getMap().getOLMap().getView().getProjection().getCode();
+ var newProjection = this_.map.getView().getProjection().getCode();
+
+ var newCenter = ol.proj.transform(oldCenter, oldProjection, newProjection);
+
+ this_.map.getView().setCenter(newCenter);
+ }
+ }, this);
+ oVmap.getMap().getOLMap().getView().on("change:resolution", function(e){
+ if (this_.map.getView().getResolution() != oVmap.getMap().getOLMap().getView().getResolution()){
+ this_.map.getView().setResolution(oVmap.getMap().getOLMap().getView().getResolution());
+
+ // Récupère l'étendue de la carte principale
+ var oldCenter = oVmap.getMap().getOLMap().getView().getCenter();
+
+ // Récupère l'ancienne et la nouvelle projection
+ var oldProjection = oVmap.getMap().getOLMap().getView().getProjection().getCode();
+ var newProjection = this_.map.getView().getProjection().getCode();
+
+ var newCenter = ol.proj.transform(oldCenter, oldProjection, newProjection);
+
+ this_.map.getView().setCenter(newCenter);
+ }
+ }, this);
+ // synchro de la carte de comapraison avec la carte de base
+ this_.map.getView().on("change:center", function(e){
+ if(this_.isOnElement === 'mapCompare'){
+ // Récupère l'étendue de la carte principale
+ var oldCenter = this_.map.getView().getCenter();
+
+ // Récupère l'ancienne et la nouvelle projection
+ var newProjection = oVmap.getMap().getOLMap().getView().getProjection().getCode();
+ var oldProjection = this_.map.getView().getProjection().getCode();
+
+ var newCenter = ol.proj.transform(oldCenter, oldProjection, newProjection);
+
+ oVmap.getMap().getOLMap().getView().setCenter(newCenter);
+ }
+ }, this);
+ this_.map.getView().on("change:resolution", function(e){
+ if (this_.map.getView().getResolution() != oVmap.getMap().getOLMap().getView().getResolution()){
+ oVmap.getMap().getOLMap().getView().setResolution(this_.map.getView().getResolution());
+ // Récupère l'étendue de la carte principale
+ var oldCenter = this_.map.getView().getCenter();
+
+ // Récupère l'ancienne et la nouvelle projection
+ var newProjection = oVmap.getMap().getOLMap().getView().getProjection().getCode();
+ var oldProjection = this_.map.getView().getProjection().getCode();
+
+ var newCenter = ol.proj.transform(oldCenter, oldProjection, newProjection);
+
+ oVmap.getMap().getOLMap().getView().setCenter(newCenter);
+ }
+ }, this);
+};
+
+/**
+ * Add a layer on the map
+ * @param {object} olLayer
+ */
+nsVmap.MapCompare.prototype.mapCompareController.prototype.addLayer = function (olLayer) {
+ oVmap.log('nsVmap.MapCompare.prototype.mapCompareController.prototype.addLayer');
+ this['map'].addLayer(olLayer);
+};
+
+/**
+ * Add the olView
+ * @param {object} olView
+ * @returns {undefined}
+ */
+nsVmap.MapCompare.prototype.mapCompareController.prototype.addView = function (olView) {
+ oVmap.log('nsVmap.nsMapManager.LayersTree.prototype.LayertreeController.prototype.addView');
+
+ // Récupère l'étendue de la carte principale
+ var oldExtent = oVmap.getMap().getOLMap().getView().calculateExtent(this['map'].getSize());
+
+ // Récupère l'ancienne et la nouvelle projection
+ var oldProjection = oVmap.getMap().getOLMap().getView().getProjection().getCode();
+ var newProjection = olView.getProjection().getCode();
+
+ // Set le home position pour cette vue
+ olView.set('homePosition', {
+ center: olView.getCenter(),
+ resolution: olView.getResolution()
+ });
+
+ oVmap.getMapCompare().setOpenLayersView(olView);
+ this['map'].setView(olView);
+ this['proj'] = olView.getProjection().getCode();
+
+ // Reprojette en cas de changment de carte
+ if (goog.isDef(oldProjection) && goog.isDef(newProjection) && goog.isDef(oldExtent) /*&& goog.isDef(oldPosition)*/) {
+ // Reprojette l'étendue
+ var newExtent = ol.proj.transformExtent(oldExtent, oldProjection, newProjection);
+ this['map'].getView().fit(newExtent, {
+ nearest: true
+ });
+ }
+};
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 bae5ed9f..3cea89fc 100644
--- a/src/module_vmap/module/javascript/app/vmap/mapmanager/mapmanager.js
+++ b/src/module_vmap/module/javascript/app/vmap/mapmanager/mapmanager.js
@@ -45,6 +45,12 @@ nsVmap.nsMapManager.MapManager = function () {
* @private
*/
this.oLayersTree_ = {};
+ /**
+ * Object which contains the layers tree
+ * @type {object}
+ * @private
+ */
+ this.oCompareLayersTree_ = {};
/**
* Objet which contains the map modal manager tool
@@ -288,7 +294,7 @@ nsVmap.nsMapManager.MapManager.prototype.loadMap = function (element) {
* @export
*/
nsVmap.nsMapManager.MapManager.prototype.loadCompareMap = function (element) {
- oVmap.log('nsVmap.nsMapManager.MapManager.loadMap');
+ oVmap.log('nsVmap.nsMapManager.MapManager.loadCompareMap');
if (oVmap['properties']['is_mobile']) {
oVmap.getToolsManager().getBasicTools().hideMobileMenu();
@@ -311,7 +317,7 @@ nsVmap.nsMapManager.MapManager.prototype.loadCompareMap = function (element) {
oVmap.log("oTree: ", oTree);
// Change la variable oLayersTree
- //this_.setLayersTree(oTree);
+ this_.setCompareLayersTree(oTree);
// Rafraichit la carte
this_.reloadMap();
@@ -1259,6 +1265,43 @@ nsVmap.nsMapManager.MapManager.prototype.getLayersTree = function () {
return this.oLayersTree_;
};
+/**
+ * LayersTree_ getter (also set the visibility of the layers with the new ones)
+ * @return {object} Layers tree
+ * @api experimental
+ * @export
+ */
+nsVmap.nsMapManager.MapManager.prototype.getCompareLayersTree = function () {
+
+ var oMap = oVmap.getMapCompare().getOLMap();
+ var aLayers = oMap.getLayers().getArray();
+
+ /**
+ * Recursive function that update parameters recursively
+ * @param {object} node
+ */
+ var updateOnTree = function (node) {
+ // Recursive
+ if (goog.isDef(node['children'])) {
+ for (var i = 0; i < node['children'].length; i++) {
+ updateOnTree(node['children'][i]);
+ }
+ }
+ // Update
+ if (goog.isDef(node['olLayer'])) {
+ node['visible'] = node['olLayer'].getVisible();
+ node['index'] = aLayers.indexOf(node['olLayer']);
+ node['opacity'] = node['olLayer'].getOpacity();
+ }
+ };
+
+ for (var i = 0; i < this.oCompareLayersTree_['children'].length; i++) {
+ updateOnTree(this.oCompareLayersTree_['children'][i]);
+ }
+
+ return this.oCompareLayersTree_;
+};
+
/**
* Get the JSON layers tree
* @returns {String}
@@ -1334,6 +1377,15 @@ nsVmap.nsMapManager.MapManager.prototype.getJSONLayersTree = function () {
nsVmap.nsMapManager.MapManager.prototype.setLayersTree = function (oTree) {
this.oLayersTree_ = oTree;
};
+/**
+ * LayersTree_ setter
+ * @param {object} oTree Layers tree
+ * @api experimental
+ * @export
+ */
+nsVmap.nsMapManager.MapManager.prototype.setCompareLayersTree = function (oTree) {
+ this.oCompareLayersTree_ = oTree;
+};
/**
* oMapCatalog_ getter
diff --git a/src/module_vmap/module/javascript/app/vmap/requires.js b/src/module_vmap/module/javascript/app/vmap/requires.js
index 2eae1b6a..997cb30e 100755
--- a/src/module_vmap/module/javascript/app/vmap/requires.js
+++ b/src/module_vmap/module/javascript/app/vmap/requires.js
@@ -8,7 +8,8 @@
goog.provide('vmap');
goog.require('oVmap');
goog.require('nsVmap.Map');
+goog.require('nsVmap.MapCompare');
goog.require('nsVmap.Map.MapTooltip');
goog.require('nsVmap.Map.MapPopup');
goog.require('nsVmap.nsMapManager.MapManager');
-goog.require('nsVmap.nsToolsManager.ToolsManager');
\ No newline at end of file
+goog.require('nsVmap.nsToolsManager.ToolsManager');
diff --git a/src/module_vmap/module/javascript/app/vmap/tools/compare.js b/src/module_vmap/module/javascript/app/vmap/tools/compare.js
index 271ac91c..07676683 100644
--- a/src/module_vmap/module/javascript/app/vmap/tools/compare.js
+++ b/src/module_vmap/module/javascript/app/vmap/tools/compare.js
@@ -70,18 +70,10 @@ nsVmap.nsToolsManager.compare.prototype.compareController = function ($scope, $e
*/
this["useCompareMode"] = false;
- // recalcule l'url quand on change de carte
- //oVmap['scope'].$on('mapChanged', function () {
- //this_["urlConstructor"]();
- //});
-
$scope.$watch("ctrl.useCompareMode", function(){
$scope.$root["compare_enabled"] = this_["useCompareMode"];
})
- /*oVmap.getMap().getOLMap().on("moveend", function(event){
- this_["urlConstructor"]();
- });*/
};
// Définit la directive et le controller
diff --git a/src/module_vmap/module/javascript/app/vmap/vmap.js b/src/module_vmap/module/javascript/app/vmap/vmap.js
index e1fb655d..f178a8c8 100644
--- a/src/module_vmap/module/javascript/app/vmap/vmap.js
+++ b/src/module_vmap/module/javascript/app/vmap/vmap.js
@@ -97,6 +97,13 @@ oVmap.properties = {};
*/
oVmap.oMap_ = {};
+
+/**
+ * Objet which contains the mapComapre
+ * @type {nsVmap.MapCompare}
+ * @private
+ */
+oVmap.oMapCompare_ = {};
/**
* Objet which contains the layers tools (on the left band)
* @type {nsVmap.nsMapManager.MapManager}
@@ -196,6 +203,7 @@ oVmap.init = function () {
// Instenciation des objects Vmap
oVmap.oMap_ = new nsVmap.Map();
+ oVmap.oMapCompare_ = new nsVmap.MapCompare();
oVmap.oMapManager_ = new nsVmap.nsMapManager.MapManager();
oVmap.oToolsManager_ = new nsVmap.nsToolsManager.ToolsManager();
@@ -283,6 +291,12 @@ oVmap.vmapController = function ($sanitize) {
* @api stable
*/
this.map = this['map'] = oVmap.getMap().getOLMap();
+ /**
+ * The OpenLayers map
+ * @type {ol.Map}
+ * @api stable
+ */
+ this.mapCompare = this['mapCompare'] = oVmap.getMapCompare().getOLMap();
/**
* The current action on map
@@ -362,6 +376,16 @@ oVmap.getMap = function () {
return this.oMap_;
};
+/**
+ * nsVmap.oMapCompare_ getter
+ * @return {nsVmap.MapCompare} Map to use to compare
+ * @export
+ * @api experimental
+ */
+oVmap.getMapCompare = function () {
+ return this.oMapCompare_;
+};
+
/**
* nsVmap.oMapManager_ getter
* @return {nsVmap.nsMapManager.MapManager} Tools fo layers
@@ -719,6 +743,8 @@ oVmap.resizeLayerTools = function (animate) {
if (goog.isDef(angular.element($('#olMap')).scope()))
angular.element($('#olMap')).scope()['ctrl'].startAnimation();
+ if (goog.isDef(angular.element($('#olMapCompare')).scope()))
+ angular.element($('#olMapCompare')).scope()['ctrl'].startAnimation();
var aItems = ["layertree", "layersorder", "maplegendcontainer"];
var iMarge = 0;
@@ -851,6 +877,7 @@ oVmap.printElem = function (elem) {
*/
oVmap.maxResizeBottomBar = function () {
angular.element($('#olMap')).scope()['ctrl'].startAnimation();
+ angular.element($('#olMapCompare')).scope()['ctrl'].startAnimation();
$(".open-more-selection-info").toggleClass("reverse");
@@ -869,7 +896,8 @@ oVmap.maxResizeBottomBar = function () {
*/
oVmap.minResizeBottomBar = function () {
angular.element($('#olMap')).scope()['ctrl'].startAnimation();
-
+ angular.element($('#olMapCompare')).scope()['ctrl'].startAnimation();
+
if ($("#map-container").hasClass("open2")) {
$("#map-container").removeClass("open2");
$("#bottombar").removeClass("open2");
diff --git a/src/module_vmap/module/template/tools/basictools.html b/src/module_vmap/module/template/tools/basictools.html
index 43ec402c..14eef44b 100644
--- a/src/module_vmap/module/template/tools/basictools.html
+++ b/src/module_vmap/module/template/tools/basictools.html
@@ -31,7 +31,7 @@
<div app-compare-mode app-lang="ctrl.lang" app-map="ctrl.map"
id="basic-tools-dropdown-comapremode"
class="dropdown-menu basic-tools-dropdown-element no-padding"
- style="margin: -10px -1px; width: 30%; padding-top: 15px !important;">
+ style="margin: -10px -1px; width: 30%; padding-top: 15px !important;min-height: 55px;">
</div>
</li>
</div>
diff --git a/src/module_vmap/module/template/tools/comparemapmanager.html b/src/module_vmap/module/template/tools/comparemapmanager.html
index d1ae7317..53c76deb 100644
--- a/src/module_vmap/module/template/tools/comparemapmanager.html
+++ b/src/module_vmap/module/template/tools/comparemapmanager.html
@@ -4,8 +4,8 @@
<input type="checkbox" ng-model="ctrl.useCompareMode" id="useCompareModeCheckbox">
<label for="useCompareModeCheckbox" class="control-label">Activer / Désactiver le mode comparaison</label>
</div>
- <div class="col-md-12"><hr></div>
- <div class="col-md-12 no-padding">
+ <div ng-show="ctrl.useCompareMode" class="col-md-12"><hr></div>
+ <div ng-show="ctrl.useCompareMode" class="col-md-12 no-padding">
<app-maplistlitle app-lang="ctrl.lang" app-maplistlitle-map="ctrl.map" data-compare="true"></app-maplistlitle>
</div>
</div>
diff --git a/src/module_vmap/module/template/vmap.html b/src/module_vmap/module/template/vmap.html
index ec84d8e5..b70694d2 100755
--- a/src/module_vmap/module/template/vmap.html
+++ b/src/module_vmap/module/template/vmap.html
@@ -56,9 +56,9 @@
</div>
<!-- Carte Compare -->
- <div ng-show="compare_enabled" id="map-container-compare" style="background-color:black;"
+ <div ng-show="compare_enabled" id="map-container-compare"
ng-class="{'open' : ctrl.bottom_open,'half' : compare_enabled, 'right-module-bar-present' : bLoadVmapModule, 'left-map-manager-open' : vmapCtrl.left_open, 'right-module-manager-open' : vmapCtrl.right_open}">
- <!--<app-map ng-show="compare_enabled" app-map="vmapCtrl.map" app-action="vmapCtrl.currentAction" ng-class="{'half' : compare_enabled}"></app-map>-->
+ <app-map-compare app-map="vmapCtrl.mapCompare" style="display:block; width:100%; height:100%;"></app-map-compare>
</div>
<!-- Bandeau de selection -->
--
GitLab