From a2705f4cccf4a5f97fa5d5a4d01fa49bb61e621d Mon Sep 17 00:00:00 2001
From: Tim Moore <tim.moore@ae35.co.uk>
Date: Fri, 27 Feb 2026 17:17:27 +0000
Subject: [PATCH 1/3] Add progress bar on image load

---
 .../Controllers/ImagesController.cs           |  7 ++++
 src/ImageMapper.Api/Services/IImageService.cs |  7 ++++
 src/ImageMapper.Api/Services/ImageService.cs  | 17 +++++++-
 .../Client/ImageItemFetcher.cs                | 10 +++++
 .../Components/Pages/Home.razor               | 42 +++++++++++++++++++
 .../Components/Pages/Home.razor.cs            | 23 ++++++++++
 6 files changed, 104 insertions(+), 2 deletions(-)

diff --git a/src/ImageMapper.Api/Controllers/ImagesController.cs b/src/ImageMapper.Api/Controllers/ImagesController.cs
index 05f4640..ce9eb91 100644
--- a/src/ImageMapper.Api/Controllers/ImagesController.cs
+++ b/src/ImageMapper.Api/Controllers/ImagesController.cs
@@ -19,6 +19,13 @@ public IAsyncEnumerable<ImageInfo> Get(CancellationToken ct)
         return _svc.GetImagesAsync(ct);
     }
 
+    [HttpGet("count")]
+    public async Task<ActionResult<int>> GetCount(CancellationToken ct)
+    {
+        var count = await _svc.GetImageCountAsync(ct);
+        return Ok(count);
+    }
+
     [HttpGet("raw/{**relativePath}")]
     public async Task<IActionResult> GetRaw(string relativePath, CancellationToken ct)
     {
diff --git a/src/ImageMapper.Api/Services/IImageService.cs b/src/ImageMapper.Api/Services/IImageService.cs
index 5019260..c3a55a1 100644
--- a/src/ImageMapper.Api/Services/IImageService.cs
+++ b/src/ImageMapper.Api/Services/IImageService.cs
@@ -27,4 +27,11 @@ public interface IImageService
     /// null if the image could not be found.</returns>
     /// <exception cref="PathTraversalException">Thrown when the provided relative path is invalid or attempts to traverse outside the allowed directory.</exception>"
     Task<byte[]?> GetImageBytesAsync(string relativePath, CancellationToken ct = default);
+
+    /// <summary>
+    /// Asynchronously retrieves the total count of image files.
+    /// </summary>
+    /// <param name="ct">A cancellation token that can be used to cancel the operation.</param>
+    /// <returns>The total count of image files.</returns>
+    Task<int> GetImageCountAsync(CancellationToken ct = default);
 }
