Additional Components

Custom Translations

You can translate the LDI toolbar buttons in your native language by providing a custom translation object to DistortableImageOverlay or DistortableCollection.

NOTE: If you don't specify a custom translation for a certain field, it will fallback to English.

These are the defaults:

var translation = {
  deleteImage: 'Delete Image',
  deleteImages: 'Delete Images',
  distortImage: 'Distort Image',
  dragImage: 'Drag Image',
  exportImage: 'Export Image',
  exportImages: 'Export Images',
  removeBorder: 'Remove Border',
  addBorder: 'Add Border',
  freeRotateImage: 'Free rotate Image',
  geolocateImage: 'Geolocate Image',
  lockMode: 'Lock Mode',
  lockImages: 'Lock Images',
  makeImageOpaque: 'Make Image Opaque',
  makeImageTransparent: 'Make Image Transparent',
  restoreImage: 'Restore Natural Image',
  rotateImage: 'Rotate Image',
  scaleImage: 'Scale Image',
  stackToFront: 'Stack to Front',
  stackToBack: 'Stack to Back',
  unlockImages: 'Unlock Images',
  confirmImageDelete: 'Are you sure? This image will be permanently deleted from the map.',
  confirmImagesDeletes: 'Are you sure? These images will be permanently deleted from the map.',
};

For confirmImagesDeletes you can pass a function that returns a string. This is useful for languages where noun form depends on the number:

var translation = {
  confirmImagesDeletes: function(n) {
    var cond = n%10 >= 2 && n%10 <= 4 && n%100 - n%10 !== 10;
    var str = 'Czy na pewno chcesz usunąć ' + n;
    if(cond) str += ' obrazy?';
    else str += ' obrazów?';
    return str;
  },
  // ...
}

L.DistortableImageOverlay

img = L.distortableImageOverlay('example.jpg', {
  translation: {
    deleteImage: 'Obriši sliku',
    distortImage: 'Izobliči sliku',
    dragImage: 'Pomjeri sliku',
    // ...
  },
}).addTo(map);

L.DistortableCollection

imgGroup = L.distortableCollection({
  translation: {
    deleteImages: 'Obriši slike',
    exportImages: 'Izvezi slike',
    // ...
  },
}).addTo(map);

Keymapper (WIP)

// add a position option with combinations of 'top', 'bottom', 'left' or 'right'
L.distortableImage.keymapper(map, {
  position: 'topleft',
});

Options:

• position (optional, default: 'topright', value: string)

Adds a control onto the map which opens a keymapper legend showing the available key bindings for different editing / interaction options.

(WIP) Currently includes keybindings for all available actions and does not update yet if you use the actions API to limit available actions.