From 75d30ee5e7e228c892bd7e2305340d4e3cb759f0 Mon Sep 17 00:00:00 2001
From: Yen Truong <36055303+yen-tt@users.noreply.github.com>
Date: Mon, 16 Aug 2021 16:37:34 -0400
Subject: [PATCH] Fix missing map pins on rtl site (#917)

- use ltr instead of rtl attribute in the map div since switching to rtl would disrupt the coordinate to css mapping calculated by the map providers
- adjust map boundaries based on location of the result content wrapper, which could be left or right of the viewpoint (ltr or rtl)

J=SLAP-1515
TEST=manual

- launched multilang site, see that pins on map on arabic is present and the pin locations matched with the ones on english page.
---
 static/js/theme-map/Maps/Providers/Google.js    |  2 +-
 static/js/theme-map/Maps/Providers/Mapbox.js    |  2 +-
 static/js/theme-map/ThemeMapConfig.js           | 14 +++++++++-----
 templates/vertical-full-page-map/markup/map.hbs |  2 +-
 templates/vertical-map/markup/map.hbs           |  2 +-
 5 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/static/js/theme-map/Maps/Providers/Google.js b/static/js/theme-map/Maps/Providers/Google.js
index 7d0b78645..fa2b2432f 100644
--- a/static/js/theme-map/Maps/Providers/Google.js
+++ b/static/js/theme-map/Maps/Providers/Google.js
@@ -28,7 +28,7 @@ class GoogleMap extends ProviderMap {
   constructor(options) {
     super(options);
 
-    const zoomControlPosition = isRTL(options.language) 
+    const zoomControlPosition = isRTL(options.locale) 
       ? google.maps.ControlPosition.LEFT_TOP 
       : google.maps.ControlPosition.RIGHT_TOP;
 
diff --git a/static/js/theme-map/Maps/Providers/Mapbox.js b/static/js/theme-map/Maps/Providers/Mapbox.js
index f428a5a2b..2ce6f69a9 100644
--- a/static/js/theme-map/Maps/Providers/Mapbox.js
+++ b/static/js/theme-map/Maps/Providers/Mapbox.js
@@ -35,7 +35,7 @@ class MapboxMap extends ProviderMap {
     // Add the zoom control
     if (options.controlEnabled) {
       const zoomControl = new mapboxgl.NavigationControl({showCompass: false})
-      isRTL(options.language)
+      isRTL(options.locale)
         ? this.map.addControl(zoomControl, 'top-left') 
         : this.map.addControl(zoomControl);
     }
diff --git a/static/js/theme-map/ThemeMapConfig.js b/static/js/theme-map/ThemeMapConfig.js
index fe36953bd..684348265 100644
--- a/static/js/theme-map/ThemeMapConfig.js
+++ b/static/js/theme-map/ThemeMapConfig.js
@@ -3,6 +3,7 @@ import { PinImages } from './PinImages.js';
 import { ClusterPinImages } from './ClusterPinImages.js';
 import { getLanguageForProvider } from './Util/helpers.js';
 import { defaultCenterCoordinate } from './constants.js';
+import isRTL from '../../common/rtl';
 
 /**
  * The configuration for the ThemeMap component.
@@ -100,8 +101,8 @@ export default class ThemeMapConfig {
     this.padding = {
       top: () => window.innerWidth <= this.mobileBreakpointMax ? 150 : 50,
       bottom: () => 50,
-      right: () => 50,
-      left: () => this.getLeftVisibleBoundary(),
+      right: () => isRTL(this.language) ? this.getVisibleBoundary() : 50,
+      left: () => !isRTL(this.language) ? this.getVisibleBoundary() : 50
     };
 
     /**
@@ -238,11 +239,14 @@ export default class ThemeMapConfig {
   }
 
   /**
-   * Get the leftmost point on the map, such that pins will still be visible
+   * Get the leftmost point on the map, or rightmost point for RTL locales, such that pins
+   * will still be visible.
+   * 
    * @return {Number} The boundary (in pixels) for the visible area of the map, from the left
-   *                  hand side of the viewport
+   *                  or right hand side of the viewport depending on if the language displayed
+   *                  is left-to-right or right-to-left
    */
-  getLeftVisibleBoundary () {
+  getVisibleBoundary () {
     if (window.innerWidth <= this.mobileBreakpointMax) {
       return 50;
     }
diff --git a/templates/vertical-full-page-map/markup/map.hbs b/templates/vertical-full-page-map/markup/map.hbs
index 4192b3d06..85cba5151 100644
--- a/templates/vertical-full-page-map/markup/map.hbs
+++ b/templates/vertical-full-page-map/markup/map.hbs
@@ -1 +1 @@
-<div id="js-answersMap" class="Answers-map js-answersMap"></div>
+<div id="js-answersMap" class="Answers-map js-answersMap" dir="ltr"></div>
diff --git a/templates/vertical-map/markup/map.hbs b/templates/vertical-map/markup/map.hbs
index ad381326a..43b8882c7 100644
--- a/templates/vertical-map/markup/map.hbs
+++ b/templates/vertical-map/markup/map.hbs
@@ -1 +1 @@
-<div class="Answers-map js-answersMap" id="js-answersMap"></div>
\ No newline at end of file
+<div class="Answers-map js-answersMap" id="js-answersMap"  dir="ltr"></div>
\ No newline at end of file