diff --git a/examples/archive.html b/examples/archive.html
index 5bd1d62ab..3f1ec716a 100644
--- a/examples/archive.html
+++ b/examples/archive.html
@@ -15,6 +15,7 @@
+
@@ -57,7 +58,8 @@ Images
-
No images yet...
+
No link = No images...
+
Images
let form = document.getElementById('form');
let input = document.getElementById('input');
let responseText = document.getElementById('response');
+ let imageContainer = document.getElementById('imgContainer');
const setupMap = () => {
map = L.map('map').setView([51.505, -0.09], 13);
@@ -77,23 +80,52 @@ Images
map.addGoogleMutant();
- map.whenReady(function() {
+ map.whenReady(() => {
new bootstrap.Modal(welcomeModal).show();
});
}
setupMap();
-
- welcomeModal.addEventListener('hidden.bs.modal', function (event) {
- new bootstrap.Offcanvas(sidebar).show();
- });
- form.addEventListener('submit', function(event){
- console.log('here');
+ form.addEventListener('submit', (event) => {
event.preventDefault();
- bootstrap.Modal.getInstance(welcomeModal).hide();
- responseText.innerHTML = input.value
- });
+ const url = input.value.replace('details', 'metadata');
+ axios.get(url)
+ .then((response) => {
+ if (response.data.files && response.data.files.length != 0) {
+ let imageCount = 0;
+ response.data.files.forEach(file => {
+ if (file.format === 'PNG' || file.format === 'JPEG'){
+ let imageRow = document.createElement('div');
+ let image = new Image(150, 150);
+ let placeButton = document.createElement('a');
+
+ placeButton.classList.add('btn', 'btn-sm', 'btn-outline-secondary');
+ placeButton.innerHTML = 'Place on map';
+ image.src = `${url.replace('metadata', 'download')}/${file.name}`;
+ imageRow.classList.add('d-flex', 'justify-content-between', 'align-items-center', 'mb-4', 'pe-5');
+ imageRow.append(image, placeButton);
+
+ imageContainer.appendChild(imageRow);
+ imageCount++;
+ }
+ });
+ responseText.innerHTML = imageCount ? `${imageCount} image(s) fetched successfully.` : 'No images found in the link provided...'
+ } else {
+ responseText.innerHTML = 'No images found in the link provided...'
+ }
+ })
+ .catch((error) => {
+ responseText.innerHTML = 'Uh-oh! Something\'s not right with the link provided!'
+ })
+ .finally(() => {
+ bootstrap.Modal.getInstance(welcomeModal).hide();
+ });
+ });
+
+ welcomeModal.addEventListener('hidden.bs.modal', (event) => {
+ new bootstrap.Offcanvas(sidebar).show();
+ });