feat: improve map dynamic controls visibility

GIScience · Jul 29, 2021 · 8c2a857 · 8c2a857
1 parent c6c5969
commit 8c2a857
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 21 deletions.
diff --git a/src/fragments/map-view/MapView.vue b/src/fragments/map-view/MapView.vue
@@ -4,7 +4,7 @@
       :id="constants.mapViewElementId"
       ref="map"
       class="map-view"
-      :class="{'low-resolution': $lowResolution, 'extra-low-resolution': $xlResolution, 'click-to-pick': clickToPickActive}"
+      :class="{'low-resolution': $lowResolution, 'extra-low-resolution': $xlResolution, 'click-to-pick': clickToPickActive, 'hide-controls': !showControls}"
       @click.right="mapRightClick"
       @zoomend="zoomed"
       @baselayerchange="baseLayerChanged"
@@ -88,7 +88,7 @@
           :tooltip-icon="routingProfileIcon">
         </ors-l-polyline>
       </template>
-      <l-control-layers v-if="showControls" :position="layersPosition" :collapsed="true"/>
+      <l-control-layers :position="layersPosition" :collapsed="true"/>
       <l-tile-layer
         v-for="tileProvider in tileProviders"
         :key="tileProvider.name"

diff --git a/src/fragments/map-view/map-view-leaflet.css b/src/fragments/map-view/map-view-leaflet.css
@@ -6,6 +6,14 @@
   margin-top: 70px;
 }
 
+.map-view.extra-low-resolution.hide-controls >>> .leaflet-control-attribution {
+  display: none;
+}
+
+.map-view.extra-low-resolution.hide-controls >>> .leaflet-control-zoom {
+  display: none;
+}
+
 .map-view >>> .leaflet-control-attribution.leaflet-control {
   background-color: rgba(256,256,256, 0.6);
 }

diff --git a/src/fragments/map-view/map-view.css b/src/fragments/map-view/map-view.css
@@ -54,7 +54,7 @@
 .accessibility-btn {
   position: absolute !important;
   top: 60px;
-  right: 5px;
+  right: 0px;
   z-index: 502;
   background: white !important;
   color: black;
@@ -67,7 +67,7 @@
 .fit-all-features {
   position: absolute !important;
   top: 110px;
-  right: 5px;
+  right: 0px;
   z-index: 502;
   background: white !important;
   color: black;

diff --git a/src/fragments/map-view/map-view.js b/src/fragments/map-view/map-view.js
@@ -118,6 +118,10 @@ export default {
       type: Boolean,
       default: true
     },
+    showControls: {
+      type: Boolean,
+      default: true
+    },
     fitBounds: {
       type: Boolean,
       default: true
@@ -209,7 +213,7 @@ export default {
      * @returns {Boolean}
      */
     accessibilityToolAvailable () {
-      let available = appConfig.accessibilityToolAvailable
+      let available = appConfig.accessibilityToolAvailable && this.showControls
       return available
     },
     /**
@@ -239,19 +243,7 @@ export default {
       const zoom = this.zoomLevel > 0 ? this.zoomLevel : this.maxZoom
       return zoom
     },
-    /**
-     * Determines if the map controls
-     * must be shown based on the current
-     * view resolution and the shrink value
-     * @returns {Boolean} show
-     */
-    showControls () {
-      let show = true
-      if (this.shrunk && this.$lowResolution) {
-        show = false
-      }
-      return show
-    },
+
     /**
      * Returns the map options
      * based on the embed mode value
@@ -263,7 +255,7 @@ export default {
         zoomControl: this.showControls,
         attributionControl: true,
         measureControl: true,
-        gestureHandling: this.$store.getters.embed,
+        gestureHandling: this.showControls,
         gestureHandlingOptions: {
           text: this.$t('mapView.gestureHandling'),
           duration: 1000
@@ -676,6 +668,9 @@ export default {
         this.centerChanged()
       },
       deep: true
+    },
+    showControls() {
+      this.disableLayerControlMouseOver()
     }
   },
   methods: {
@@ -1971,12 +1966,30 @@ export default {
       this.eventBus.$on('placeFocusChanged', context.placeFocusChanged)
 
       this.eventBus.$on('highlightPolylineSections', context.highlightPolylineSections)
+
+      this.disableLayerControlMouseOver()
 
       this.eventBus.$on('redrawAndFitMap', (data) => {
         if (data.guid && data.guid === context.guid) {
           context.adjustMap()
         }
-      })      
+      })
+    },
+
+    /**
+     * Disable mouseover for layer control
+     */
+    disableLayerControlMouseOver () {
+      setTimeout(() => {
+        let layerControl = document.getElementsByClassName('leaflet-control-layers-toggle')
+        if (layerControl.length > 0) {
+          layerControl[0].addEventListener('mouseover', function (event) {
+            //this will make sure that layer popup menu
+            //not opens when mouseover
+            event.stopPropagation()
+          })
+        }
+      }, 200)
     },
     /**
      * Toggle the accessible mode by

diff --git a/src/pages/maps/Maps.vue b/src/pages/maps/Maps.vue
@@ -18,7 +18,8 @@
       :height="mapHeight"
       :fit-bounds="fitMapBounds"
       :custom-tile-provider-url="$store.getters.mapSettings.customTileProviderUrl"
-      :shrunk="$store.getters.leftSideBarPinned"
+      :shrunk="$store.getters.leftSideBarOpen"
+      :show-controls="showMapControls"
       :mode="$store.getters.mode"
       :supports-drawing-tool="supportsDrawingTool"
       :routing-profile-icon="currentProfileIcon"

diff --git a/src/pages/maps/maps.js b/src/pages/maps/maps.js
@@ -52,6 +52,19 @@ export default {
       let show = ((!this.$store.getters.isSidebarVisible || this.$highResolution) || (this.$highResolution && this.$store.getters.leftSideBarPinned)) && !this.showBottomNav
       return show
     },
+    /**
+     * Determines if the map controls
+     * must be shown based on the current
+     * view resolution and the shrink value
+     * @returns {Boolean} show
+     */
+    showMapControls () {
+      let show = true
+      if ((this.$store.getters.isSidebarVisible && this.$lowResolution) || this.$store.getters.embed) {
+        show = false
+      }
+      return show
+    },
 
     /**
      * Returns a reference to the custom map controls container