MapKnitter Lite: fetch images from Internet Archive

[jywarren]

This is for an idea for a static-served MapKnitter Lite.

Sketches of how this could look: https://docs.google.com/presentation/d/1kFXK0f3h2IsA2lml9L2s_REXm5p1ZGAVqfKUb9H_8Eo/edit?usp=sharing

N.B: To use MapKnitter Lite successfully, users must first upload their images to the Internet Archive and get a unique identifier or URL (for their image collection)

Guide to uploading images on Internet Archive: https://help.archive.org/help/uploading-a-basic-guide/

How to make a map:

• Prompt users to input image collection URL from Internet Archive #1011
• Have a sidebar for displaying the images in a collection #1018
• Fetch and display all the collection's images in the sidebar #1013
• allow clicking a sidebar image in MK Lite to add them onto a map for placement #1023
• add a geocoding search box to the page so upon creating a map users can navigate to a specific place (could be in a popup modal? could use this plugin, like in https://publiclab.org/map) (Added search location feature to archive.html #1286)
• When opening a map, detect a key like "texas-barnraising" from a longer URL like https://archive.org/details/texas-barnraising detect key from longer URL #1175
• Add a “drag image onto page to add” feature to the Leaflet.DistortableImage demo so people can import multiple images into maps in the demo at https://publiclab.github.io/Leaflet.DistortableImage/examples/export.html (even without saving any images) drag n drop feature #1293
  • Add a notice like "You're editing a map with local images. You'll need to save images at Archive.org if you'd like to save your work online, or to export the map." if people use the drag-images approach instead of archive.org
  • create prompt for download image scale, following this example code

Smaller issues

• add a loading spinner on the "Place" buttons so people know it's still loading the image after you press it; check presence of image.width to confirm it's finished loading (i think this is the right shortcut to check image load completion?) Added spining icon for place on map button #1169
• load image thumbnails in sidebar instead of full images (we should be able to tell from the Archive's collection response which are thumbnails) so we don't overload with a huge image collection load image in sidebar as thumbnail  #1319

Ways to save the map:

• maps would still be exportable using our cloud exporter
• saving the positions in localStorage
• allowing download of the positions as a JSON file Download json file of saved positions  #1237
• maybe generating a SVG of the map using the positions and client-side webgl-distort?
• accepting a JSON file by URL or upload to load a map
• detecting a JSON file that's dragged onto the map, and loading the images and centering them in the viewport
• you could share the map by sharing a URL like: https://lite.mapknitter.org/#https://example.com/my-map.json if you're able to save the JSON file online. We could offer that on PL.org.

Bonus/stretch:

• Maybe if you uploaded the JSON to archive.org then IA would offer a viewer button which would open Leaflet.DistortableImage in view-only mode?
• Maybe they'd provide a button to "open these in MapKnitter Lite" esp. if we made a case for the OpenStreetMap workflow?
• Add GPS/EXIF metadata detection for rough auto-placement using lat/lon, compass, elevation #1024

Code to fetch a gallery (CORS is now enabled for IA images):

$ $.get('https://archive.org/metadata/texas-barnraising/',function(response) { console.log(response) })
{readyState: 1, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}
=> VM8221:1 {created: 1657632500, d1: 'ia600904.us.archive.org', d2: 'ia800904.us.archive.org', dir: '/27/items/texas-barnraising', files: Array(25), …}

$ i = new Image; i.src = "https://archive.org/download/texas-barnraising/IMG_0764.JPG";
=> 'https://archive.org/download/texas-barnraising/IMG_0764.JPG'
// will be at https://ia801507.us.archive.org/34/items/texas-barnraising/IMG_0764.JPG

$ i.width
=> 2592

This idea was explored in our GSoC ideas list here: https://publiclab.org/wiki/gsoc-ideas#MapKnitter+Local with the extra ideas:

• Add a “drag image onto page to add” feature to the Leaflet.DistortableImage demo so people can import multiple images into maps in the demo at https://publiclab.github.io/Leaflet.DistortableImage/examples/export.html (this wouldn't work for persistent maps, unlike the Internet Archive idea
• Allow current map state to be exported to a downloadable “distortableGeoJSON.json” format (see https://github.com/publiclab/image-sequencer-app#usage for current JSON format and https://gis.stackexchange.com/q/298808 / https://geojson.org/ for official GeoJSON standard) Add local saving of maps, via localStorage (may be limited by filesize?) so you don’t lose your work when you refresh the page (using “distortableGeoJSON.json”)
• Allow map initialization from a “distortableGeoJSON.json” format which auto-places the images
• Could it detect missing images from the distortableGeoJSON.json file and prompt the user to drag them onto the page? This would take some UI work.
• The hard part: local full-res map exporting: 3 possible approaches:
• switch to Ruby exporter in exporting demo: upstream Node-based cloud export service offline in export demo; switch to Ruby-based service for now #751 (maybe easiest, although it means you’d have to find how to send the local images to the remote exporter)
• rework the JS exporter for local use: https://github.com/publiclab/image-sequencer-app (challenging to rework server-side multi-threaded Node code): Availability for client-side usage? (speculative use) image-sequencer-app#16
• or use the existing webgl-distort individual image export (https://github.com/publiclab/Leaflet.DistortableImage/#full-resolution-download) and stack them into one giant image using https://github.com/nodeca/pica (hard but relatively straightforward)

Later projects/stretch goals

Something to bear in mind if you all make a lot of progress and are looking for things: #474 this issue gets at the relatively complicated external map exporter service, and it's not very well documented. If we could document it better that might go hand in hand with the local full-res map exporting mentioned above. -- @jywarren

[jywarren]

Uploading isn't so bad; i named this one texas-barnraising: https://archive.org/details/texas-barnraising

[jywarren]

Just as a proof of concept, I found that static copies of MapKnitter.org in the internet archive are mostly functional:

https://web.archive.org/web/20220726175945/https://mapknitter.org/maps/ceres--2/edit

Pretty encouraging actually!

I even tried selecting the images and generating an export, but unfortunately the export URL is also rewritten to be an archived page: https://web.archive.org/web/20211003004105/http://export.mapknitter.org/export

If we could get it to generate an external request, people could still work on old MapKnitter pages, and export what they do, interesting! They wouldn't save online though.

Maybe a more useful thing would be that we might think about how to accept JSON files in the format which MapKnitter serves them. Those are still backed up on the Internet Archive, so we could continue using them:

https://web.archive.org/web/20220726175911/https://mapknitter.org/maps/ceres--2/warpables.json

[
{"id":306187,"parent_id":null,"image_content_type":"image/jpeg","image_file_name":"DJI_1207.JPG","thumbnail":null,"image_file_size":8148349,"width":3968,"height":2976,"created_at":"2019-02-22T05:56:05.000Z","updated_at":"2019-02-27T23:13:21.000Z","map_id":13015,"nodes":[
 
 {"id":2593754,"color":"black","author":"anonymous","lat":"-37.7664063648","lon":"144.9828654528","way_id":0,"order":0,"created_at":"2019-02-27T23:13:20.000Z","updated_at":"2019-02-27T23:13:20.000Z","name":"","description":"","map_id":0,"way_order":0,"body":null},
 
 {"id":2593755,"color":"black","author":"anonymous","lat":"-37.7650239004","lon":"144.9831980467","way_id":0,"order":0,"created_at":"2019-02-27T23:13:20.000Z","updated_at":"2019-02-27T23:13:20.000Z","name":"","description":"","map_id":0,"way_order":0,"body":null},
 
 {"id":2593756,"color":"black","author":"anonymous","lat":"-37.7652020107","lon":"144.9844533205","way_id":0,"order":0,"created_at":"2019-02-27T23:13:20.000Z","updated_at":"2019-02-27T23:13:20.000Z","name":"","description":"","map_id":0,"way_order":0,"body":null},
 
 {"id":2593757,"color":"black","author":"anonymous","lat":"-37.7665844718","lon":"144.9841207266","way_id":0,"order":0,"created_at":"2019-02-27T23:13:20.000Z","updated_at":"2019-02-27T23:13:20.000Z","name":"","description":"","map_id":0,"way_order":0,"body":null}
],"locked":false,"deleted":false,"history":"","cm_per_pixel":4.99408,"src":"https://web.archive.org/web/20220726175911/https://s3.amazonaws.com/grassrootsmapping/warpables/306187/DJI_1207.JPG","srcmedium":"https://web.archive.org/web/20220726175911/https://s3.amazonaws.com/grassrootsmapping/warpables/306187/DJI_1207_medium.JPG"}
...
]

Not all of those attributes are needed for exporting; in fact, just the src, cm_per_pixel and nodes array with latitude/longitude coordinates are required, just like in this exporter JSON format:

https://github.com/publiclab/image-sequencer-app#usage

Name and description could be nice too, but optional.

[Dhei-vid]

I want to contribute to this

[Dhei-vid]

I'd like to work on the drag image onto page to add feature @jywarren

[jywarren]

Hi @Dhei-vid - thank you, i do have a worry about that. Generally we are aiming for a system where you can download a 'saved' version of the map. But if we allow people to drag an image in, that image won't be readable by anyone else (since there is no server-side file storage to keep the image, it's just displayed locally to the person who dragged it, nobody else). So if we allow people to mix in locally dragged images, it could break share-ability of maps.

I'm not sure what the solution is. I think it's complex and needs an issue to itself to discuss. Can you open one like "discuss design of dragged-on local images for MapKnitter Lite" and we can work through the questions there? For example, we could just warn people that some images won't be save-able. Or we could not allow dragging images, but prompt people to add the images to an Internet Archive collection. Maybe there are other possibilities too. Let's discuss in a new issue!

[Dhei-vid]

Okay @jywarren

[Jolzyfx]

@jywarren please can i be assigned this issue

[Jennifer-tech]

@jywarren please can I be assigned an issue