1

I simply want to make a georeferenced imageOverlay draggable in leaflet. I found several unanswered posts (e.g. here and here).

Since it is easy to make markers draggable, someone tried to adapt the code for imageOverlay here. The issue was closed and refered to the interactive option for events on imageOverlays.

According to the last two links, it shouldn't be so difficult but I have no idea how to do it - do you?

6

A simple workaround is to bind the imageOverlay to a draggable Polygon (thanks to w8r for this idea, developer of Leaflet.Path.Drag)

 var poly1 = [
    [40.71222, -74.22655],
    [40.77394, -74.22655],
    [40.77394, -74.12544],
    [40.71222, -74.12544]
 ];
 var pg = new L.Polygon([poly1],{
       draggable: true,
       opacity: 0,
       fillOpacity: 0
    }).addTo(map);  

 var imageBounds = L.latLngBounds([
    poly1[0],
    poly1[2]
 ]);
 map.fitBounds(imageBounds);
 var overlay = new L.ImageOverlay("https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg", imageBounds, {
    opacity: 0.7,
    interactive: true
 });
 map.addLayer(overlay);

 pg.on('drag, dragend', function (e) {
    overlay.setBounds(pg.getBounds());
 });

https://jsfiddle.net/freeze2000f/e2co5jv0/

| improve this answer | |
  • It is not clear in your answer that you need to install a pllugin for this.. – gordie Feb 16 at 12:22
1

I have gone through some more answers and found this nice stuff.

Here it is: https://github.com/publiclab/Leaflet.DistortableImage

| improve this answer | |
  • Welcome to GIS SE! We're a little different from other sites; this isn't a discussion forum but a Q&A site. Please check out our short tour to learn about our focussed Q&A format. – PolyGeo Oct 30 '18 at 7:41

Not the answer you're looking for? Browse other questions tagged or ask your own question.