feat: added toggle to show/hide heatmap of straw fields

EPFL-ENAC · Feb 13, 2025 · 8d91020 · 8d91020
1 parent bf4ecb2
commit 8d91020
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/frontend/src/components/MapView.vue b/frontend/src/components/MapView.vue
@@ -1,5 +1,10 @@
 <template>
-  <div id="map-results" :style="`--t-width: ${width}; --t-height: ${height}`" class="mapview" />
+  <div>
+    <div id="map-results" :style="`--t-width: ${width}; --t-height: ${height}`" class="mapview" />
+    <div>
+      <q-toggle v-model="showStraw" :label="t('straw_map')" @update:model-value="onStrawMap" />
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -50,6 +55,7 @@ const emit = defineEmits(['map:loaded', 'map:click', 'map:box']);
 
 let map = shallowRef<Map>();
 const mapLoaded = ref(false);
+const showStraw = ref(false);
 
 // track which were the layers added, to be able to remove them
 const layerIds: string[] = [];
@@ -273,6 +279,10 @@ function displayFeatures() {
 function onDocument(feature: Feature) {
   router.push({ name: 'doc', params: { id: `${feature.properties.entity_type}:${feature.properties.id}` } });
 }
+
+function onStrawMap() {
+  map.value?.setLayoutProperty('straw', 'visibility', showStraw.value ? 'visible' : 'none');
+}
 </script>
 
 <style scoped>

diff --git a/frontend/src/i18n/en/index.ts b/frontend/src/i18n/en/index.ts
@@ -61,6 +61,7 @@ export default {
   shrinkage_hint: 'mm/m',
   sound_reduction_index: 'Sound Reduction Index',
   sound_reduction_index_hint: 'Rw, dB',
+  straw_map: 'Straw fields map',
   structural: 'Structural',
   tensile_strength: 'Tensile Strength',
   tensile_strength_hint: 'σc, Mpa',

diff --git a/frontend/src/utils/maps.ts b/frontend/src/utils/maps.ts
@@ -13,7 +13,7 @@ export const style: StyleSpecification = {
       minzoom: 0,
       maxzoom: 20,
     },
-    heatmap: {
+    straw: {
       type: 'raster',
       tiles: [
         `${baseUrl}/cog/tiles/WorldMercatorWGS84Quad/{z}/{x}/{y}.webp?rescale=-210,2910&colormap_name=oranges&url=${cdnUrl}/arema/maps/2025-02-12T17:08/raster/HeatmapR1000mPixHB10000_4326_cog.tif`,
@@ -33,11 +33,14 @@ export const style: StyleSpecification = {
       },
     },
     {
-      id: 'heatmap',
+      id: 'straw',
       type: 'raster',
-      source: 'heatmap',
+      source: 'straw',
       paint: {
-        'raster-opacity': 0.3,
+        'raster-opacity': 0.5,
+      },
+      layout: {
+        visibility: 'none',
       },
     },
   ],