Multiline text not breaking
OwaisNadeemCentric opened this issue · 13 comments
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.
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!
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>
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
Also I am sharing arcgis implementation try running it with live server.
arcgis_map.zip
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
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.
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?
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.
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 (#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.
- The arabic is not properly right-to-left.
- See my separate issue here: #204
Edit: see my separate issue here: #204
So We can use mapbox-gl-rtl-text-plugin with esri to solve this issue right now ?
@OwaisNadeemCentric please move all discussion around the backwards RTL text to #204. Thanks
@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.