diff --git a/src/ImageMapper.Api/Services/ImageService.cs b/src/ImageMapper.Api/Services/ImageService.cs
index 94b878a..72c509c 100644
--- a/src/ImageMapper.Api/Services/ImageService.cs
+++ b/src/ImageMapper.Api/Services/ImageService.cs
@@ -67,11 +67,11 @@ public async IAsyncEnumerable<ImageInfo> GetImagesAsync([EnumeratorCancellation]
         var full = Path.Combine(_imagesRoot, normalized);
         var fullPath = Path.GetFullPath(full);
         var rootPath = Path.GetFullPath(_imagesRoot);
-        
+
         // Ensure rootPath ends with separator for proper boundary checking
         if (!rootPath.EndsWith(Path.DirectorySeparatorChar))
             rootPath += Path.DirectorySeparatorChar;
-        
+
         // Validate that the resolved path is within the root directory
         if (!fullPath.StartsWith(rootPath, StringComparison.OrdinalIgnoreCase))
         {
@@ -83,4 +83,17 @@ public async IAsyncEnumerable<ImageInfo> GetImagesAsync([EnumeratorCancellation]
 
         return await File.ReadAllBytesAsync(fullPath, ct);
     }
+
+    public Task<int> GetImageCountAsync(CancellationToken ct = default)
+    {
+        if (!System.IO.Directory.Exists(_imagesRoot))
+            return Task.FromResult(0);
+
+        var extensions = new[] { ".jpg", ".jpeg", ".png", ".tif", ".tiff", ".nef" };
+
+        var count = System.IO.Directory.EnumerateFiles(_imagesRoot, "*.*", SearchOption.AllDirectories)
+            .Count(f => extensions.Contains(Path.GetExtension(f).ToLowerInvariant()));
+
+        return Task.FromResult(count);
+    }
 }
diff --git a/src/ImageMapper.Web/Client/ImageItemFetcher.cs b/src/ImageMapper.Web/Client/ImageItemFetcher.cs
index 0daaeb7..82ab000 100644
--- a/src/ImageMapper.Web/Client/ImageItemFetcher.cs
+++ b/src/ImageMapper.Web/Client/ImageItemFetcher.cs
@@ -1,9 +1,19 @@
 using ImageMapper.Models;
+using System.Net.Http.Json;
 
 namespace ImageMapper.Web.Client
 {
     public class ImageItemFetcher(HttpClient httpClient)
     {
+        /// <summary>
+        /// Fetch the total count of available images
+        /// </summary>
+        /// <returns>The total count of images</returns>
+        public async Task<int> FetchImageCount(CancellationToken ct = default)
+        {
+            return await httpClient.GetFromJsonAsync<int>("/api/images/count", ct);
+        }
+
         /// <summary>
         /// Fetch list of available images with metadata, streamed as async enumerable
         /// </summary>
diff --git a/src/ImageMapper.Web/Components/Pages/Home.razor b/src/ImageMapper.Web/Components/Pages/Home.razor
index fec100d..7b84b5d 100644
--- a/src/ImageMapper.Web/Components/Pages/Home.razor
+++ b/src/ImageMapper.Web/Components/Pages/Home.razor
@@ -8,6 +8,18 @@
 
 <div id="map" style="height:700px;"></div>
 
+<!-- Progress bar section -->
+<div id="progressContainer" style="margin-top: 20px; display: none;">
+    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
+        <span id="progressText" style="font-weight: 500; min-width: 150px;">Loading images...</span>
+        <div style="flex: 1; background-color: #e0e0e0; border-radius: 4px; height: 24px; overflow: hidden;">
+            <div id="progressBar" style="width: 0%; height: 100%; background-color: #4CAF50; transition: width 0.3s ease; display: flex; align-items: center; justify-content: center;">
+                <span id="progressPercentage" style="color: white; font-size: 12px; font-weight: bold;"></span>
+            </div>
+        </div>
+    </div>
+</div>
+
 <!-- Full-size image modal -->
 <div id="imageModal" class="image-modal" style="display: none;">
     <span class="close">&times;</span>
@@ -128,4 +140,34 @@
             markerClusterGroup.addLayer(marker);
         }
     }
+
+    window.showProgressContainer = function() {
+        const container = document.getElementById('progressContainer');
+        if (container) {
+            container.style.display = 'block';
+        }
+    }
+
+    window.hideProgressContainer = function() {
+        const container = document.getElementById('progressContainer');
+        if (container) {
+            container.style.display = 'none';
+        }
+    }
+
+    window.updateProgress = function(loaded, total, percentage) {
+        const progressBar = document.getElementById('progressBar');
+        const progressPercentage = document.getElementById('progressPercentage');
+        const progressText = document.getElementById('progressText');
+
+        if (progressBar) {
+            progressBar.style.width = percentage + '%';
+        }
+        if (progressPercentage) {
+            progressPercentage.textContent = percentage + '%';
+        }
+        if (progressText) {
+            progressText.textContent = `Loading images... (${loaded}/${total})`;
+        }
+    }
 </script>
\ No newline at end of file
diff --git a/src/ImageMapper.Web/Components/Pages/Home.razor.cs b/src/ImageMapper.Web/Components/Pages/Home.razor.cs
index 9ab05ae..dc77dd2 100644
--- a/src/ImageMapper.Web/Components/Pages/Home.razor.cs
+++ b/src/ImageMapper.Web/Components/Pages/Home.razor.cs
@@ -6,11 +6,22 @@ namespace ImageMapper.Web.Components.Pages
     public partial class Home
     {
         private readonly CancellationTokenSource cts = new();
+        private int totalImages = 0;
+        private int imagesLoaded = 0;
 
         protected override async Task OnAfterRenderAsync(bool firstRender)
         {
             if (firstRender)
             {
+                // Fetch total image count
+                totalImages = await imageFetcher.FetchImageCount(cts.Token);
+
+                // Show progress container if there are images
+                if (totalImages > 0)
+                {
+                    await JS.InvokeVoidAsync("showProgressContainer");
+                }
+
                 // Initialize the map with cluster grouping
                 await JS.InvokeVoidAsync("initClusterMap", cts.Token);
 
@@ -31,13 +42,25 @@ await JS.InvokeVoidAsync("addMarkerToMap",
                             Url = $"/api/images/raw/{Uri.EscapeDataString(image.RelativePath)}"
                         });
 
+                    imagesLoaded++;
                     batchCount++;
+
+                    // Update progress bar
+                    if (totalImages > 0)
+                    {
+                        int percentage = (int)((imagesLoaded * 100) / totalImages);
+                        await JS.InvokeVoidAsync("updateProgress", imagesLoaded, totalImages, percentage);
+                    }
+
                     if (batchCount % batchSize == 0)
                     {
                         StateHasChanged();
                     }
                 }
 
+                // Hide progress container when done
+                await JS.InvokeVoidAsync("hideProgressContainer");
+
                 // Final update to ensure UI is synchronized
                 StateHasChanged();
             }

From 931ff2c40eae3b0b9d87ed900c5047c82bb4d5d5 Mon Sep 17 00:00:00 2001
From: Tim Moore <tim.moore@ae35.co.uk>
Date: Fri, 27 Feb 2026 17:49:56 +0000
Subject: [PATCH 2/3] Add total and skipped count when images loaded

---
 README.md                                     |  7 ++---
 .../Components/Pages/Home.razor               | 29 +++++++++++++++++++
 .../Components/Pages/Home.razor.cs            |  9 +++++-
 3 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index ff73224..d719873 100644
--- a/README.md
+++ b/README.md
@@ -63,11 +63,10 @@ The folder for images can be configured via `appsettings.json` file in ImageMapp
 
 ## TODO
 
-- Click to show full size image and optionally metadata details / path
-- Show progress when loading images
-- Abstract file enumeration and loading to allow varied sources not just a file folder
+- Support multiple image folders
 - Caching. Memory and/or stored cache of processed image metadata to speed up subsequent loads and reduce processing on each request. Would need to detect changes however.
-- Configurable map tile provider options?
 - UI improvements, filtering etc
 - Error handling and logging improvements
 - Container support
+- Configurable map tile provider options?
+- Support for varied image sources not just a file folder
diff --git a/src/ImageMapper.Web/Components/Pages/Home.razor b/src/ImageMapper.Web/Components/Pages/Home.razor
index 7b84b5d..23dc1d5 100644
--- a/src/ImageMapper.Web/Components/Pages/Home.razor
+++ b/src/ImageMapper.Web/Components/Pages/Home.razor
@@ -8,6 +8,12 @@
 
 <div id="map" style="height:700px;"></div>
 
+<!-- Image count section -->
+<div id="imageCountContainer" style="margin-top: 15px; padding: 10px; background-color: #f5f5f5; border-radius: 4px; display: none;">
+    <span id="imageCountText" style="font-size: 14px; color: #333;">Total images on map: <strong id="imageCountValue">0</strong></span>
+    <span id="skippedCountText" style="font-size: 14px; color: #666; margin-left: 20px; display: none;">Skipped: <strong id="skippedCountValue">0</strong></span>
+</div>
+
 <!-- Progress bar section -->
 <div id="progressContainer" style="margin-top: 20px; display: none;">
     <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
@@ -155,6 +161,29 @@
         }
     }
 
