diff --git a/app/components/InteractiveMap.tsx b/app/components/InteractiveMap.tsx index 5959fc6..136a37f 100644 --- a/app/components/InteractiveMap.tsx +++ b/app/components/InteractiveMap.tsx @@ -36,7 +36,7 @@ async function reverseGeocode(lat: number, lon: number): Promise { headers: { "x-api-key": MAPIR_KEY }, }); const data = await res.json(); - return data?.address || data?.address_compact || "آدرس نامشخص"; + return data?.address_compact || data?.address || "آدرس نامشخص"; } catch (error) { console.error("Error fetching address:", error); return ""; @@ -246,6 +246,20 @@ export default function InteractiveMap({ (async () => { const maplibregl = (await import("maplibre-gl")).default; 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 map = new maplibregl.Map({ container: mapContainerRef.current,