Merge pull request #87 from USGS-VIZLAB/fix_mobile_map

Fix mobile map
DOI-USGS · Jan 28, 2023 · 97f82b6 · 97f82b6
2 parents 06db2eb + 58b4164
commit 97f82b6
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 18 deletions.
diff --git a/src/assets/gw-conditions-labels-map.svg b/src/assets/gw-conditions-labels-map.svg
diff --git a/src/components/GWL.vue b/src/components/GWL.vue
@@ -14,26 +14,13 @@
       <!--   <caption id="caption-gwl">Daily groundwater levels</caption> -->
       </div>
       <div id="map-container">
-        <svg 
-          id="map_svg" 
-          xmlns="http://www.w3.org/2000/svg" 
-          xmlns:xlink="http://www.w3.org/1999/xlink" 
-          viewBox="0 0 1000 700"
-          preserveAspectRatio="xMidYMid meet" 
-          version="1.1" 
-          role="img"
-          class="map"
-        >
           <GWLmap
             id="map_gwl"
             class="map"
           />
-          <g transform="translate(-10, 20)">
-            <mapLabels 
-              class="map"
-            />
-          </g>
-        </svg>
+          <mapLabels 
+            class="map labels"
+          />
       </div>
       <div id="legend-container">
         <Legend />
@@ -720,7 +707,7 @@ section {
       }
 
 }
-#map-container{
+#map-container {
   grid-area: map;
   padding: 0rem;
   padding-bottom: 0px;
@@ -730,8 +717,15 @@ section {
   align-items: center;
   svg.map {
     max-height: 68vh;
+    max-width: 98vw;
+    width: 100%;
+    height: 100%;
+  }
+  svg.map.labels {
+    position: absolute;
   }
 }
+
 #line-container {
   grid-area: line;
   width: 100%;