+    window.updateImageCount = function(count, skipped = 0) {
+        const countValue = document.getElementById('imageCountValue');
+        const countContainer = document.getElementById('imageCountContainer');
+        const skippedCountText = document.getElementById('skippedCountText');
+        const skippedCountValue = document.getElementById('skippedCountValue');
+
+        if (countValue) {
+            countValue.textContent = count;
+        }
+        if (countContainer && count > 0) {
+            countContainer.style.display = 'block';
+        }
+
+        if (skipped > 0) {
+            if (skippedCountValue) {
+                skippedCountValue.textContent = skipped;
+            }
+            if (skippedCountText) {
+                skippedCountText.style.display = 'inline';
+            }
+        }
+    }
+
     window.updateProgress = function(loaded, total, percentage) {
         const progressBar = document.getElementById('progressBar');
         const progressPercentage = document.getElementById('progressPercentage');
diff --git a/src/ImageMapper.Web/Components/Pages/Home.razor.cs b/src/ImageMapper.Web/Components/Pages/Home.razor.cs
index dc77dd2..f3747b1 100644
--- a/src/ImageMapper.Web/Components/Pages/Home.razor.cs
+++ b/src/ImageMapper.Web/Components/Pages/Home.razor.cs
@@ -7,6 +7,7 @@ public partial class Home
     {
         private readonly CancellationTokenSource cts = new();
         private int totalImages = 0;
+        private int skippedImages = 0;
         private int imagesLoaded = 0;
 
         protected override async Task OnAfterRenderAsync(bool firstRender)
@@ -30,8 +31,11 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
                 int batchCount = 0;
                 await foreach (ImageInfo? image in imageFetcher.Fetch(cts.Token))
                 {
-                    if (image == null)
+                    if (image == null || image.Longitude == null || image.Latitude == null)
+                    {
+                        skippedImages++;
                         continue;
+                    }
 
                     await JS.InvokeVoidAsync("addMarkerToMap",
                         new
@@ -61,6 +65,9 @@ await JS.InvokeVoidAsync("addMarkerToMap",
                 // Hide progress container when done
                 await JS.InvokeVoidAsync("hideProgressContainer");
 
+                // Update image count with skipped count if any
+                await JS.InvokeVoidAsync("updateImageCount", imagesLoaded, skippedImages);
+
                 // Final update to ensure UI is synchronized
                 StateHasChanged();
             }

From b86d0aa300a6b1590daca31d26468fc1ecafcd8d Mon Sep 17 00:00:00 2001
From: Tim Moore <tim.moore@ae35.co.uk>
Date: Fri, 27 Feb 2026 17:59:20 +0000
Subject: [PATCH 3/3] Use static for list of valid file extensions

---
 README.md                                      |  1 +
 src/ImageMapper.Api/Services/ImageService.cs   | 10 ++++------
 src/ImageMapper.Web/Client/ImageItemFetcher.cs |  1 -
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index d719873..19ff7ff 100644
--- a/README.md
+++ b/README.md
@@ -64,6 +64,7 @@ The folder for images can be configured via `appsettings.json` file in ImageMapp
 ## TODO
 
 - Support multiple image folders
+- CSS improvements - SASS and/or Blazor CSS isolation. Not embedded in JS
 - Caching. Memory and/or stored cache of processed image metadata to speed up subsequent loads and reduce processing on each request. Would need to detect changes however.
 - UI improvements, filtering etc
 - Error handling and logging improvements
diff --git a/src/ImageMapper.Api/Services/ImageService.cs b/src/ImageMapper.Api/Services/ImageService.cs
index 72c509c..9f1b276 100644
--- a/src/ImageMapper.Api/Services/ImageService.cs
+++ b/src/ImageMapper.Api/Services/ImageService.cs
@@ -12,6 +12,8 @@ public class ImageService : IImageService
     private readonly IConfiguration _config;
     private readonly string _imagesRoot;
 
+    private static readonly string[] ValidExtensions = [".jpg", ".jpeg", ".png", ".tif", ".tiff", ".nef"];
+
     public ImageService(IConfiguration config)
     {
         _config = config;
@@ -25,10 +27,8 @@ public async IAsyncEnumerable<ImageInfo> GetImagesAsync([EnumeratorCancellation]
         if (!System.IO.Directory.Exists(_imagesRoot))
             yield break;
 
-        var extensions = new[] { ".jpg", ".jpeg", ".png", ".tif", ".tiff", ".nef" };
-
         var files = System.IO.Directory.EnumerateFiles(_imagesRoot, "*.*", SearchOption.AllDirectories)
-            .Where(f => extensions.Contains(Path.GetExtension(f).ToLowerInvariant()));
+            .Where(f => ValidExtensions.Contains(Path.GetExtension(f).ToLowerInvariant()));
 
         foreach (string f in files)
         {
@@ -89,10 +89,8 @@ public Task<int> GetImageCountAsync(CancellationToken ct = default)
         if (!System.IO.Directory.Exists(_imagesRoot))
             return Task.FromResult(0);
 
-        var extensions = new[] { ".jpg", ".jpeg", ".png", ".tif", ".tiff", ".nef" };
-
         var count = System.IO.Directory.EnumerateFiles(_imagesRoot, "*.*", SearchOption.AllDirectories)
-            .Count(f => extensions.Contains(Path.GetExtension(f).ToLowerInvariant()));
+            .Count(f => ValidExtensions.Contains(Path.GetExtension(f).ToLowerInvariant()));
 
         return Task.FromResult(count);
     }
diff --git a/src/ImageMapper.Web/Client/ImageItemFetcher.cs b/src/ImageMapper.Web/Client/ImageItemFetcher.cs
index 82ab000..0585406 100644
--- a/src/ImageMapper.Web/Client/ImageItemFetcher.cs
+++ b/src/ImageMapper.Web/Client/ImageItemFetcher.cs
@@ -1,5 +1,4 @@
 using ImageMapper.Models;
-using System.Net.Http.Json;
 
 namespace ImageMapper.Web.Client
 {