🇦🇿 Wiki Loves Monuments Azerbaijan - Interactive Map

WLMAZ is a full-stack mapping application designed to help contributors discover heritage monuments in Azerbaijan and upload photos directly to Wikimedia Commons.

It features a responsive, clustered map interface powered by Vue 3 and Leaflet, backed by a secure Node.js proxy that handles MediaWiki OAuth authentication and uploads.

✨ Features

🗺️ Interactive Map

• High-Performance Clustering: Handles thousands of monument points using Leaflet.markercluster with chunked loading.
• Visual Status: Markers are color-coded (Green = Has Image, Blue = Needs Image).
• Deep Linking: Share specific monuments via URL parameters (e.g., ?inventory=4810).
• Responsive Sidebar: Detailed view of monuments using leaflet-sidebar-v2, fully optimized for mobile devices.
• Rich Metadata: Displays Wikidata IDs, Wikipedia links, and automatic image credits.

🔐 Authentication & Uploads

• MediaWiki OAuth 1.0a: Secure login using existing Wikimedia accounts.
• Direct Uploads: Upload photos to Wikimedia Commons directly from the interface.
• Session Management: Supports both Memory (Dev) and Redis (Production) session stores.

🚀 Getting Started

Prerequisites

• Node.js: v20.6.0 or higher (Required for --env-file support).
• pnpm: Recommended package manager.
• Docker: For running Redis locally.

1. Clone & Install

git clone https://github.com/nemoralis/wlmaz.git
cd wlmaz
pnpm install

2. Environment Setup

Create a .env file in the root directory:

PORT=3000
NODE_ENV=development
CLIENT_URL=http://localhost:5173

# Authentication (Get these from Special:OAuthConsumerRegistration on Commons)
WM_CONSUMER_KEY=your_consumer_key
WM_CONSUMER_SECRET=your_consumer_secret
SESSION_SECRET=your_complex_random_string

REDIS_URL=redis://localhost:6379

3. Run Development Server

This command runs both the Vite Frontend and the Express Backend concurrently.

pnpm run dev

• Frontend: http://localhost:5173
• Backend: http://localhost:3000

🐳 Deployment (Docker)

The application is containerized and can be deployed as a single unit.

# Build and run with Docker
docker build -t wlmaz .
docker run -p 3000:3000 -e REDIS_URL=redis://host.docker.internal:6379 wlmaz

🛠️ Tech Stack

• Frontend: Vue 3, TypeScript, Vite, Pinia, TailwindCSS
• Map: Leaflet, Leaflet.markercluster, geobuf
• Backend: Node.js, Express
• Database/Cache: Redis
• Authentication: Passport.js (MediaWiki OAuth)

🏗️ Architecture

The project is a Monorepo-style structure where Frontend and Backend live together but are served separately.

wlmaz/
├── public/             # Static assets (GeoJSON, Logos)
├── src/
│   ├── auth/           # Passport.js & OAuth Logic
│   ├── components/     # Vue Components (MonumentMap, UploadModal)
│   ├── composables/    # Vue Composables (useAuth, useMap)
│   ├── pages/          # Views (Home, About)
│   ├── routes/         # Express API Routes
│   ├── stores/         # Pinia State (Auth)
│   ├── types/          # Shared TypeScript Interfaces
│   ├── utils/          # Helper functions
│   ├── workers/        # Web Workers for heavy processing
│   ├── index.ts        # Backend Entry Point
│   └── main.ts         # Frontend Entry Point
└── vite.config.ts      # Vite Configuration

📜 Scripts

• pnpm run dev: Run both frontend and backend in development mode.
• pnpm run build: Type-check and build the frontend for production.
• pnpm run preview: Preview the production build locally.
• pnpm run convert-data: Convert monuments.geojson to monuments.pbf (Protocol Buffers) for faster loading.
• pnpm run lint: Lint and fix files.
• pnpm run format: Format files with Prettier.

🤝 Contributing

Contributions are welcome! Please feel free to submit a PR.