2 files changed, 33 insertions, 10 deletions

diff --git a/modern/src/map/CurrentLocationMap.js b/modern/src/map/CurrentLocationMap.js
index 69724ce..c875662 100644
--- a/modern/src/map/CurrentLocationMap.js
+++ b/modern/src/map/CurrentLocationMap.js
@@ -1,9 +1,14 @@
 import maplibregl from 'maplibre-gl';
 import { useEffect } from 'react';
+import { useLocalization } from '../common/localization';
 import { map } from './Map';
 
 const CurrentLocationMap = () => {
+  const {direction} = useLocalization();
+
   useEffect(() => {
+    const controlsPosition = direction ==='rtl' ? 'top-left' : 'top-right';
+
     const control = new maplibregl.GeolocateControl({
       positionOptions: {
         enableHighAccuracy: true,
@@ -11,9 +16,9 @@ const CurrentLocationMap = () => {
       },
       trackUserLocation: true,
     });
-    map.addControl(control);
+    map.addControl(control,controlsPosition);
     return () => map.removeControl(control);
-  }, []);
+  }, [direction]);
 
   return null;
 };
diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js
index 7dd1c2a..16470ad 100644
--- a/modern/src/map/Map.js
+++ b/modern/src/map/Map.js
@@ -8,7 +8,7 @@ import { SwitcherControl } from './switcher/switcher';
 import deviceCategories from '../common/deviceCategories';
 import { prepareIcon, loadImage } from './mapUtil';
 import { styleCarto, styleMapbox, styleOsm } from './mapStyles';
-import t from '../common/localization';
+import t, { useLocalization } from '../common/localization';
 import { useAttributePreference } from '../common/preferences';
 import palette from '../theme/palette';
 
@@ -60,11 +60,7 @@ const initMap = async () => {
 
 map.on('load', initMap);
 
-map.addControl(new maplibregl.NavigationControl({
-  showCompass: false,
-}));
-
-map.addControl(new SwitcherControl(
+const switchingControl = new SwitcherControl(
   [
     { title: t('mapOsm'), uri: styleOsm() },
     { title: t('mapCarto'), uri: styleCarto() },
@@ -84,15 +80,37 @@ map.addControl(new SwitcherControl(
     };
     waiting();
   },
-));
+);
+
+const navigationControl = new maplibregl.NavigationControl({
+  showCompass: false,
+})
+
+const addPrimaryControls = position => {
+  map.addControl(navigationControl, position);
+  map.addControl(switchingControl, position);
+}
+
+const removePrimaryControls =()=> {
+  map.removeControl(navigationControl);
+  map.removeControl(switchingControl);
+}
+
+
 
 const Map = ({ children }) => {
   const containerEl = useRef(null);
-
+  const {direction} = useLocalization();
   const [mapReady, setMapReady] = useState(false);
 
   const mapboxAccessToken = useAttributePreference('mapboxAccessToken');
 
+  useEffect(()=>{
+    const controlsPosition = direction ==='rtl' ? 'top-left' : 'top-right';
+    addPrimaryControls(controlsPosition);
+    return removePrimaryControls;
+  },[direction])
+
   useEffect(() => {
     maplibregl.accessToken = mapboxAccessToken;
   }, [mapboxAccessToken]);