Localization/translation?

[phtmgt]

Currently not possible. Leaflet-draw allows for custom interface text via L.drawLocal..., but I can't figure out how to access that.

[RezaBakhshiNia]

Hello friend. This is how I do localization or translation. (this is Persian language); just add your localize component before component.

import L from 'leaflet'
import { useEffect } from 'react'
import drawLocales from 'leaflet-draw-locales'

// Customize locale language
const locale = drawLocales('en');
// actions
locale.draw.toolbar.actions.title = "لغو ترسیم";
locale.draw.toolbar.actions.text = "لغو";
// finish
locale.draw.toolbar.finish.title = "پایان ترسیم";
locale.draw.toolbar.finish.text = "پایان";
// undo
locale.draw.toolbar.undo.title = "حذف آخرین نقطه کشیده شده";
locale.draw.toolbar.undo.text = "حذف آخرین نقطه";
// buttons
locale.draw.toolbar.buttons.polyline = "ترسیم خط";
locale.draw.toolbar.buttons.polygon = "ترسیم چند ضلعی";
locale.draw.toolbar.buttons.rectangle = "ترسیم مربع";
locale.draw.toolbar.buttons.circle = "ترسیم دایره";
locale.draw.toolbar.buttons.marker = "نشانگر";
locale.draw.toolbar.buttons.circlemarker = "ترسیم نشانگر دایره‌ای";
locale.draw.handlers.circle.tooltip.start = "کلیک و رها کردن برای ترسیم دایره";
locale.draw.handlers.circle.tooltip.radius = "شعاع";
locale.draw.handlers.circlemarker.tooltip.start = "برای قرار دادن علامت روی نقشه کلیک کنید";
locale.draw.handlers.marker.tooltip.start = "روی نقشه کلیک کنید";
locale.draw.handlers.polygon.tooltip.start = "برای رسم چند ضلعی کلیک کنید";
locale.draw.handlers.polygon.tooltip.cont = "برای ادامه رسم چند ضلعی کلیک کنید";
locale.draw.handlers.polygon.tooltip.end = "برای اتمام روی نقطه شروع کلیک کنید";
locale.draw.handlers.polyline.tooltip.start = "برای رسم خط کلیک کنید";
locale.draw.handlers.polyline.tooltip.cont = "برای ادامه رسم خط کلیک کنید";
locale.draw.handlers.polyline.tooltip.end = "برای اتمام روی نقطه شروع کلیک کنید";
locale.draw.handlers.polyline.error = '<strong>خطاء:</strong> لبه های شکل نمی توانند متقاطع شوند!';
locale.draw.handlers.rectangle.tooltip.start = "برای رسم مربع کلیک کنید";
locale.draw.handlers.simpleshape.tooltip.end = "برای اتمام موس را رها کنید";

// edit #ff5
locale.edit.toolbar.actions.save.title = "ذخیره تغییرات";
locale.edit.toolbar.actions.save.text = "ذخیره";
locale.edit.toolbar.actions.cancel.title = "لغو ویرایش، حذف همه تغییرات";
locale.edit.toolbar.actions.cancel.text = "لغو";
locale.edit.toolbar.actions.clearAll.title = "حذف تمام لایه‌ها";
locale.edit.toolbar.actions.clearAll.text = "پاک سازی همه";
locale.edit.toolbar.buttons.edit = "ویرایش لایه‌ها";
locale.edit.toolbar.buttons.editDisabled = "لایه‌ای برای ویرایش نیست";
locale.edit.toolbar.buttons.remove = "حذف لایه‌ها";
locale.edit.toolbar.buttons.removeDisabled = "هیچ لایه‌ای برای حذف نیست";
locale.edit.handlers.edit.tooltip.text = "برای ویرایش، نشانگرها را بکشید";
locale.edit.handlers.edit.tooltip.subtext = 'برای لغو تغییرات روی "لغو" کلیک کنید';
locale.edit.handlers.remove.tooltip.text = "برای حذف روی یک ویژگی کلیک کنید";

L.drawLocal = locale

export default function LeafletDrawFarsiLocale() {
  useEffect(() => {

    return () => {
      L.drawLocal = locale
    }
  })

  return null
};

import { MapContainer } from 'react-leaflet';
import LeafletDrawFarsiLocale from '../../components/utils/PersianLocale';
const MapComponent = ({
}) => {
  return (
<LeafletDrawFarsiLocale/>
<MapContainer
  ref={mapRef}
  preferCanvas={true}
  id="map_container"
  attributionControl={false}
  center={[32.57068, 54.27695]}
  zoom={5}
  minZoom={6}
  scrollZoom={false}
  scrollWheelZoom={true}
  className="no-scrollbar w-ful relative inset-0 z-0 m-auto !h-full"
></MapContainer>
  );
};

[Fdavidtr]

Two things, I think you need the array of dependencies. Otherwise the component will load this in each render:

  useEffect(() => {
    // Reinstate the custom locale if the component is re-mounted
    return () => {
      L.drawLocal = locale;
    };
  }, []);

2. Instead of having a component which always returns null, it is more appropriate to use a custom hook:

Spanish one in case someone needs it:

import { useEffect } from 'react';
import L from 'leaflet';
import drawLocales from 'leaflet-draw-locales';

const useLeafletDrawLocale = (localeId = 'fa') => {  // 'fa' is often used as the language code for Persian
    useEffect(() => {
        // Assuming drawLocales has support for Persian, otherwise fall back to manual settings
        const locale = drawLocales(localeId);
        // Manual override if drawLocales doesn't support Persian
        locale.draw.toolbar.actions.title = "لغو ترسیم";
        locale.draw.toolbar.actions.text = "لغو";
        locale.draw.toolbar.finish.title = "پایان ترسیم";
        locale.draw.toolbar.finish.text = "پایان";
        locale.draw.toolbar.undo.title = "حذف آخرین نقطه کشیده شده";
        locale.draw.toolbar.undo.text = "حذف آخرین نقطه";
        locale.draw.toolbar.buttons.polyline = "ترسیم خط";
        locale.draw.toolbar.buttons.polygon = "ترسیم چند ضلعی";
        locale.draw.toolbar.buttons.rectangle = "ترسیم مربع";
        locale.draw.toolbar.buttons.circle = "ترسیم دایره";
        locale.draw.toolbar.buttons.marker = "نشانگر";
        locale.draw.toolbar.buttons.circlemarker = "ترسیم نشانگر دایره‌ای";
        // Apply the localized settings to L.drawLocal
        L.drawLocal = locale;

        return () => {
            // Reset to default or another locale if needed
            L.drawLocal = drawLocales('en'); // Resetting to English
        };
    }, [localeId]);
};

export default useLeafletDrawLocale;