search

Esri / esri-leaflet-vector

Display ArcGIS Online vector basemaps w/ Esri Leaflet
51 stars 53 forks source link

Multiline text not breaking #203

Open OwaisNadeemCentric opened 10 months ago

OwaisNadeemCentric commented 10 months ago

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:

image

But when using esriVector the arabic text breaks.

image

<!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.

gavinr-maps commented 10 months ago

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): image

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!

OwaisNadeemCentric commented 10 months ago

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>
gavinr-maps commented 10 months ago

Thank you. Replication case:

OwaisNadeemCentric commented 10 months ago

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

OwaisNadeemCentric commented 10 months ago

Thank you. Replication case:

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

gavinr-maps commented 10 months ago

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.

OwaisNadeemCentric commented 10 months ago

I have just noticed in your screenshot arabic is still breaking

image

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

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

gavinr-maps commented 10 months ago

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?

OwaisNadeemCentric commented 10 months ago

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.

gavinr-maps commented 10 months ago

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

  1. 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.
  2. The arabic is not properly right-to-left.
OwaisNadeemCentric commented 10 months ago

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 ?

gavinr-maps commented 10 months ago

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

patrickarlt commented 9 months ago

@OwaisNadeemCentric I would try to reproduce the following:

  1. 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/
  2. 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.