Fix missing map pins on rtl site #917
Conversation
- use ltr instead of rtl in the map div since that would disrupt the coordinate calcualted by the map providers - adjust map boundaries based on location of the result content wrapper, since that could be placed 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.
| @@ -3,7 +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'; | |||
| @@ -238,11 +238,12 @@ export default class ThemeMapConfig { | |||
| } | |||
|
|
|||
| /** | |||
| * Get the leftmost point on the map, such that pins will still be visible | |||
| * Get the leftmost or rightmost point on the map, such that pins will still be visible | |||
There was a problem hiding this comment.
Maybe leftmost point on the map, or rightmost for RTL locales,?
| @@ -1 +1 @@ | |||
| <div id="js-answersMap" class="Answers-map js-answersMap"></div> | |||
| <div id="js-answersMap" class="Answers-map js-answersMap" dir="ltr"></div> | |||
There was a problem hiding this comment.
we don't want to flip the map for rtl?
There was a problem hiding this comment.
it mess with and pin placement (specifically the coordinate to css styling translation) on the map
There was a problem hiding this comment.
does this cause the map to not be oriented correctly, for either google/mapbox? Like disregarding pin stuff, does anything else change if you add dir="ltr" on a rtl page
There was a problem hiding this comment.
the map is oriented the same way for both ltr and rtl, only the pins are affected. the div that I added dir='ltr' only contains map related things like the canvas for the map and the pin clusters which we don't want rtl on. There's also the map control html elements but the position for those are specify for ltr and rtl in the map provider construction code. everything else on the page would follow ltr. tldr: nothing else change when I tested google and mapbox on the map pages
J=SLAP-1515
TEST=manual