ImageMapper is a .NET application that scans configured folders for images, extracts metadata (including geolocation), and renders them on a map using a Blazor frontend. It is built with .NET Aspire to orchestrate its services and provide a seamless development experience.
This project has partly been an learning experience in using AI tools such as GitHub Copilot as a coding assistant. It is not an AI generated application, but rather a human-designed application where AI tools have been used occasionally to assist in the coding process, and other times purely human development.
It has also been an exercise in using Aspire as a hosting and orchestration tool for a .NET application, to learn about its capabilities and features.
The concepts here are not unique to .NET and could be implemented in any language or framework.
- .NET 10 (likely can be retargeted to work with .NET 8+)
- Aspire
- MetadataExtractor
- Leaflet.js
- openstreetmap.org
- 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
Set ImageMapper.AppHost as start up project and run (F5)
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
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
The folder for images can be configured via appsettings.json file in ImageMapper.Api project
{
"ImageFolder": "/path/to/your/images"
}or for multuple image folders:
{
"ImageFolders": [
"/path/to/your/images1",
"/path/to/your/images2"
]
}ImageFolder setting takes precedence over ImageFolders if both are present
Based on support in MetadataExtractor
- jpg / jpeg — JPEG Image
- png — Portable Network Graphics
- gif — Graphics Interchange Format
- bmp — Bitmap Image
- heic — High Efficiency Image Container
- heif — High Efficiency Image Format
- ico — Windows Icon File
- webp — WebP Image
- pcx — PC Paintbrush Image
- tif / tiff — Tagged Image File Format
- nef — Nikon Electronic Format (RAW)
- crw — Canon RAW (CRW)
- cr2 — Canon RAW (CR2)
- orf — Olympus RAW Image
- arw — Sony RAW Image
- raf — Fujifilm RAW Image
- srw — Samsung RAW Image
- x3f — Sigma RAW Image
- rw2 — Panasonic RAW Image
- rwl — Leica RAW Image
- dcr — Kodak RAW Image
- dng — Digital Negative (Adobe)