feat: improve controls visibility when sidebar is open

src/fragments/map-view/MapView.vue

@@ -4,7 +4,13 @@
       :id="constants.mapViewElementId"
       ref="map"
       class="map-view"
-      :class="{'low-resolution': $lowResolution, 'extra-low-resolution': $xlResolution, 'click-to-pick': clickToPickActive, 'hide-controls': !showControls}"
+      :class="{
+        'low-resolution': $lowResolution, 
+        'extra-low-resolution': $xlResolution,
+        'embedded': $store.getters.embed, 
+        'click-to-pick': clickToPickActive, 
+        'hide-controls': !showControls
+        }"
       @click.right="mapRightClick"
       @zoomend="zoomed"
       @baselayerchange="baseLayerChanged"
@@ -139,15 +145,15 @@
       <extra-info-highlight v-if="extraInfo" @closed="extraInfo = null" @beforeOpen="isAltitudeModalOpen = false" :extra-info="extraInfo" :polyline-data="activeRouteData.geometry.coordinates"/>
 
       <l-height-graph v-if="isAltitudeModalOpen" @closed="closeAltitudeInfo" lg8 sm11 :data="localMapViewDataRawData" :options="lHeightGraphOptions"/>
-      <my-location v-if="supportsMyLocationBtn && !isAltitudeModalOpen" class="my-location-btn" :active="myLocationActive" @updateLocation="updateMyLocation"></my-location>
-      <img class="over-brand" v-if="showBrand" src="@/assets/img/heigit-and-hd-uni.png" :alt="$t('global.brand')" :title="$t('global.brand')">
+      <my-location v-if="showMyLocationControl" class="my-location-btn" :active="myLocationActive" @updateLocation="updateMyLocation"></my-location>
+      <img class="over-brand" v-if="showBrand && showControls" src="@/assets/img/heigit-and-hd-uni.png" :alt="$t('global.brand')" :title="$t('global.brand')">
 
       <!-- the container below might be used to to programmatically add controls/components -->
       <div ref="customMapControlsContainer" style="z-index: 501" class="custom-controls" ></div>
     </l-map>
     <v-btn v-if="$store.getters.embed" small :title="$t('mapView.viewOnORS')" class="view-on-ors" target="_blank" :href="nonEmbedUrl" > {{$t('mapView.viewOnORS')}} <v-icon right small >open_in_new</v-icon> </v-btn>
     <map-right-click v-if="!$store.getters.embed" :map-view-data="mapViewData" @closed="clickLatlng = null" @rightClickEvent="handleRightClickEvent"></map-right-click>
-    <map-left-click :current-zoom="zoom" @closed="clickLatlng = null" @directionsToPoint="directionsToPoint"></map-left-click>
+    <map-left-click :style="{display:showControls ? '' : 'none'}" :current-zoom="zoom" @closed="clickLatlng = null" @directionsToPoint="directionsToPoint"></map-left-click>
 
     <div v-if="$store.getters.mapSettings.accessibleModeActive">
       <v-btn fab small @click="moveMapCenter('left')" :title="$t('mapView.moveMapPositionToLeft')" class="move-map-arrow left do-not-trigger-close-bottom-nav" > <v-icon large color="primary" >arrow_back</v-icon> </v-btn>

src/fragments/map-view/map-view-leaflet.css

@@ -2,10 +2,14 @@
   margin-top: 70px;
 }
 
-.map-view.extra-low-resolution >>> .leaflet-top.leaflet-right {
+.map-view.extra-low-resolution:not(.embedded) >>> .leaflet-top.leaflet-right {
   margin-top: 70px;
 }
 
+.map-view.hide-controls >>> .leaflet-top.leaflet-right {
+  display: none;
+}
+
 .map-view.extra-low-resolution.hide-controls >>> .leaflet-control-attribution {
   display: none;
 }

src/fragments/map-view/map-view.js

@@ -192,6 +192,10 @@ export default {
     }
   },
   computed: {
+
+    showMyLocationControl () {
+      return this.supportsMyLocationBtn && !this.isAltitudeModalOpen && this.showControls
+    },
     /**
      * Determines if the my location btn is available
      * @returns {Boolean}