Changing Leaflet map tooltip language

Question

How do we change the language of leaflet? Not the map, the tooltip of zoom buttons, draw buttons, drawpolygon, cancel etc.

Answer 1

Well, Leaflet.draw uses the L.drawLocal configuration object to set any text used in the plugin. Customizing this will allow support for changing the text or supporting another language.

For more detail see Leaflet.draw.js, actually, you can find default strings there but I've provided an example here for you to check how it gonna work.

E.g.

   // Set the button title text for the polygon button
    L.drawLocal.draw.toolbar.buttons.polygon = 'Draw a sexy polygon!';
    
    // Set the tooltip start text for the rectangle
    L.drawLocal.draw.handlers.rectangle.tooltip.start = 'Not telling...';

Till now you learned how this package works but I brought an example of what I've done before for you, So below I changed leaflet tools language to Persian

  L.drawLocal = { 
      draw: {
        toolbar: {
          // #TODO: this should be reorganized where actions are nested in actions
          // ex: actions.undo  or actions.cancel
          actions: {
            title: 'لغو ترسیم ',
            text: 'لغو'
          },
          finish: {
            title: 'اتمام ترسیم',
            text: 'اتمام'
          },
          undo: {
            title: 'حذف آخرین نقطه ی ترسم  شده',
            text: 'حذف اخرین نقطه'
          },
          buttons: {
            polyline: 'رسم چند خطی',
            polygon: 'رسم چندضلعی',
            rectangle: 'رسم مستطیل',
            circle: 'رسم دایره',
            marker: 'رسم نشان گذار',
            circlemarker: 'رسم نشانگر دایره ای'
          }
        },
        handlers: {
          circle: {
            tooltip: {
              start: 'جهت  رسم دایره کلیک کنید و بکشید'
            },
            radius: 'شعاع'
          },
          circlemarker: {
            tooltip: {
              start: 'جهت قراردادن دایره روی نقشه کلیک کنید.'
            }
          },
          marker: {
            tooltip: {
              start: 'جهت قراردادن نشانگر روی نقشه کلیک کنید'
            }
          },
          polygon: {
            tooltip: {
              start: 'جهت رسم شکل کلیک کنید',
              cont: 'جهت ادامه ترسیم شکل کلیک کنید',
              end: 'نقطه ی ابتدایی را جهت بسته شدن شکل کلیک کنید'
            }
          },
          polyline: {
            error: '<strong>Error:</strong> shape edges cannot cross!',
            tooltip: {
              start: 'جهت رسم خط کلیک کنید',
              cont: 'جهت ادامه ترسیم خط کلیک کنید',
              end: 'نقطه ی ابتدایی را جهت اتمام خط کلیک کنید'
            }
          },
          rectangle: {
            tooltip: {
              start: 'جهت ترسیم مستطیل کلیک و درگ کنید'
            }
          },
          simpleshape: {
            tooltip: {
              end: 'جهت اتمام ترسیم موس را رها کنید'
            }
          }
        }
      },
      edit: {
        toolbar: {
          actions: {
            save: {
              title: 'ذخیره ی تغییرات',
              text: 'ذخیره'
            },
            cancel: {
              title: 'لغو ویرایش، نادیده گرفتن تغییرات قبلی',
              text: 'لغو'
            },
            clearAll: {
              title: 'پاک کردن تمامی لایه ها',
              text: 'پاک کردن'
            }
          },
          buttons: {
            edit: 'ویرایش لایه ها',
            editDisabled: 'هیچ لایه ای جهت ویرایش وجود ندارد',
            remove: 'حذف لایه ها',
            removeDisabled: 'هیچ لایه ای جهت حذف وجود ندارد'
          }
        },
        handlers: {
          edit: {
            tooltip: {
              text: 'Drag handles, or marker to edit feature.',
              subtext: 'جهت نادیده درنظرگفتن تغییرات دکمه لغو  را کلیک کنید'
            }
          },
          remove: {
            tooltip: {
              text: 'جهت پاک شدن فیچر روی آن کلیک کنید'
            }
          }
        }
      }
    };