- ADD: Added geotiff data opacity slider.

germinateplatform · Jan 20, 2023 · 379feac · 379feac
1 parent e84365c
commit 379feac
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/src/components/map/ShapefileGeotiffMap.vue b/src/components/map/ShapefileGeotiffMap.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div  v-if="hasTreatments || hasReps">
+    <div v-if="hasTreatments || hasReps">
       <b-form-group :label="$t('formLabelGeotiffMapHighlight')" label-for="highlight-group">
         <b-button-group id="highlight-group">
           <b-button @click="highlightReps" v-if="hasReps"><MdiIcon :path="mdiNumeric" /> {{ $t('buttonHighlightReps', { count: reps.length }) }}</b-button>
@@ -17,6 +17,10 @@
       </div>
     </div>
 
+    <b-form-group :label="$t('formLabelGeotiffMapOpacity')" label-for="opacity">
+      <b-form-input type="range" v-model="opacity" :min="0" :max="1" :step="0.1" lazy />
+    </b-form-group>
+
     <div :id="id" class="shapefile-map border" />
 
     <!-- Add color gradient for number coloring -->
@@ -86,6 +90,7 @@ export default {
       mapOptions: {
         maxNativeZoom: 19
       },
+      opacity: 0.8,
       repColors: [],
       treatmentColors: []
     }
@@ -108,6 +113,9 @@ export default {
     },
     selectedGermplasm: function () {
       this.updateColors()
+    },
+    opacity: function () {
+      this.updateColors()
     }
   },
   computed: {
@@ -167,9 +175,6 @@ export default {
   },
   methods: {
     removeHighlight: function () {
-      this.treatmentColors = []
-      this.repColors = []
-
       this.updateColors()
     },
     highlightReps: function () {
@@ -239,6 +244,9 @@ export default {
       }
     },
     updateColors: function () {
+      this.treatmentColors = []
+      this.repColors = []
+
       if (this.traitData && this.traitStats) {
         this.traitData.forEach(td => {
           const id = `${td.trialRow}-${td.trialColumn}`
@@ -249,9 +257,9 @@ export default {
 
             const index = this.selectedGermplasm.findIndex(sg => sg.row === td.trialRow && sg.column === td.trialColumn && sg.germplasm === td.germplasmName)
             if (index !== -1) {
-              layers.forEach(layer => layer.setStyle({ fillColor: rgbColorToHex(fillColor), color: getColor(index), weight: 3 }))
+              layers.forEach(layer => layer.setStyle({ fillColor: rgbColorToHex(fillColor), color: getColor(index), weight: 3, fillOpacity: this.opacity }))
             } else {
-              layers.forEach(layer => layer.setStyle({ fillColor: rgbColorToHex(fillColor), weight: 0 }))
+              layers.forEach(layer => layer.setStyle({ fillColor: rgbColorToHex(fillColor), weight: 0, fillOpacity: this.opacity }))
             }
           }
         })

diff --git a/src/plugins/i18n/en_GB.json b/src/plugins/i18n/en_GB.json
@@ -170,6 +170,7 @@
   "formLabelEmail": "Email",
   "formLabelFullName": "Full name",
   "formLabelGeotiffMapHighlight": "Map highlight",
+  "formLabelGeotiffMapOpacity": "Data color opacity",
   "formLabelGermplasmUnifierSgoneInput": "SGONE output",
   "formLabelGroupDescription": "Group description",
   "formLabelGroupName": "Group name",