ivansanchez / leaflet.imageoverlay.rotated Goto Github PK

Hi, I'm having an issue where when I try to add the rotated image to the map, I get this.getPane is not a function

I'm guessing this is an issue with how i'm using the library but any help would be very much appreciated (I seem to not have this issue when using regular imageOverlay).

Also, lmk if there's any info I can give that would be more helpful. Thanks!

Also here's how we use it:

      let url = target_img.imageUrl;
      let topLeft = latLngToLeaflet(target_img.topLeft);
      let topRight = latLngToLeaflet(target_img.topRight);
      let bottomLeft = latLngToLeaflet(target_img.bottomLeft);
      let bottomRight = latLngToLeaflet(target_img.bottomRight);
      let overlay = Leaflet.imageOverlay.rotated(url, topLeft, topRight, bottomRight).addTo(map);

where latLngToLeaflet creates a Leaflet LatLng Object and map is the Leaflet Map Object

Also I'm using v0.1.1 with leaflet 0.7.7

Sorry for the blurry question :)

Library is working great, but we would like to Add a dragging capability for the entire layer.

I'm using leaflet Path transform library to edit and drag shapes
https://github.com/w8r/Leaflet.Path.Transform

Library allows to transform and drag polygon shapes on the screen.
It seems like a natural combo with your library since if I'm not mistaken the dragging feature is not available yet via your library.

1. Question is: is there any know code snippest to integrate the 2 libraries,
2. If not, is there any simple way we can extend your library to support dragging as well ?

If u can give us some pointers that would be great

Hello,

I created two similar fiddles:

Sample A is using normal image overlays and sample B is using rotated image overlays (though the images don't appear rotated, but that's not the point here). In both cases, the overlays can be checked on and off in a layers control.

A) https://jsfiddle.net/ngbjpv6L/
B) https://jsfiddle.net/49rpsn2b/

Now please note the difference: When you check/uncheck the two images in the layers control (button in the top-right corner of the Map), in sample A the first image (Opera House) will always be in the background of the second image (Anzac Bridge), no matter in which order you switch the checks on or off (this is how it's supposed to be).

In sample B, the overlay that is check on last will be in the foreground (which is highly undesired!).

I guess this has to do with repositioning. Any idea how I can resolve this?

Thanks!
Karlo

When I rotate the image in 90 deg the image suddenly disappears

http://ivansanchez.github.io/Leaflet.ImageOverlay.Rotated/demo.html

Thanks
Yael Friedmann

When using the lib like stated in the readme (see below), the following error occurs:

const overlay = Leaflet.imageOverlay.rotated("../office.png", topleft, topright, bottomleft, {
        opacity: 0.7,
        interactive: false
    }).addTo(mapRef)

Is it me doing something wrong or is something broken? Leaflet = 1.5.1

I would like to know if this library is still being maintained. The last commit was some while ago.
If not, what would be a nice alternative?

I tried to include some Leaflet.ImageOverlay.Rotated layers in a feature group, but the L.FeatureGroup methods weren't working correctly. It appears this is due to not getting bounding data from the Leaflet.ImageOverlay.Rotated object.

I was able to make a temporary solution by adding the second line of code, below.

    var overlay = L.imageOverlay.rotated(imageURL, topLeft, topRight, bottomLeft);
    overlay._bounds = L.latLngBounds([topLeft, topRight, bottomRight, bottomLeft]);

Perhaps the library could do this automatically?

I wonder how can I use this module with react-leaflet
Any working example of that?

Thanks

Hi, is there any code snippest to integrate this with path transform?

var topleft = L.latLng(40.52256691873593, -3.7743186950683594), topright = L.latLng(40.5210255066156, -3.7734764814376835), bottomleft = L.latLng(40.52180437272552, -3.7768453359603886); var overlay = L.imageOverlay.rotated(".\common\5A09_NUM_FTG.tif", topleft, topright, bottomleft, { opacity: 0.4, interactive: true, attribution: "&copy; <a href='http://www.ign.es'>Instituto Geográfico Nacional de España</a>" }).addTo(map);

Not working... I'm developing an engineering platform for my company. Just don't understand why this won't work.

load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils&ver=6.3.1:2 Uncaught TypeError: L.imageOverlay.rotated is not a function
at HTMLDocument. (post.php?post=619&action=edit:9500:31)
at e (load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils&ver=6.3.1:2:26990)

I have:

• a top left and a bottom right position
• dimensions of the image

How could I get the topright and bottomleft ?

Hi, I tried to change the url from an ImageOverlay.Rotated
myOverlay.setUrl(newUrl)
but it did not work. Maybe extending the function setUrl to
setUrl:function(url){
this._super(url);
this._rawImage.src=url;
}
could be enough.
A very good and useful job, by the way. Thank you very much
Best regards

I can't set the default zoom when use this plugin.
I tried all kings of methods to set zoom,like setZoom(11), map.setView([xx,xx], 11)....
Please help me.