Tallinn Traffic Cameras Map

Live Demo

A fullscreen, interactive map of Tallinn's traffic cameras with selection persistence, optimized 16:9 presentation modes, and real-time image updates.

Features

• Interactive Map: Powered by Leaflet with grayscale tiles to make colorful camera markers stand out.
• Camera Stacking: Markers at the same intersection are automatically grouped into vertical "towers," ensuring every camera remains selectable.
• Dynamic Selection:
  • Toggle cameras via the sidebar or map popups.
  • Shift + Click on map markers to quickly toggle selection without opening popups.
  • Hovering over a marker or sidebar item highlights its counterpart with a 20% size increase and doubled border thickness.
• URL Persistence: The entire application state (map center, zoom, selected cameras, active presentation/focus modes) is synchronized with the URL hash for easy sharing and session restoration.
• Presentation Modes:
  • Grid View: Optimized 16:9 grid that automatically calculates the best layout. Switches to vertical scrolling for large selections to maintain readability.
  • Focus Mode: Large primary view for a specific camera with a centered 120px bottom navigation bar for quick switching between selected feeds.
• Real-time Updates: Active camera images (in popups, sidebar, or presentation modes) refresh every 1.5 seconds.
• Selection Filters: "Show Selected" toggle filters the map to only display your chosen cameras, with a "Focus Visible" button to instantly zoom to them.

Technical Details

• Data Source: Tallinn Traffic Cameras
• Geocoding: 250 cameras geocoded via OpenStreetMap/Overpass API.
• Tech Stack: Vanilla JavaScript, Leaflet.js, HTML5/CSS3.
• State Management: URL Hash-based (no backend required).

Installation & Usage

1. Clone the repository:

   git clone <repository-url>
   cd tallinn-cams

2. Start a local server: The application requires a local server to load the final_cameras.json data correctly due to CORS/file-protocol restrictions.

   python3 -m http.server 8000

3. Open the application: Visit http://localhost:8000 in your browser.

Files

• index.html: Main UI and styles.
• script.js: Map logic, stacking, state persistence, and presentation modes.
• final_cameras.json: The geocoded camera database.

Keyboard Shortcuts

• Shift + Click: Toggle camera selection on the map.
• Presentation Mode (Grid): Click any camera to enter Focus Mode.
• Focus Mode: Click the main image to return to the Grid View.