Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Multiline text not breaking #203

Open
OwaisNadeemCentric opened this issue Oct 12, 2023 · 13 comments
Open

Multiline text not breaking #203

OwaisNadeemCentric opened this issue Oct 12, 2023 · 13 comments

Comments

@OwaisNadeemCentric
Copy link

OwaisNadeemCentric commented Oct 12, 2023 •
edited by gavinr-maps
Loading

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.
@OwaisNadeemCentric OwaisNadeemCentric changed the title Arabic Text is breaking when using vector tile. Arabic Text is breaking when using esri vector tile plugin. Oct 12, 2023
@gavinr-maps
Copy link
Contributor

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
Copy link
Author

OwaisNadeemCentric commented Oct 12, 2023 •
edited by gavinr-maps
Loading

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
Copy link
Contributor

Thank you. Replication case:

@OwaisNadeemCentric
Copy link
Author

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

@OwaisNadeemCentric

This comment was marked as off-topic.

Sign in to view
@gavinr-maps

This comment was marked as off-topic.

Sign in to view
@OwaisNadeemCentric

This comment was marked as off-topic.

Sign in to view
@gavinr-maps

This comment was marked as off-topic.

Sign in to view
@OwaisNadeemCentric

This comment was marked as off-topic.

Sign in to view
@gavinr-maps
Copy link
Contributor

gavinr-maps commented Oct 12, 2023 •
edited
Loading

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 (Multiline text not breaking #203 (comment))
    • 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

This comment was marked as off-topic.

Sign in to view
@gavinr-maps gavinr-maps changed the title Arabic Text is breaking when using esri vector tile plugin. Multiline text not breaking Oct 17, 2023
@gavinr-maps

This comment was marked as off-topic.

Sign in to view
@patrickarlt
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@patrickarlt @OwaisNadeemCentric @gavinr-maps