esri-leaflet-vector Multiline text not breaking

Describe the bug

When I try to use arcgis method to add a vector tile layer the arabic text doesn't break as you can see in the SS:

But when using esriVector the arabic text breaks.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Esri Leaflet Vector Basemap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Load Leaflet from CDN -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

    <!-- Esri Leaflet and Esri Leaflet Vector -->
    <script src="https://unpkg.com/esri-leaflet/dist/esri-leaflet.js"></script>
    <script src="https://unpkg.com/esri-leaflet-vector@3/dist/esri-leaflet-vector.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/2.15.0/mapbox-gl.min.css" integrity="sha512-fPYzCDCwWGaqR93cxlCAZSqnHnabV5//RllFHLzi6L620mq7YtlyrBIUZbwttOkFFQgwVff/QMKpBPcQ4kH2dg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    
    <script>
      var map = L.map("map").setView([23.8859, 45.0792], 6);
      const tileApiKey = "xyz";
      L.esri.Vector.vectorTileLayer("xyz/Public_Basemap/VectorTileServer",{
      apikey: tileApiKey,
      }).addTo(map);
    </script>
  </body>

</html>

Reproduction

if you requires tileserver url and apiKey let me know. But it is confidential.

Oct 12 '23 08:10 OwaisNadeemCentric

Hi @OwaisNadeemCentric, thank you for the report.

We do have a sample for using other languages - with the Esri Basemaps service v2 - in the examples folder: https://github.com/Esri/esri-leaflet-vector/blob/master/examples/languages.html

That looks correct to me (although I do not speak the language so it's hard for me to confirm):

But that sample uses L.esri.Vector.vectorBasemapLayer, where your example is using a custom Vector Tile layer using L.esri.Vector.vectorTileLayer, so it's a different use case.

if you requires tileserver url and apiKey let me know. But it is confidential.

In order to help out more, yes we would need a replication case. You could share us the URL and apiKey, but a better way would be if you can share the steps for us to create and publish a vector tile layer that demonstrates the issue. Or if you can share a publicly accessible layer that demonstrates the issue.

Thanks!

Oct 12 '23 13:10 gavinr-maps

Thank you for looking at this issue I am sharing the current implementation with esri-vector

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Load Leaflet from CDN -->
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

    <!-- Esri Leaflet and Esri Leaflet Vector -->
    <script src="https://unpkg.com/esri-leaflet/dist/esri-leaflet.js"></script>
    <script src="https://unpkg.com/esri-leaflet-vector@3/dist/esri-leaflet-vector.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    
    <script>
      let map = L.map("map").setView([23.8859, 45.0792], 6);
      const apiKey =
        "lsDMaBfvbRC-tBrGd7LUCxoRxVbhH16ht_50KzUKPJNhqxwhCjbeDRWg3dziXOXTwCSV7VUdqURbs1pKqHCUFhKD9UZNnaFavcAgFdhJlBMFxNGgyugTAh8HQLy04Wu83uFQ4yCOZG4ebqR6_ygs22Xny-L5CW5KcHYjgGBg4veD7pbVk9aBwlFNXPrxic0e";

      const vectorTileUrl =
        "https://stgisudp.momra.gov.sa/server/rest/services/Hosted/Public_Basemap/VectorTileServer";
      const layer = new L.esri.Vector.vectorTileLayer(vectorTileUrl, {
        apikey: apiKey,
      });

      layer.addTo(map);
    </script>
  </body>
</html>

Oct 12 '23 13:10 OwaisNadeemCentric

Thank you. Replication case:

Using the ArcGIS Maps SDK for JavaScript,the labels are correctly on two lines: https://jsbin.com/zuronin/1/edit?html,output
Using Esri Leaflet Vector, the labels are not on two lines: https://jsbin.com/ramerux/edit?html,output
- Expected: labels on two lines for both
- Actual: labels are not on two lines for the second example

Oct 12 '23 14:10 gavinr-maps

Also I am sharing arcgis implementation try running it with live server. arcgis_map.zip

Oct 12 '23 14:10 OwaisNadeemCentric

Thank you. Replication case:

Using the ArcGIS Maps SDK for JavaScript,the labels are correctly on two lines: https://jsbin.com/zuronin/1/edit?html,output

Using Esri Leaflet Vector, the labels are not on two lines: https://jsbin.com/ramerux/edit?html,output

Expected: labels on two lines for both

Actual: labels are not on two lines for the second example

Arabic text is breaking also someone who can read arabic can notice that actually arabic is starting from left instead of right

Oct 12 '23 14:10 OwaisNadeemCentric

also someone who can read arabic can notice that actually arabic is starting from left instead of right

thank you for pointing that out! I do not read Arabic so that was not obvious to me.

Oct 12 '23 14:10 gavinr-maps

I have just noticed in your screenshot arabic is still breaking

For better clarity as you can see in this image the arabic is broken as well as starting from left :

and here you can see the letters are joining correctly as well as the first letter starts from right and so on.

Oct 12 '23 14:10 OwaisNadeemCentric

I have just noticed in your screenshot arabic is still breaking

Can you please confirm: the Arabic in this screenshot is left-to-right when it should be right-to-left?

Oct 12 '23 14:10 gavinr-maps

I have just noticed in your screenshot arabic is still breaking

Can you please confirm: the Arabic in this screenshot is left-to-right when it should be right-to-left?

Yes In all of the screenshot arabic is starting from Left to Right.

Oct 12 '23 14:10 OwaisNadeemCentric

Thank you for confirming that. It seems like we have two separate issues going on here:

THIS ISSUE: The label is not properly on a second line in Esri Leaflet Vector (https://github.com/Esri/esri-leaflet-vector/issues/203#issuecomment-1759694750)
- After consulting with a colleague, my hypothesis here is that Esri Leaflet Vector must not be correctly applying the default line length of 10 ems (https://docs.mapbox.com/style-spec/reference/layers/#layout-symbol-text-max-width).
- This one may also be an issue with Mapbox GL JS. So a good next step might be to build a replication case with this layer using Mapbox GL JS to see if the issue happens there too.
- One thing to try is if you can apply a line length rule to that layer in your vector tile style. If you could please try that and let us know if that resolves the issue or not.
The arabic is not properly right-to-left.
- See my separate issue here: https://github.com/Esri/esri-leaflet-vector/issues/204

Oct 12 '23 14:10 gavinr-maps

Edit: see my separate issue here: https://github.com/Esri/esri-leaflet-vector/issues/204

So We can use mapbox-gl-rtl-text-plugin with esri to solve this issue right now ?

Oct 13 '23 06:10 OwaisNadeemCentric

@OwaisNadeemCentric please move all discussion around the backwards RTL text to #204. Thanks

Oct 17 '23 17:10 gavinr-maps

@OwaisNadeemCentric I would try to reproduce the following:

Can you reproduce this with Esri Leaflet Vector v4? We switched to MapLibre and will only really support MapLibre moving forward. MapLibre still supports the mapbox RtL plugin https://maplibre.org/maplibre-gl-js/docs/examples/mapbox-gl-rtl-text/
Can you reproduce this with just the latest version of MapLibre directly? This may be a bug that they have fixed. If it is still broken then the issue is probally a MapLibre issue not and Esri Leaflet Vector issue.

Dec 01 '23 16:12 patrickarlt