Add GPS/EXIF metadata detection for rough auto-placement using lat/lon, compass, elevation

[jywarren]

#142 introduced this awesome feature, which uses image metadata to try to place images roughly over their real-world positions on the globe. Compass data is also used to try to guess appropriate image rotation.

This section of code in MapKnitter already does this and integrates with this library:

https://github.com/publiclab/mapknitter/blob/f0f2f27ca9c4d3e6c80e2d76b356b950bb1d762f/app/assets/javascripts/mapknitter/Map.js#L215-L309

Some part of this may be complete as of #156, but we just need to fully reproduce the function from MapKnitter's code and make it both a method of the DistortableImage class and a tool that can be used from the menu.

So there are actually a few in-progress attempts here:

• Incorporate EXIF functionality (and some refactors) #169
• EnableExif #421
  EnableExif #421 is the most recent version of this.

The MapKnitter version is very powerful code - it even fetches the known elevation from Google's ElevationService using .getElevationForLocations(), to estimate how far away the ground is by comparing this to the camera's elevation above sea level. This would be super to integrate more into the core of this library!

So there are 5 features. All are "rough" not exact placement, but all are helpful!

• Find lat/lon and place image there
• Find angle of rotation (i.e. from compass data) and rotate image accordingly
• Find camera altitude and scale the image appropriately
• Use Google's ElevationService using .getElevationForLocations() to estimate ground altitude above sea level and compare to camera altitude above sea level to correctly roughly size image based on "distance from the ground"
• Recenter map with map.fitBounds() to display the image at center of viewer.

Again, some of this may already be in place as of https://github.com/publiclab/Leaflet.DistortableImage/blob/main/src/edit/getEXIFdata.js

Ideally it should be

• present in the default toolbar (like this: https://github.com/publiclab/Leaflet.DistortableImage/pull/421/files#diff-522b0650cf7370300831d97e23eaee344fa5abed13b88b6acdd2ac69ad86a4b5R360)
• should be enabled if EXIF data is present
• should show a tooltip No GPS EXIF metadata found if not?
• should be documented in the README
• should be covered by a test (using sample images below! Note that EXIF tags should survive an image resize so if we want a test image we can use a small one for efficiency.)

We had used a crosshairs icon in the past for this tool.

Example images and known expected locations

I think a solution for this is already up at #421 but may need updating/refactoring. Sample images and a sample use case can be found at https://publiclab.org/notes/patcoyle/03-23-2015/using-the-mapknitter-2-image-placement-using-geotagged-images and should lead to placement as shown here:

Related code links

Noting related code not only at the PR above (#421) but also at:

• https://github.com/publiclab/Leaflet.DistortableImage/blob/a980773b0ea20f97c90d491b6b44861c48f5a0b4/src/edit/getEXIFdata.js