ImageMapper

ImageMapper is a server hosted application that processes images from a configured server folder and maps them based on geotagged metadata within the images.

This application is built using .NET and leverages the Leaflet.js library for map rendering

Initial development has partly been an experiment in using AI tools to assist in code generation, architecture design, and unit test creation. With strict human review and modification to ensure quality and correctness.

Dependencies

• .NET 10 (likely will work with .NET 8+)
• Aspire
• MetadataExtractor
• Leaflet.js
• openstreetmap.org

Components

• ImageMapper.Api - Back end API that fetches and processes image data
• ImageMapper.Web - Front end .NET Blazor web app that produces the UI to render the data on a map
• ImageMapper.Models - .NET class library of shared models
• ImageMapper.AppHost - .NET Aspire orchestrator to run and debug in a development environment
• ImageMapper.ServiceDefaults - Extensions for .NET Aspire support including service discovery, health checks and telemetry

Running development environment

Visual Studio

Set ImageMapper.AppHost as start up project and run (F5)

Visual Studio Code

Install Aspire CLI - https://learn.microsoft.com/en-us/dotnet/aspire/cli/install

Install Aspire Extension - https://learn.microsoft.com/en-us/dotnet/aspire/fundamentals/aspire-vscode-extension

Run with F5 or Run -> Start Debugging

Alternatively without the Aspire CLI / Extension, from Solution Explorer right click ImageMapper.AppHost and select Debug -> Start New Instance

Command Line

Install Aspire CLI - https://learn.microsoft.com/en-us/dotnet/aspire/cli/install

Run aspire run

Alternatively without Aspire CLI, run dotnet run --project ImageMapper.AppHost

This will run the .NET Aspire host, launching the components and dashboard in the browser showing the service status.

Launch the front end application from imagemapper-web link

Configuration

The folder for images can be configured via appsettings.json file in ImageMapper.Api project

{
  "ImageFolder": "/path/to/your/images"
}

TODO

• Restore cluster grouping of markers when dynamically loading images
• Show progress when loading images
• Potential for optimising Leaflet rendering, only render markers in view etc? Would need back-end to cache image locations and support querying by bounding box?
• Abstract file enumeration and loading to allow varied sources not just a file folder
• Caching
• Configure map tile provider options
• UI improvements, filtering etc
• Error handling and logging improvements
• Container support