WebSocket connection to 'ws://localhost:8081/ws' failed

[jpoep]

Describe the bug:
Whenever a page that has this package included is opened, the browser repeatedly attempts to connect to the WebPack dev server at localhost:8081. As I'm not using WebPack, this request constantly fails and it also happens in production. When you open your browser's dev tools, you can observe this behavior in the console. This also happens on the demo site.

It looks like the package is distributed with a development build, but I haven't looked too far into it. I'm not that familiar with WebPack.

Reproduce the behavior:

• Open any site running this plugin, e.g. https://publiclab.github.io/Leaflet.DistortableImage/examples/index.html
• Open your browser's dev tools
• Observe the console for connection errors

Browser, version, and operating system:

• Happens in all browsers (tested with Chrome, Firefox, and Safari)
• Versions 108.0.5359.98, 108.0.1, and 16.1 (18614.2.9.1.12) respectively
• Platform: macOS Ventura

Any help is much appreciated, thanks a lot in advance! :)

[welcome]

Thanks for opening your first issue here! This space is protected by our Code of Conduct - and we're here to help.
Please follow the issue template to help us help you 👍🎉😄
If you have screenshots or a gif to share demonstrating the issue, that's really helpful! 📸
You can make a gif too!
Do join our Gitter channel for some brainstorming discussions.

[JoshyB]

I'm having this same issue, and I'm wondering if a solution has been found?

[SashaLifashkin]

Yeah! I'm having this same issue too.

[rodrigore]

Same issue

[AntoineB05]

same issue too

[luke-z]

It seems like the problem has been fixed with the release 0.21.10 which somehow isn't available on npm.

The website you linked (https://publiclab.github.io/Leaflet.DistortableImage/examples/index.html) doesn't show the error anymore.

[jpoep]

Interesting, thanks for the update! Any idea who is responsible for publishing 0.21.10 on npm? I bet it's where 99% of people pull this library from and it's already been 3 months since the release.

[makrishna]

It seems like the problem has been fixed with the release 0.21.10 which somehow isn't available on npm.

The website you linked (https://publiclab.github.io/Leaflet.DistortableImage/examples/index.html) doesn't show the error anymore.

Looks like it is not working with websocket builds, can someone have a work around for it.

[tap2k]

Im still having the same issue with 0.21.10 working with NextJS v13.

[tap2k]

Did anyone figure out a solution to fix this?

[Parrryy]

Yeah still having this issue.

[Mustafa-Hersi]

have anyone found a solution to this?

[yuri-karelics]

looks like the only way to fix that is to clone repository locally and make the production build with "npm run build" (I had to disable tests also in gruntfile, they didn't start). When files can be copied into your project from 'dist' folder instead of using NPM package. But keep in mind the latest version of the code in the repository has at least two bugs:

1. this fix should be reverted, it is wrong 21ad3c7
2. tooltip support implemented wrong, so if you don't need tooltip it will anyway be shown (empty one). Can be fixed with additional condition that 'this.tooltipText' is not empty before attaching the tooltip

If you don't want to do it yourself, just take from 'dist' folder in this fork https://github.com/Karelics/Leaflet.DistortableImage

P.S. maintainers (@jywarren ?) some unexplainable hell is happening with the repository, development build released into NPM, unstable updates merged into main branch, so new release can't be done without adjestments, ... In general your library looks so cool, but what happened in the last year, could you stabilize the situation, thank you!

[joric]

Same issue. Also, for the love of god, please help me with example. I can't hide/show the image. If I use distortableCollection toggling the layer doesn't hide the image, only toolbar. If I use layerGroup it hides the image, but doesn't show it back. Please help! It's a single file you can run it locally. https://joric.github.io/maps/examples/remap/
I even tried to modify the default example (add to the end of index.js):

let imgGroup = L.distortableCollection().addTo(map);
imgGroup.addLayer(img); 
L.control.layers({}, { 'Images': imgGroup }).addTo(map);

It doesn't work! Neither with distortableCollection nor with layerGroup!

---

Upd. the Websocket issue is GONE in 0.21.7, you can use this CDN:

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-distortableimage@0.21.9/dist/leaflet.distortableimage.min.css">
  <script src="https://cdn.jsdelivr.net/npm/leaflet-distortableimage@0.21.7/dist/vendor.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/leaflet-distortableimage@0.21.7/dist/leaflet.distortableimage.min.js"></script>

As for the dissapearing image, I had to re-add it in overlays using a regular layerGroup. Don't know how to fix it properly. As I said, using distortableCollection as a group doesn't help it all.

map.on('overlayadd', function(e) {
  if (e.name == 'Images') {
    loadImages();
  }
});