Tal vez alguien se enfrentó a un problema similar. Cuando se ejecuta dicho código, la imagen agregada al mapa no se muestra en las coordenadas especificadas en las esquinas, sino en toda la pantalla.

 import "leaflet-toolbar"; import "leaflet-distortableimage"; import "leaflet-distortableimage/dist/vendor.js"; import "./styles.css"; import "leaflet/dist/leaflet.css"; import "leaflet-toolbar/dist/leaflet.toolbar.css"; import "leaflet-distortableimage/dist/leaflet.distortableimage.css"; import PlanImage from "../../../../Downloads/Stage_Plans_155_8bd04203-148f-4332-b82a-297afd3be66f.jpeg"; const map = L.map("app", { center: [50.0, 10.0], zoom: 3, }); L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: '&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors', }).addTo(map); map.whenReady(() => { let img = new L.distortableImageOverlay(PlanImage, { corners: [L.latLng(51.52, -0.14), L.latLng(51.52, -0.1), L.latLng(51.5, -0.14), L.latLng(51.5, -0.1)], mode: "lock", }).addTo(map); // () => map.removeLayer(imageLayer); });

aparece un error

 DistortableImageOverlay.js:317 Uncaught TypeError: Cannot read properties of undefined (reading 'slice') at NewClass.getAngle (DistortableImageOverlay.js:317:18) at NewClass._reset (DistortableImageOverlay.js:453:30) at NewClass.setBounds (ImageOverlay.js:144:9) at NewClass.setCorners (DistortableImageOverlay.js:247:10) at NewClass.<anonymous> (index.js:40:7) at NewClass.whenReady (Map.js:1465:13) at Object.parcelRequire.src/index.js.leaflet (index.js:20:5) at newRequire (src.a2b27638.js:47:24) at src.a2b27638.js:81:7 at src.a2b27638.js:120:3

Y después de mover la rueda del mouse, la imagen se muestra en las coordenadas deseadas.