Merge pull request #251 from fieldsoftheworld/review

Changes proposed in the review meeting

Author: m-mohr

src/components/GlobalDataPanel.vue

@@ -6,6 +6,7 @@ import type { PlaceResult } from '../composables/useAreaOfInterest'
 import useNotifier from '../composables/useNotifier'
 import { transformExtent } from 'ol/proj'
 import GeocodingSearch from './GeocodingSearch.vue'
+import MapLegend from './MapLegend.vue'
 
 const { settings } = useSettings()
 const { map } = useMap()
@@ -31,7 +32,7 @@ const handleLocationSelected = (place: PlaceResult) => {
       for 2024-2025. They were computed using the model <strong>FTW v3: CC-BY, B7</strong>.
     </v-alert>
 
-    <v-row class="d-flex justify-center w-100 mx-auto">
+    <v-row class="d-flex justify-center w-100 mx-auto mb-0">
       <v-col>
         <h3 class="group">Location</h3>
         <GeocodingSearch @location-selected="handleLocationSelected" />
@@ -40,12 +41,6 @@ const handleLocationSelected = (place: PlaceResult) => {
           <v-radio label="2024" :value="2024"></v-radio>
           <v-radio label="2025" :value="2025"></v-radio>
         </v-radio-group>
-        <h3 class="group">Overviews</h3>
-        <v-radio-group v-model="settings.aggregate" density="compact" hide-details inline>
-          <v-radio label="Field Area" value="area"></v-radio>
-          <v-radio label="Confidence" value="confidence"></v-radio>
-        </v-radio-group>
-
         <h3 class="group">Confidence Threshold: {{ (settings.threshold * 100).toFixed(0) }}%</h3>
         <v-slider
           v-model.number="settings.threshold"
@@ -57,17 +52,24 @@ const handleLocationSelected = (place: PlaceResult) => {
           thumb-color="teal"
           hide-details
         />
+        <h3 class="group legend">Legend</h3>
+        <MapLegend />
       </v-col>
     </v-row>
   </div>
 </template>
 
 <style scoped>
 .group {
-  margin: 0.5rem -0.5rem;
+  margin: 1rem -0.5rem 0.5rem;
   font-weight: 500;
   font-size: 1.1rem;
 }
+.group.legend {
+  margin-top: 1rem;
+  border-top: 1px solid rgba(136, 136, 136, 0.65);
+  padding-top: 1rem;
+}
 :deep(.v-selection-control-group--inline) {
   gap: 1rem;
 }

src/components/MapComponent.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { Map, View } from 'ol'
+import { ScaleLine } from 'ol/control'
 import DataCabinet from './DataCabinet.vue'
 import GlobalFeedbackWidget from './GlobalFeedbackWidget.vue'
-import MapLegend from './MapLegend.vue'
 import ProcessingResults from './ProcessingResults.vue'
 import PropertiesDisplay from './PropertiesDisplay.vue'
 import createLabelLayer from '../layers/Label-Layer'
@@ -89,6 +89,8 @@ onMounted(async () => {
     updateLayers()
 
     addMapClickHandler(map.value as Map, areaValues.value)
+    // Add scale bar
+    map.value.addControl(new ScaleLine())
     // Setup permalink functionality
     setupPermalink(map)
   }
@@ -114,8 +116,6 @@ defineExpose({
     />
 
     <GlobalFeedbackWidget v-if="map && settings.mode === 'global'" />
-
-    <MapLegend />
   </div>
 
   <!-- Properties Box -->
@@ -227,6 +227,17 @@ defineExpose({
   overflow-y: auto;
 }
 
+:deep(.ol-zoom),
+:deep(.ol-attribution),
+:deep(.ol-scale-line) {
+  --ol-background-color: black;
+  --ol-accent-background-color: #333333;
+  --ol-subtle-background-color: rgba(128, 128, 128, 0.25);
+  --ol-partial-background-color: rgba(0, 0, 0, 0.75);
+  --ol-foreground-color: #eeeeee;
+  --ol-subtle-foreground-color: #aaaaaa;
+}
+
 :deep(.ol-zoom) {
   top: unset;
   right: unset;
@@ -235,41 +246,31 @@ defineExpose({
   z-index: 10000;
 }
 
-:deep(.ol-attribution) {
+:deep(.ol-scale-line) {
   top: unset;
   right: unset;
   bottom: 1rem;
-  left: calc(2rem + 10px);
+  left: 3rem;
+  z-index: 2000;
+}
+
+:deep(.ol-attribution) {
+  top: unset;
+  right: unset;
+  bottom: calc(4rem);
+  left: 1rem;
   z-index: 10000;
   flex-direction: row;
-  max-width: 90vw;
+  max-width: 30vw;
   align-items: end;
+  text-align: left;
 }
 
 :deep(.ol-attribution button) {
   order: -1;
 }
 
-:deep(.ol-zoom button),
-:deep(.ol-attribution button) {
-  background-color: rgba(0, 0, 0, 0.8);
-  color: #fff;
-}
-
-:deep(.ol-zoom button:hover),
-:deep(.ol-attribution button:hover) {
-  background-color: rgba(0, 0, 0, 1);
-  color: #fff;
-}
-
 :deep(.ol-attribution ul) {
-  color: #000;
   font-size: 0.875rem;
-  text-shadow: none;
-}
-
-:deep(.ol-attribution ul li a) {
-  color: #000;
-  text-decoration: underline;
 }
 </style>