Prevent HTTP request loop when using panoramic map control (#597)

* Comment * Clen code and fix ol.Observable OL object * Clean code * Clean code * Clean code * Clean code * Clean code * Fix overview map layers. In case of zoomhistory control, add left class to overview ol control to move it on left * remove lodash: `_.isNil` * reduce nested conditions * wrong context * If overview control is set, check map-control-lef-bottom and change style --------- Co-authored-by: Raruto <Raruto@users.noreply.github.com> (cherry picked from commit 8a415c0)
g3w-suite · Mar 18, 2024 · 0ddc559 · 0ddc559
1 parent e77af49
commit 0ddc559
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 64 deletions.
diff --git a/src/app/gui/map/mapservice.js b/src/app/gui/map/mapservice.js
@@ -708,7 +708,9 @@ proto.getProject = function() {
 proto.getMap = function() {
   try {
     return this.viewer.map;
-  } catch(err) {}
+  } catch(e) {
+    console.warn(e);
+  }
 };
 
 proto.getMapCanvas = function(map) {
@@ -1049,39 +1051,43 @@ proto._setupControls = function() {
           break;
 
         case 'overview':
-          if (!isMobile.any) {
-            if (!this.config.overviewproject) return;
-            const overviewProjectGid = this.config.overviewproject.gid;
-            if (overviewProjectGid) {
-              ProjectsRegistry.getProject(overviewProjectGid)
+          if (!isMobile.any && this.config.overviewproject && this.config.overviewproject.gid) {
+            ProjectsRegistry
+              .getProject(this.config.overviewproject.gid)
               .then(project => {
-                const overViewMapLayers = this.getOverviewMapLayers(project);
-                const viewOptions = this._calculateViewOptions({
-                  width: 200, // at moment hardcoded
-                  height: 150,
-                  project
-                });
-                const view = new ol.View(viewOptions);
-                const mainView = this.getMap().getView();
+                //create a view for overview map
+                const map = this.getMap();
+                const view = new ol.View(this._calculateViewOptions({ project, width: 200, height: 150 })); // at moment hardcoded
                 view.on('change:center', function() {
-                  const currentCenter = this.getCenter();
-                  const center = mainView.constrainCenter(currentCenter);
-                  center[0] !== currentCenter[0] || center[1] !== currentCenter[1] && view.setCenter(center);
+                  const current = view.getCenter();
+                  const center  = map.getView().constrainCenter(current);
+                  if (center[0] !== current[0] || center[1] !== current[1]) {
+                    view.setCenter(center);
+                  }
                 });
                 control = this.createMapControl(controlType, {
                   add: false,
-                  options: {
-                    position: 'bl',
-                    className: 'ol-overviewmap ol-custom-overviewmap',
-                    collapseLabel: $(`<span class="${GUI.getFontClass('arrow-left')}"></span>`)[0],
-                    label: $(`<span class="${GUI.getFontClass('arrow-right')}"></span>`)[0],
-                    collapsed: false,
-                    layers: overViewMapLayers,
-                    view
-                  }
+                    options: {
+                      view,
+                      position:      'bl',
+                      collapsed:     false,
+                      className:     'ol-overviewmap ol-custom-overviewmap',
+                      collapseLabel: $(`<span class="${GUI.getFontClass('arrow-left')}"></span>`)[0],
+                      label:         $(`<span class="${GUI.getFontClass('arrow-right')}"></span>`)[0],
+                      layers:        this.getOverviewMapLayers(project),
+                    }
                 });
-              });
-            }
+                /** @since 3.10.0 Move another bottom left map controls bottom to a left of overview control**/
+                document.querySelector('.g3w-map-controls-left-bottom').style.left = '230px';
+                const observer = new MutationObserver((mutations) => {
+                  mutations.forEach((mutation) => {
+                    if ("class" === mutation.attributeName) {
+                      document.querySelector('.g3w-map-controls-left-bottom').style.left = mutation.target.classList.contains('ol-collapsed') ? '50px' : '230px';
+                    }
+                  });
+                });
+                observer.observe(document.querySelector('.ol-custom-overviewmap'), {attributes: true});
+              })
           }
           break;
 
@@ -2000,21 +2006,21 @@ proto.createMapLayer = function(layer) {
 
 proto.getOverviewMapLayers = function(project) {
   const WMSLayer = require('core/layers/map/wmslayer');
-  let layers = [];
+  const layers = [];
 
   Object
     .entries(
       _.groupBy(
         project.getLayersStore().getLayers({ GEOLAYER: true, BASELAYER: false }),
         layer => layer.getMultiLayerId()
       )
-    ).forEach(([id, layers]) => {
+    ).forEach(([id, _layers]) => {
       const mapLayer = new WMSLayer({
         url:   project.getWmsUrl(),
         id:    'overview_layer_' + id,
-        tiled: layers[0].state.tiled,
+        tiled: _layers[0].state.tiled,
       });
-      layers.reverse().forEach(layer => mapLayer.addLayer(layer));
+      _layers.reverse().forEach(layer => mapLayer.addLayer(layer));
       layers.push(mapLayer.getOLLayer(true));
     });
   return layers.reverse();
@@ -2026,8 +2032,10 @@ proto.getOverviewMapLayers = function(project) {
  * @param options
  */
 proto.updateMapLayer = function(mapLayer, options={force:false}, {showSpinner=true} = {}) {
-  // if force add g3w_time parameter to force request of map layer from server
-  if (options.force) options.g3w_time = Date.now();
+  // if force adds g3w_time parameter to force request of map layer from server
+  if (options.force) {
+    options.g3w_time = Date.now();
+  }
   if (showSpinner !== mapLayer.showSpinnerWhenLoading) {
     mapLayer.showSpinnerWhenLoading = showSpinner;
     this[showSpinner ? 'registerMapLayerLoadingEvents' : 'unregisterMapLayerLoadingEvents'](mapLayer);
@@ -2056,7 +2064,7 @@ proto.registerMapLayerListeners = function(mapLayer, projectLayer=true) {
   ///
 };
 
-/** Methos to register and unregister map loadmap
+/** Methods to register and unregister load map
  *
  * */
 proto.registerMapLayerLoadingEvents = function(mapLayer) {
@@ -3009,17 +3017,17 @@ function OLControl(type) {
     };
 
     this.layout = function(map) {
-      // skip when ..
+      //No map is passed
       if (!map) {
         return;
       }
       const previusControls = $(map.getViewport()).find(`.ol-control-${this.positionCode}`);
       if (previusControls.length) {
-        const position        =  this.getPosition();
+        const position     =  this.getPosition();
         let previusControl = previusControls.last();
-        const offset = position.left ? previusControl.position().left : previusControl.position().right;
-        const hWhere = position.left ? 'left' : 'right';
-        const hOffset = $(this.element).position()[hWhere] + offset + previusControl[0].offsetWidth + 2;
+        const offset       = position.left ? previusControl.position().left : previusControl.position().right;
+        const hWhere       = position.left ? 'left' : 'right';
+        const hOffset      = $(this.element).position()[hWhere] + offset + previusControl[0].offsetWidth + 2;
         $(this.element).css(hWhere, hOffset+'px');
       }
     };
@@ -3039,7 +3047,8 @@ function OLControl(type) {
       element: this._control.element
     });
 
-  };
+  }
+
   ol.inherits(_ctor, ol.control.Control);
   return _ctor;
 }

diff --git a/src/assets/style/less/g3w-mapcontrols.less b/src/assets/style/less/g3w-mapcontrols.less
@@ -365,4 +365,3 @@
 }
 
 
-
diff --git a/src/components/MapControlZoomHistory.vue b/src/components/MapControlZoomHistory.vue
@@ -4,39 +4,37 @@
 -->
 
 <template>
-  <div
-    style="display:flex;gap: 5px; "
-    class="ol-zoom-history ol-unselectable ol-control">
+  <div class="ol-zoom-history ol-unselectable ol-control">
 
     <!-- STEP BACK -->
-    <div v-t-tooltip:top.create="'sdk.mapcontrols.zoomhistory.zoom_last'">
+    <div v-t-tooltip:top.create = "'sdk.mapcontrols.zoomhistory.zoom_last'">
       <button
-        @click.stop.prevent="last"
-        type="button"
-        v-disabled="history.index === 0">
+        @click.stop.prevent = "last"
+        type                = "button"
+        v-disabled          = "history.index === 0"
+      >
         <i :class="g3wtemplate.getFontClass('reply')"></i>
       </button>
     </div>
 
-
     <!-- STEP FORWARD -->
-    <div v-t-tooltip:top.create="'sdk.mapcontrols.zoomhistory.zoom_next'">
+    <div v-t-tooltip:top.create = "'sdk.mapcontrols.zoomhistory.zoom_next'">
       <button
-        @click.stop.prevent="next"
-        type="button"
-        v-disabled="hasEmptyHistory">
-
+        @click.stop.prevent = "next"
+        type                = "button"
+        v-disabled          = "hasEmptyHistory"
+      >
         <i :class="g3wtemplate.getFontClass('share')"></i>
       </button>
     </div>
 
-
   </div>
 </template>
 
 
 <script>
   import GUI from 'services/gui';
+
   const { debounce } = require('utils');
 
   export default {
@@ -50,15 +48,15 @@
       }
     },
     methods: {
-      last(){
+      last() {
         this.history.index--;
         this.setMapExtent();
       },
-      next(){
+      next() {
         this.history.index++;
         this.setMapExtent();
       },
-      setMapExtent(){
+      setMapExtent() {
         GUI.getService('map').getMap().getView().fit(this.history.items[this.history.index])
       }
     },
@@ -87,12 +85,15 @@
     },
 
     beforeDestroy() {
-      ol.Object.unByKey(this.changeKeyEvent);
+      ol.Observable.unByKey(this.changeKeyEvent);
     }
 
   }
 </script>
 
 <style scoped>
-
+  .ol-zoom-history {
+    display: flex !important;
+    gap: 5px;
+  }
 </style>
diff --git a/src/components/MapFooter.vue b/src/components/MapFooter.vue
@@ -11,7 +11,7 @@
 
 <script>
   import MapFooterRight from 'components/MapFooterRight.vue';
-  import MapFooterLeft from 'components/MapFooterLeft.vue';
+  import MapFooterLeft  from 'components/MapFooterLeft.vue';
 
   export default {
     name: 'Mapfooter',

diff --git a/src/store/projects.js b/src/store/projects.js
@@ -23,6 +23,7 @@ function ProjectsRegistry() {
   this.initialized         = false;
   this.projectType         = null;
   this.currentProjectGroup = null;
+  //store overview (Panoramic map) project
   this.overviewproject     = undefined;
 
   this.setters = {
@@ -167,8 +168,12 @@ function ProjectsRegistry() {
     return _
       .sortBy(this.getProjects()
       .filter(project => {
-        if (!_.isNil(project.listable)) return project.listable;
-        if (project.id === currentProjectId || (project.overviewprojectgid && project.gid === project.overviewprojectgid)) return false;
+        if (null !== project.listable  && undefined !== project.listable) {
+          return project.listable;
+        }
+        if (project.id === currentProjectId || (project.overviewprojectgid && project.gid === project.overviewprojectgid)) {
+          return false;
+        }
         return project;
       }), 'title');
   };