fix(address-map): RTL label rendering + use address_compact
- register MapLibre's RTL text plugin (@mapbox/mapbox-gl-rtl-text) so Persian/Arabic map labels render correctly instead of reversed/broken. Guarded via getRTLTextPluginStatus so it's set only once. - reverse geocoding now prefers Map.ir's address_compact (shorter, cleaner address) over the full address. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
parent
3c7ee5b24c
commit
68786787b4
@ -36,7 +36,7 @@ async function reverseGeocode(lat: number, lon: number): Promise<string> {
|
|||||||
headers: { "x-api-key": MAPIR_KEY },
|
headers: { "x-api-key": MAPIR_KEY },
|
||||||
});
|
});
|
||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
return data?.address || data?.address_compact || "آدرس نامشخص";
|
return data?.address_compact || data?.address || "آدرس نامشخص";
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error fetching address:", error);
|
console.error("Error fetching address:", error);
|
||||||
return "";
|
return "";
|
||||||
@ -246,6 +246,20 @@ export default function InteractiveMap({
|
|||||||
(async () => {
|
(async () => {
|
||||||
const maplibregl = (await import("maplibre-gl")).default;
|
const maplibregl = (await import("maplibre-gl")).default;
|
||||||
if (cancelled || !mapContainerRef.current) return;
|
if (cancelled || !mapContainerRef.current) return;
|
||||||
|
// Persian/Arabic labels need the RTL text plugin or they render
|
||||||
|
// reversed/broken. Safe to attempt once; throws if already set.
|
||||||
|
try {
|
||||||
|
if (
|
||||||
|
maplibregl.getRTLTextPluginStatus?.() === "unavailable"
|
||||||
|
) {
|
||||||
|
maplibregl.setRTLTextPlugin(
|
||||||
|
"https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.3.0/dist/mapbox-gl-rtl-text.js",
|
||||||
|
true // lazy: load when RTL text is first encountered
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
/* plugin already registered */
|
||||||
|
}
|
||||||
const start = selectedPosition || currentCenter; // [lat, lng]
|
const start = selectedPosition || currentCenter; // [lat, lng]
|
||||||
const map = new maplibregl.Map({
|
const map = new maplibregl.Map({
|
||||||
container: mapContainerRef.current,
|
container: mapContainerRef.current,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user