Allow adding an image by dragging it onto the page, in the demo

[kerbstone52]

Scope: Browse to and open local image ?

Description: Is there and method where a local image which is to be manipulated can be accessed using a normal file open type scenario ? (Or indeed just dragged over the map)

Apologies if this is a stupid question (but this type of functionality is available for geojson, kml etc.)

[welcome[bot]]

Thanks for opening your first issue here! Please follow the issue template to help us help you 👍🎉😄 If you have screenshots to share demonstrating the issue, that's really helpful! 📸 You can make a gif too!

[jywarren]

Hi we are interested in implementing this and will try via the upcoming Google Summer of Code, thank you!

I think the best place to do it would be in our demo at https://publiclab.github.io/Leaflet.DistortableImage/examples/export.html

[kerbstone52]

Hi Jeffrey, I am really looking forward to seeing this, best of luck with it. If you REALLY want to push the boat out, you might think about the following scenario. Browse to - or drag over an image, Locate and Manipulate the Image as desired. Save the image...... and then difficult but highly desirable scenario.....on a subsequent file open of the manipulated image can it retain it's placement. i.e. can the image somehow be geocoded.

[jywarren]

Hi, that's a cool idea. I could imagine 2 ways:

1. we could embed the JSON for the 4 corners in the EXIF data, and read it again if you drag it into LDI a second time. But what program were u thinking of when you say "subsequent file open"? We could embed GPS EXIF tags easily but thats just 1 point, not 4. We could do both, of course.
2. we could encourage/make more visible the "distorted download" i.e. download with it's warped shape applied. This is not mutually exclusive with the above. When you drag it back into LDI after this, however, it would not get re-distorted as it would already be distorted.

Thoughts on these? Thank you! What's your use case?

On Wed, Feb 16, 2022 at 5:02 AM kerbstone52 @.***> wrote:

Hi Jeffrey, I am really looking forward to seeing this, best of luck with it. If you REALLY want to push the boat out, you might think about the following scenario. Browse to - or drag over an image, Locate and Manipulate the Image as desired. Save the image...... and then difficult but highly desirable scenario.....on a subsequent file open of the manipulated image can it retain it's placement. i.e. can the image somehow be geocoded.

— Reply to this email directly, view it on GitHub https://github.com/publiclab/Leaflet.DistortableImage/issues/855#issuecomment-1041316111, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAF6J5MEVBDT47CX6UGKCLU3NY4NANCNFSM4ZMKZBTQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you commented.Message ID: @.***>

[kerbstone52]

Hi Jeffrey, Apologies for the late response.

I imagine both 1. and 2. would be desirable. Any manipulation of the image, by location, size, rotation, or distortion would be retained on a subsequent 'drag back into' LDI. (that is what I mean by a 'file open')

...however if a standard exists (and I am not sure it does exist) whereby Lat Lon AND projection could be stored in EXIF whereby the file could be opened in a GIS package such as QGIS that would be good.

Also what might be desirable for leaflet generally could be an additional optional accompanying txt file export which could be used as a code snippet or placement guide for manual coding. i.e. containing the bounding box LAT, LON, File Name, Transparency etc.

A perhaps further extension of the idea might be to allow export of multiple images to a single image. In this way I might drag in an image and manipulate it. In a different application I might prepare some annotations or graphics (perhaps in svg) Drag them both into leaflet and export a single file. I might then be able to tell or demonstrate possibly complex stories in a simple visual way using leaflet.

My own use case is rather specialized and somewhat obtuse and is related to demonstrating and exploring archaeoastronomic concepts. If you look at the image here (https://github.com/kerbstone52/Mace) you can see where I have used Leaflet.DistortableImage to overlay and rotate an image (in this case a phi spiral). I am suggesting that perhaps the builders of this 5000 year old passage tomb based the shape of the tomb on a spiral. If I was presenting the concept I might like to just drag that image into leaflet. I am sure however this facility could be applied to anyone wanted to tell a story through maps, Global Warming, Famine, War, Deforestation etc.

regards

Brian