Translate zoom control

radiantearth · Dec 22, 2022 · d3b41f6 · d3b41f6
1 parent 11d09ac
commit d3b41f6
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 7 deletions.
diff --git a/src/components/Map.vue b/src/components/Map.vue
@@ -1,12 +1,13 @@
 <template>
   <div class="map-container">
     <l-map class="map" v-if="show" :class="stac.type" @ready="init" :options="mapOptions">
-      <LControlFullscreen :key="fullscreenKey" :options="fullscreenOptions" />
+      <l-control-zoom :key="`z${ix}`" v-bind="zoomControlTexts" position="topleft" />
+      <l-control-fullscreen :key="`fs${ix}`" position="topleft" :options="fullscreenOptions" />
       <template v-if="baseMaps.length > 0">
         <component v-for="baseMap in baseMaps" :key="baseMap.name" :is="baseMap.component" v-bind="baseMap" :layers="baseMap.name" layer-type="base" />
       </template>
-      <LTileLayer v-else url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" :options="osmOptions" />
-      <LGeoJson v-if="geojson" ref="geojson" :geojson="geojson" :options="{onEachFeature: showPopup}" :optionsStyle="{color: secondaryColor, weight: secondaryWeight}" />
+      <l-tile-layer v-else url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" :options="osmOptions" />
+      <l-geo-json v-if="geojson" ref="geojson" :geojson="geojson" :options="{onEachFeature: showPopup}" :optionsStyle="{color: secondaryColor, weight: secondaryWeight}" />
     </l-map>
     <b-popover
       v-if="popover && selectedItem" placement="left" triggers="manual" :show="selectedItem !== null"
@@ -29,7 +30,7 @@
 <script>
 import stacLayer from 'stac-layer';
 import { CRS } from "leaflet";
-import { LMap, LTileLayer, LWMSTileLayer, LGeoJson } from 'vue2-leaflet';
+import { LMap, LControlZoom, LTileLayer, LWMSTileLayer, LGeoJson } from 'vue2-leaflet';
 import LControlFullscreen from 'vue2-leaflet-fullscreen';
 import Utils, { geojsonMediaType } from '../utils';
 import './map/leaflet-areaselect';
@@ -70,6 +71,7 @@ export default {
     BPopover,
     Item: () => import('../components/Item.vue'),
     LControlFullscreen,
+    LControlZoom,
     LGeoJson,
     LMap,
     LTileLayer,
@@ -107,13 +109,16 @@ export default {
       stacLayer: null,
       geojson: null,
       itemPreviewsLayer: null,
-      mapOptions: {},
+      mapOptions: {
+        zoomControl: false
+      },
       osmOptions: {
+        // Don't translate as this is an official reference back, which we copied from OSM and shouldn't be altered!
         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors.'
       },
       dblClickState: null,
       selectedItem: null,
-      fullscreenKey: 1
+      ix: 1
     };
   },
   computed: {
@@ -127,6 +132,14 @@ export default {
         }
       };
     },
+    zoomControlTexts() {
+      return {
+        zoomInText: this.$t('map.zoom.in.label'),
+        zoomInTitle: this.$t('map.zoom.in.description'),
+        zoomOutText: this.$t('map.zoom.out.label'),
+        zoomOutTitle: this.$t('map.zoom.out.description')
+      };
+    },
     baseMaps() {
       let targets = [];
       if (this.stac instanceof STAC) {
@@ -147,6 +160,7 @@ export default {
           return Object.assign({
               component: "LWMSTileLayer",
               crs: CRS.EPSG4326,
+              // Don't translate as this is an official reference back, which we copied from OSM and shouldn't be altered!
               attribution: "USGS Astrogeology",
               format: "image/png"
             }, BASEMAPS[target]);
@@ -157,7 +171,7 @@ export default {
   watch: {
     locale() {
       // This recreates the component so that it picks up the new translations
-      this.fullscreenKey++;
+      this.ix++;
     },
     async stacLayerData() {
       await this.showStacLayer();

diff --git a/src/locales/de/texts.json b/src/locales/de/texts.json
@@ -39,6 +39,18 @@
       "clear": "Klicke um die Sortierung aufzuheben"
     }
   },
+  "map": {
+    "zoom": {
+      "in": {
+        "label": "+",
+        "description": "Vergrößern"
+      },
+      "out": {
+        "label": "-",
+        "description": "Verkleinern"
+      }
+    }
+  },
   "fields": {
 
   }

diff --git a/src/locales/en/texts.json b/src/locales/en/texts.json
@@ -39,6 +39,18 @@
       "clear": "Click to clear sorting"
     }
   },
+  "map": {
+    "zoom": {
+      "in": {
+        "label": "+",
+        "description": "Zoom in"
+      },
+      "out": {
+        "label": "-",
+        "description": "Zoom out"
+      }
+    }
+  },
   "fields": {
 
   }