Import images from JSON which lack coordinates into sidebar

jywarren commented 1 year ago

Here, we skip over images which haven't been placed, when importing from a JSON file:

https://github.com/publiclab/Leaflet.DistortableImage/blob/4d6e626e1b8fcd84380446703f5aa94d7fa054a3/examples/js/archive.js#L328-L334

But, we could collect those images and add them to the sidebar, so people can continue to place them?

This isn't a priority or anything, just an idea!

7malikk commented 1 year ago

Hello, @jywarren I took a look into implementing this suggestion, and here's my result:

loadLegacyInSidebar

In the above GIF, I was able to load the two images that had no values in the nodes array

I extracted a part of the renderImages() making it reusable for both scenarios (i.e to display images from the regular IA URL and also from a legacy JSON file)

renderImages() now looks like this

renderImages = (args) => {
   args.forEach((file) => {
      renderAnImage(file, url)
   }
)}

where renderAnImage() handles the rendering of a single image on the sidebar

Observations

If you take a look at the pagination, it reads 0 of 0 - 0 which is its default value, this is because I did not tamper with the paginator class to create this, which leads to my next point
for a smoother/elegant display, considering a scenario where there are many images without node values, the paginator class would need to undergo a not-so-minimal refactor

What are your thoughts? @jywarren

jywarren commented 1 year ago

Hi, this looks great, and I want to say I think due to the way mapknitter had worked, I don't think there will be too many images for each map, and we can leave pagination out for this use case. But thank you for carefully considering it!

On Mon, Feb 27, 2023, 11:34 AM Malik @.***> wrote:

Hello, @jywarren https://github.com/jywarren I took a look into implementing this suggestion, and here's my result:

[image: loadLegacyInSidebar] https://user-images.githubusercontent.com/75104021/221619606-a3bf1ce0-7ec1-4271-a5a9-784a489c9e6a.gif

In the above GIF, I was able to load the two images that had no values in the nodes array

I extracted a part of the renderImages() making it reusable for both scenarios (i.e to display images from the regular IA URL and also from a legacy JSON file)

renderImages() now looks like this

renderImages = (args) => { args.forEach((file) => { renderAnImage(file, url) })}

where renderAnImage() handles the rendering of a single image on the sidebar Observations

If you take a look at the pagination, it reads 0 of 0 - 0 which is its default value, this is because I did not tamper with the paginator class to create this, which leads to my next point

for a smoother/elegant display, considering a scenario where there are many images without node values, the paginator class would need to undergo a not-so-minimal refactor

What are your thoughts? @jywarren https://github.com/jywarren

— Reply to this email directly, view it on GitHub https://github.com/publiclab/Leaflet.DistortableImage/issues/1363#issuecomment-1446654827, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAF6J7DSFZJRZORKGWIF53WZTJQPANCNFSM6AAAAAAVFELNRM . You are receiving this because you were mentioned.Message ID: @.***>

7malikk commented 1 year ago

Hi, this looks great, and I want to say I think due to the way mapknitter had worked, I don't think there will be too many images for each map, and we can leave pagination out for this use case. But thank you for carefully considering it!

Alright sounds great, will make a PR on it as soon as we finish up on the other one. Thanks!

publiclab / Leaflet.DistortableImage

Import images from JSON which lack coordinates into sidebar #1363

Observations