Translate the leaflet control texts

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Map.vue

@@ -7,12 +7,18 @@
       :center="[lat, lon]"
       @click="clickMap"
       @update:zoom="updateZoom"
+      :options="{ zoomControl: false }"
     >
       <l-tile-layer
         :url="config.maps.tiles.endpoint"
         :attribution="attribution"
       >
       </l-tile-layer>
+      <l-control-zoom
+        position="topleft"
+        :zoomInTitle="$t('Zoom in')"
+        :zoomOutTitle="$t('Zoom out')"
+      ></l-control-zoom>
       <v-locatecontrol :options="{ icon: 'mdi mdi-map-marker' }" />
       <l-marker
         :lat-lng="[lat, lon]"
@@ -34,7 +40,14 @@
 import { Icon, LatLng, LeafletMouseEvent, LeafletEvent } from "leaflet";
 import "leaflet/dist/leaflet.css";
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { LMap, LTileLayer, LMarker, LPopup, LIcon } from "vue2-leaflet";
+import {
+  LMap,
+  LTileLayer,
+  LMarker,
+  LPopup,
+  LIcon,
+  LControlZoom,
+} from "vue2-leaflet";
 import Vue2LeafletLocateControl from "@/components/Map/Vue2LeafletLocateControl.vue";
 import { CONFIG } from "../graphql/config";
 import { IConfig } from "../types/config.model";
@@ -46,6 +59,7 @@ import { IConfig } from "../types/config.model";
     LMarker,
     LPopup,
     LIcon,
+    LControlZoom,
     "v-locatecontrol": Vue2LeafletLocateControl,
   },
   apollo: {

js/src/components/Map/Vue2LeafletLocateControl.vue

@@ -10,9 +10,9 @@
  * to try to trigger location manually (not done ATM)
  */
 
-import L, { DomEvent } from "leaflet";
+import { DomEvent } from "leaflet";
 import { findRealParent, propsBinder } from "vue2-leaflet";
-import "leaflet.locatecontrol";
+import Locatecontrol from "leaflet.locatecontrol";
 import { Component, Prop, Vue } from "vue-property-decorator";
 
 @Component({
@@ -37,12 +37,20 @@ export default class Vue2LeafletLocateControl extends Vue {
   parentContainer: any;
 
   mounted(): void {
-    this.mapObject = L.control.locate(this.options);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    this.mapObject = new Locatecontrol({
+      ...this.options,
+      strings: { title: this.$t("Show me where I am") as string },
+    });
     DomEvent.on(this.mapObject, this.$listeners as any);
     propsBinder(this, this.mapObject, this.$props);
     this.ready = true;
     this.parentContainer = findRealParent(this.$parent);
     this.mapObject.addTo(this.parentContainer.mapObject, !this.visible);
+    this.$nextTick(() => {
+      this.$emit("ready", this.mapObject);
+    });
   }
 
   public locate(): void {

js/src/i18n/en_US.json

@@ -1125,5 +1125,8 @@
   "Booking": "Booking",
   "Filter by profile or group name": "Filter by profile or group name",
   "Filter by name": "Filter by name",
-  "Redirecting in progress…": "Redirecting in progress…"
+  "Redirecting in progress…": "Redirecting in progress…",
+  "Zoom in": "Zoom in",
+  "Zoom out": "Zoom out",
+  "Show me where I am": "Show me where I am"
 }

js/src/i18n/fr_FR.json

@@ -1216,5 +1216,8 @@
   "Booking": "Réservations",
   "Filter by profile or group name": "Filter par nom du profil ou du groupe",
   "Filter by name": "Filtrer par nom",
-  "Redirecting in progress…": "Redirection en cours…"
+  "Redirecting in progress…": "Redirection en cours…",
+  "Zoom in": "Zoomer",
+  "Zoom out": "Dézoomer",
+  "Show me where I am": "Afficher ma position"
 }