Leaflet: missing tiles, unpredictable zooming with RTL layout

Created on 26 Oct 2012 · 12Comments · Source: Leaflet/Leaflet

Leaflet doesn't work very well with a right-to-left layout. Tiles are missing from all but the rightmost border, and zooming doesn't work as expected.

Test case:

<html dir="rtl">
<head>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css" />
  <script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js"></script>
  <style>
    #map { height: 100%; }
  </style>
</head>
<body>
<div id="map"></div>
<script>
  var map = L.map('map').setView([51.505, -0.09], 13);
  L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
</script>
</body>
</html>

Source

jfirebaugh

Most helpful comment

@ayyash For me I stoped compiling of RTL leaflet css and it worked. (so its using en css in ar )

mufaddalmw on 13 Oct 2019

❤1 😕1 👍1

All 12 comments

Hmm, try overriding elements inside .leaflet-container back to ltr, I think it should fix most of the problems.

mourner on 26 Oct 2012

Setting dir=ltr on .leaflet-map-pane doesn't help, and we don't want it on the control elements. Just as a test, neither did dir=ltr on .leaflet-container, for that matter.

This is on Chrome 22.

jfirebaugh on 26 Oct 2012

Hmm, weird... Lets investigate further.

mourner on 26 Oct 2012

This should fix it all:
https://github.com/danzel/Leaflet/tree/rtl
PR #1099
Enjoy :-) (Leaflet all the things!)

danzel on 28 Oct 2012

Sorry, mouse position fixes don't work in IE9 or firefox.

danzel on 28 Oct 2012

Okay I've had another go at this, updated PR in #1100.
RTL is a bit dodgy across browsers but we should work correctly now.

danzel on 28 Oct 2012

The second pull has been merged, so this should be all fixed up. Shout if there are any more issues :-)

danzel on 29 Oct 2012

Thanks, works great!

jfirebaugh on 1 Nov 2012

I know this is an old thread, but I don't understand, is there something I should be doing to get it to work in RTL? a setting?

ayyash on 25 Mar 2019

👍1

@ayyash For me I stoped compiling of RTL leaflet css and it worked. (so its using en css in ar )

mufaddalmw on 13 Oct 2019

❤1 😕1 👍1

@mufaddalmw yes thats what i did too, I forced that part into ltr 👍

ayyash on 13 Oct 2019

😕1

Hi, I using leaflet and vue2 leaflet in a vue basic template. When I change the layout to RTL I miss some of the tiles. like the attachment file.
Can you help me?
regards
map