diff --git a/app/assets/stylesheets/maps_v2.css b/app/assets/stylesheets/maps_maplibre.css
similarity index 100%
rename from app/assets/stylesheets/maps_v2.css
rename to app/assets/stylesheets/maps_maplibre.css
diff --git a/app/assets/stylesheets/maps_v2_panel.css b/app/assets/stylesheets/maps_maplibre_panel.css
similarity index 100%
rename from app/assets/stylesheets/maps_v2_panel.css
rename to app/assets/stylesheets/maps_maplibre_panel.css
diff --git a/app/controllers/maps_v2_controller.rb b/app/controllers/maps/maplibre_controller.rb
similarity index 66%
rename from app/controllers/maps_v2_controller.rb
rename to app/controllers/maps/maplibre_controller.rb
index ad275a8d..302f3a54 100644
--- a/app/controllers/maps_v2_controller.rb
+++ b/app/controllers/maps/maplibre_controller.rb
@@ -1,11 +1,12 @@
-class MapsV2Controller < ApplicationController
-  before_action :authenticate_user!
-  layout 'map'
+module Maps
+  class MaplibreController < ApplicationController
+    before_action :authenticate_user!
+    layout 'map'
 
-  def index
-    @start_at = parsed_start_at
-    @end_at = parsed_end_at
-  end
+    def index
+      @start_at = parsed_start_at
+      @end_at = parsed_end_at
+    end
 
   private
 
@@ -28,4 +29,5 @@ class MapsV2Controller < ApplicationController
   def parsed_end_at
     Time.zone.at(end_at)
   end
+  end
 end
diff --git a/app/controllers/maps_controller.rb b/app/controllers/maps_controller.rb
new file mode 100644
index 00000000..e1f31898
--- /dev/null
+++ b/app/controllers/maps_controller.rb
@@ -0,0 +1,5 @@
+class MapsController < ApplicationController
+  def index
+    redirect_to maps_maplibre_path
+  end
+end
diff --git a/app/javascript/README.md b/app/javascript/README.md
index f33e5474..42f99b93 100644
--- a/app/javascript/README.md
+++ b/app/javascript/README.md
@@ -1,6 +1,6 @@
 # Dawarich JavaScript Architecture
 
-This document provides a comprehensive guide to the JavaScript architecture used in the Dawarich application, with a focus on the Maps V2 implementation.
+This document provides a comprehensive guide to the JavaScript architecture used in the Dawarich application, with a focus on the Maps (MapLibre) implementation.
 
 ## Table of Contents
 
@@ -9,13 +9,13 @@ This document provides a comprehensive guide to the JavaScript architecture used
 - [Architecture Patterns](#architecture-patterns)
 - [Directory Structure](#directory-structure)
 - [Core Concepts](#core-concepts)
-- [Maps V2 Architecture](#maps-v2-architecture)
+- [Maps (MapLibre) Architecture](#maps-v2-architecture)
 - [Creating New Features](#creating-new-features)
 - [Best Practices](#best-practices)
 
 ## Overview
 
-Dawarich uses a modern JavaScript architecture built on **Hotwire (Turbo + Stimulus)** for page interactions and **MapLibre GL JS** for map rendering. The Maps V2 implementation follows object-oriented principles with clear separation of concerns.
+Dawarich uses a modern JavaScript architecture built on **Hotwire (Turbo + Stimulus)** for page interactions and **MapLibre GL JS** for map rendering. The Maps (MapLibre) implementation follows object-oriented principles with clear separation of concerns.
 
 ## Technology Stack
 
@@ -61,7 +61,7 @@ export default class extends Controller {
 
 **Purpose:** Encapsulate business logic and API communication
 
-**Location:** `app/javascript/maps_v2/services/`
+**Location:** `app/javascript/maps_maplibre/services/`
 
 **Pattern:**
 ```javascript
@@ -89,7 +89,7 @@ export class ApiClient {
 
 **Purpose:** Manage map visualization layers
 
-**Location:** `app/javascript/maps_v2/layers/`
+**Location:** `app/javascript/maps_maplibre/layers/`
 
 **Pattern:**
 ```javascript
@@ -129,7 +129,7 @@ export class CustomLayer extends BaseLayer {
 
 **Purpose:** Provide reusable helper functions
 
-**Location:** `app/javascript/maps_v2/utils/`
+**Location:** `app/javascript/maps_maplibre/utils/`
 
 **Pattern:**
 ```javascript
@@ -147,7 +147,7 @@ export const utilityInstance = new UtilityClass()
 
 **Purpose:** Reusable UI components
 
-**Location:** `app/javascript/maps_v2/components/`
+**Location:** `app/javascript/maps_maplibre/components/`
 
 **Pattern:**
 ```javascript
@@ -164,15 +164,15 @@ export class PopupFactory {
 app/javascript/
 ├── application.js              # Entry point
 ├── controllers/                # Stimulus controllers
-│   ├── maps_v2_controller.js   # Main map controller
-│   ├── maps_v2/                # Controller modules
+│   ├── maps/maplibre_controller.js   # Main map controller
+│   ├── maps_maplibre/                # Controller modules
 │   │   ├── layer_manager.js    # Layer lifecycle management
 │   │   ├── data_loader.js      # API data fetching
 │   │   ├── event_handlers.js   # Map event handling
 │   │   ├── filter_manager.js   # Data filtering
 │   │   └── date_manager.js     # Date range management
 │   └── ...                     # Other controllers
-├── maps_v2/                    # Maps V2 implementation
+├── maps_maplibre/                    # Maps (MapLibre) implementation
 │   ├── layers/                 # Map layer classes
 │   │   ├── base_layer.js       # Abstract base class
 │   │   ├── points_layer.js     # Point markers
@@ -206,7 +206,7 @@ app/javascript/
 
 ### Manager Pattern
 
-The Maps V2 controller delegates responsibilities to specialized managers:
+The Maps (MapLibre) controller delegates responsibilities to specialized managers:
 
 1. **LayerManager** - Layer lifecycle (add/remove/toggle/update)
 2. **DataLoader** - API data fetching and transformation
@@ -277,7 +277,7 @@ map.on('click', 'layer-id', (e) => {
 })
 ```
 
-## Maps V2 Architecture
+## Maps (MapLibre) Architecture
 
 ### Layer Hierarchy
 
@@ -393,7 +393,7 @@ All data is transformed to GeoJSON before rendering:
 
 ### Adding a New Layer
 
-1. **Create layer class** in `app/javascript/maps_v2/layers/`:
+1. **Create layer class** in `app/javascript/maps_maplibre/layers/`:
 
 ```javascript
 import { BaseLayer } from './base_layer'
@@ -422,10 +422,10 @@ export class NewLayer extends BaseLayer {
 }
 ```
 
-2. **Register in LayerManager** (`controllers/maps_v2/layer_manager.js`):
+2. **Register in LayerManager** (`controllers/maps_maplibre/layer_manager.js`):
 
 ```javascript
-import { NewLayer } from 'maps_v2/layers/new_layer'
+import { NewLayer } from 'maps_maplibre/layers/new_layer'
 
 // In addAllLayers method
 _addNewLayer(dataGeoJSON) {
@@ -528,7 +528,7 @@ export const newManager = new NewManager()
 2. **Import and use:**
 
 ```javascript
-import { NewUtility } from 'maps_v2/utils/new_utility'
+import { NewUtility } from 'maps_maplibre/utils/new_utility'
 
 const result = NewUtility.calculate(input)
 ```
@@ -705,19 +705,19 @@ When updating features, follow this pattern:
 
 ### Complete Layer Implementation
 
-See `app/javascript/maps_v2/layers/heatmap_layer.js` for a simple example.
+See `app/javascript/maps_maplibre/layers/heatmap_layer.js` for a simple example.
 
 ### Complete Utility Implementation
 
-See `app/javascript/maps_v2/utils/settings_manager.js` for state management.
+See `app/javascript/maps_maplibre/utils/settings_manager.js` for state management.
 
 ### Complete Service Implementation
 
-See `app/javascript/maps_v2/services/api_client.js` for API communication.
+See `app/javascript/maps_maplibre/services/api_client.js` for API communication.
 
 ### Complete Controller Implementation
 
-See `app/javascript/controllers/maps_v2_controller.js` for orchestration.
+See `app/javascript/controllers/maps/maplibre_controller.js` for orchestration.
 
 ---
 
diff --git a/app/javascript/controllers/area_drawer_controller.js b/app/javascript/controllers/area_drawer_controller.js
index 94bd1870..d1005866 100644
--- a/app/javascript/controllers/area_drawer_controller.js
+++ b/app/javascript/controllers/area_drawer_controller.js
@@ -1,5 +1,5 @@
 import { Controller } from '@hotwired/stimulus'
-import { createCircle, calculateDistance } from 'maps_v2/utils/geometry'
+import { createCircle, calculateDistance } from 'maps_maplibre/utils/geometry'
 
 /**
  * Area drawer controller
diff --git a/app/javascript/controllers/area_selector_controller.js b/app/javascript/controllers/area_selector_controller.js
index 4565df1b..433ca71d 100644
--- a/app/javascript/controllers/area_selector_controller.js
+++ b/app/javascript/controllers/area_selector_controller.js
@@ -1,5 +1,5 @@
 import { Controller } from '@hotwired/stimulus'
-import { createRectangle } from 'maps_v2/utils/geometry'
+import { createRectangle } from 'maps_maplibre/utils/geometry'
 
 /**
  * Area selector controller
diff --git a/app/javascript/controllers/maps_v2/area_selection_manager.js b/app/javascript/controllers/maps/maplibre/area_selection_manager.js
similarity index 98%
rename from app/javascript/controllers/maps_v2/area_selection_manager.js
rename to app/javascript/controllers/maps/maplibre/area_selection_manager.js
index 699be9ea..16c189ab 100644
--- a/app/javascript/controllers/maps_v2/area_selection_manager.js
+++ b/app/javascript/controllers/maps/maplibre/area_selection_manager.js
@@ -1,8 +1,8 @@
-import { SelectionLayer } from 'maps_v2/layers/selection_layer'
-import { SelectedPointsLayer } from 'maps_v2/layers/selected_points_layer'
-import { pointsToGeoJSON } from 'maps_v2/utils/geojson_transformers'
-import { VisitCard } from 'maps_v2/components/visit_card'
-import { Toast } from 'maps_v2/components/toast'
+import { SelectionLayer } from 'maps_maplibre/layers/selection_layer'
+import { SelectedPointsLayer } from 'maps_maplibre/layers/selected_points_layer'
+import { pointsToGeoJSON } from 'maps_maplibre/utils/geojson_transformers'
+import { VisitCard } from 'maps_maplibre/components/visit_card'
+import { Toast } from 'maps_maplibre/components/toast'
 
 /**
  * Manages area selection and bulk operations for Maps V2
diff --git a/app/javascript/controllers/maps_v2/data_loader.js b/app/javascript/controllers/maps/maplibre/data_loader.js
similarity index 95%
rename from app/javascript/controllers/maps_v2/data_loader.js
rename to app/javascript/controllers/maps/maplibre/data_loader.js
index 2a6b1141..8b583cc0 100644
--- a/app/javascript/controllers/maps_v2/data_loader.js
+++ b/app/javascript/controllers/maps/maplibre/data_loader.js
@@ -1,7 +1,7 @@
-import { pointsToGeoJSON } from 'maps_v2/utils/geojson_transformers'
-import { RoutesLayer } from 'maps_v2/layers/routes_layer'
-import { createCircle } from 'maps_v2/utils/geometry'
-import { performanceMonitor } from 'maps_v2/utils/performance_monitor'
+import { pointsToGeoJSON } from 'maps_maplibre/utils/geojson_transformers'
+import { RoutesLayer } from 'maps_maplibre/layers/routes_layer'
+import { createCircle } from 'maps_maplibre/utils/geometry'
+import { performanceMonitor } from 'maps_maplibre/utils/performance_monitor'
 
 /**
  * Handles loading and transforming data from API
diff --git a/app/javascript/controllers/maps_v2/date_manager.js b/app/javascript/controllers/maps/maplibre/date_manager.js
similarity index 100%
rename from app/javascript/controllers/maps_v2/date_manager.js
rename to app/javascript/controllers/maps/maplibre/date_manager.js
diff --git a/app/javascript/controllers/maps_v2/event_handlers.js b/app/javascript/controllers/maps/maplibre/event_handlers.js
similarity index 87%
rename from app/javascript/controllers/maps_v2/event_handlers.js
rename to app/javascript/controllers/maps/maplibre/event_handlers.js
index 418c5f47..d63573d7 100644
--- a/app/javascript/controllers/maps_v2/event_handlers.js
+++ b/app/javascript/controllers/maps/maplibre/event_handlers.js
@@ -1,7 +1,7 @@
 import maplibregl from 'maplibre-gl'
-import { PopupFactory } from 'maps_v2/components/popup_factory'
-import { VisitPopupFactory } from 'maps_v2/components/visit_popup'
-import { PhotoPopupFactory } from 'maps_v2/components/photo_popup'
+import { PopupFactory } from 'maps_maplibre/components/popup_factory'
+import { VisitPopupFactory } from 'maps_maplibre/components/visit_popup'
+import { PhotoPopupFactory } from 'maps_maplibre/components/photo_popup'
 
 /**
  * Handles map interaction events (clicks, popups)
diff --git a/app/javascript/controllers/maps_v2/filter_manager.js b/app/javascript/controllers/maps/maplibre/filter_manager.js
similarity index 100%
rename from app/javascript/controllers/maps_v2/filter_manager.js
rename to app/javascript/controllers/maps/maplibre/filter_manager.js
diff --git a/app/javascript/controllers/maps_v2/layer_manager.js b/app/javascript/controllers/maps/maplibre/layer_manager.js
similarity index 90%
rename from app/javascript/controllers/maps_v2/layer_manager.js
rename to app/javascript/controllers/maps/maplibre/layer_manager.js
index f5e1811b..81729deb 100644
--- a/app/javascript/controllers/maps_v2/layer_manager.js
+++ b/app/javascript/controllers/maps/maplibre/layer_manager.js
@@ -1,15 +1,15 @@
-import { PointsLayer } from 'maps_v2/layers/points_layer'
-import { RoutesLayer } from 'maps_v2/layers/routes_layer'
-import { HeatmapLayer } from 'maps_v2/layers/heatmap_layer'
-import { VisitsLayer } from 'maps_v2/layers/visits_layer'
-import { PhotosLayer } from 'maps_v2/layers/photos_layer'
-import { AreasLayer } from 'maps_v2/layers/areas_layer'
-import { TracksLayer } from 'maps_v2/layers/tracks_layer'
-import { PlacesLayer } from 'maps_v2/layers/places_layer'
-import { FogLayer } from 'maps_v2/layers/fog_layer'
-import { FamilyLayer } from 'maps_v2/layers/family_layer'
-import { lazyLoader } from 'maps_v2/utils/lazy_loader'
-import { performanceMonitor } from 'maps_v2/utils/performance_monitor'
+import { PointsLayer } from 'maps_maplibre/layers/points_layer'
+import { RoutesLayer } from 'maps_maplibre/layers/routes_layer'
+import { HeatmapLayer } from 'maps_maplibre/layers/heatmap_layer'
+import { VisitsLayer } from 'maps_maplibre/layers/visits_layer'
+import { PhotosLayer } from 'maps_maplibre/layers/photos_layer'
+import { AreasLayer } from 'maps_maplibre/layers/areas_layer'
+import { TracksLayer } from 'maps_maplibre/layers/tracks_layer'
+import { PlacesLayer } from 'maps_maplibre/layers/places_layer'
+import { FogLayer } from 'maps_maplibre/layers/fog_layer'
+import { FamilyLayer } from 'maps_maplibre/layers/family_layer'
+import { lazyLoader } from 'maps_maplibre/utils/lazy_loader'
+import { performanceMonitor } from 'maps_maplibre/utils/performance_monitor'
 
 /**
  * Manages all map layers lifecycle and visibility
diff --git a/app/javascript/controllers/maps_v2/map_data_manager.js b/app/javascript/controllers/maps/maplibre/map_data_manager.js
similarity index 96%
rename from app/javascript/controllers/maps_v2/map_data_manager.js
rename to app/javascript/controllers/maps/maplibre/map_data_manager.js
index f15eb7ed..08d14bbc 100644
--- a/app/javascript/controllers/maps_v2/map_data_manager.js
+++ b/app/javascript/controllers/maps/maplibre/map_data_manager.js
@@ -1,6 +1,6 @@
 import maplibregl from 'maplibre-gl'
-import { Toast } from 'maps_v2/components/toast'
-import { performanceMonitor } from 'maps_v2/utils/performance_monitor'
+import { Toast } from 'maps_maplibre/components/toast'
+import { performanceMonitor } from 'maps_maplibre/utils/performance_monitor'
 
 /**
  * Manages data loading and layer setup for the map
diff --git a/app/javascript/controllers/maps_v2/map_initializer.js b/app/javascript/controllers/maps/maplibre/map_initializer.js
similarity index 96%
rename from app/javascript/controllers/maps_v2/map_initializer.js
rename to app/javascript/controllers/maps/maplibre/map_initializer.js
index 34cf71f5..b253135e 100644
--- a/app/javascript/controllers/maps_v2/map_initializer.js
+++ b/app/javascript/controllers/maps/maplibre/map_initializer.js
@@ -1,5 +1,5 @@
 import maplibregl from 'maplibre-gl'
-import { getMapStyle } from 'maps_v2/utils/style_manager'
+import { getMapStyle } from 'maps_maplibre/utils/style_manager'
 
 /**
  * Handles map initialization for Maps V2
diff --git a/app/javascript/controllers/maps_v2/places_manager.js b/app/javascript/controllers/maps/maplibre/places_manager.js
similarity index 98%
rename from app/javascript/controllers/maps_v2/places_manager.js
rename to app/javascript/controllers/maps/maplibre/places_manager.js
index 8b642d0c..66022b82 100644
--- a/app/javascript/controllers/maps_v2/places_manager.js
+++ b/app/javascript/controllers/maps/maplibre/places_manager.js
@@ -1,5 +1,5 @@
-import { SettingsManager } from 'maps_v2/utils/settings_manager'
-import { Toast } from 'maps_v2/components/toast'
+import { SettingsManager } from 'maps_maplibre/utils/settings_manager'
+import { Toast } from 'maps_maplibre/components/toast'
 
 /**
  * Manages places-related operations for Maps V2
diff --git a/app/javascript/controllers/maps_v2/routes_manager.js b/app/javascript/controllers/maps/maplibre/routes_manager.js
similarity index 97%
rename from app/javascript/controllers/maps_v2/routes_manager.js
rename to app/javascript/controllers/maps/maplibre/routes_manager.js
index 3e091300..00d88888 100644
--- a/app/javascript/controllers/maps_v2/routes_manager.js
+++ b/app/javascript/controllers/maps/maplibre/routes_manager.js
@@ -1,6 +1,6 @@
-import { SettingsManager } from 'maps_v2/utils/settings_manager'
-import { Toast } from 'maps_v2/components/toast'
-import { lazyLoader } from 'maps_v2/utils/lazy_loader'
+import { SettingsManager } from 'maps_maplibre/utils/settings_manager'
+import { Toast } from 'maps_maplibre/components/toast'
+import { lazyLoader } from 'maps_maplibre/utils/lazy_loader'
 
 /**
  * Manages routes-related operations for Maps V2
@@ -176,7 +176,7 @@ export class RoutesManager {
       const distanceThresholdMeters = this.settings.metersBetweenRoutes || 500
       const timeThresholdMinutes = this.settings.minutesBetweenRoutes || 60
 
-      const { calculateSpeed, getSpeedColor } = await import('maps_v2/utils/speed_colors')
+      const { calculateSpeed, getSpeedColor } = await import('maps_maplibre/utils/speed_colors')
 
       const routesGeoJSON = await this.generateRoutesWithSpeedColors(
         points,
@@ -199,7 +199,7 @@ export class RoutesManager {
    * Generate routes with speed coloring
    */
   async generateRoutesWithSpeedColors(points, options, calculateSpeed, getSpeedColor) {
-    const { RoutesLayer } = await import('maps_v2/layers/routes_layer')
+    const { RoutesLayer } = await import('maps_maplibre/layers/routes_layer')
     const useSpeedColors = this.settings.speedColoredRoutesEnabled || false
     const speedColorScale = this.settings.speedColorScale || '0:#00ff00|15:#00ffff|30:#ff00ff|50:#ffff00|100:#ff3300'
 
diff --git a/app/javascript/controllers/maps_v2/settings_manager.js b/app/javascript/controllers/maps/maplibre/settings_manager.js
similarity index 97%
rename from app/javascript/controllers/maps_v2/settings_manager.js
rename to app/javascript/controllers/maps/maplibre/settings_manager.js
index c825e181..d3b70b27 100644
--- a/app/javascript/controllers/maps_v2/settings_manager.js
+++ b/app/javascript/controllers/maps/maplibre/settings_manager.js
@@ -1,6 +1,6 @@
-import { SettingsManager } from 'maps_v2/utils/settings_manager'
-import { getMapStyle } from 'maps_v2/utils/style_manager'
-import { Toast } from 'maps_v2/components/toast'
+import { SettingsManager } from 'maps_maplibre/utils/settings_manager'
+import { getMapStyle } from 'maps_maplibre/utils/style_manager'
+import { Toast } from 'maps_maplibre/components/toast'
 
 /**
  * Handles all settings-related operations for Maps V2
diff --git a/app/javascript/controllers/maps_v2/visits_manager.js b/app/javascript/controllers/maps/maplibre/visits_manager.js
similarity index 97%
rename from app/javascript/controllers/maps_v2/visits_manager.js
rename to app/javascript/controllers/maps/maplibre/visits_manager.js
index 6d61974f..70fa0098 100644
--- a/app/javascript/controllers/maps_v2/visits_manager.js
+++ b/app/javascript/controllers/maps/maplibre/visits_manager.js
@@ -1,5 +1,5 @@
-import { SettingsManager } from 'maps_v2/utils/settings_manager'
-import { Toast } from 'maps_v2/components/toast'
+import { SettingsManager } from 'maps_maplibre/utils/settings_manager'
+import { Toast } from 'maps_maplibre/components/toast'
 
 /**
  * Manages visits-related operations for Maps V2
diff --git a/app/javascript/controllers/maps_v2_controller.js b/app/javascript/controllers/maps/maplibre_controller.js
similarity index 90%
rename from app/javascript/controllers/maps_v2_controller.js
rename to app/javascript/controllers/maps/maplibre_controller.js
index 36a21a25..72f8ea60 100644
--- a/app/javascript/controllers/maps_v2_controller.js
+++ b/app/javascript/controllers/maps/maplibre_controller.js
@@ -1,22 +1,22 @@
 import { Controller } from '@hotwired/stimulus'
-import { ApiClient } from 'maps_v2/services/api_client'
-import { SettingsManager } from 'maps_v2/utils/settings_manager'
-import { SearchManager } from 'maps_v2/utils/search_manager'
-import { Toast } from 'maps_v2/components/toast'
-import { performanceMonitor } from 'maps_v2/utils/performance_monitor'
-import { CleanupHelper } from 'maps_v2/utils/cleanup_helper'
-import { MapInitializer } from './maps_v2/map_initializer'
-import { MapDataManager } from './maps_v2/map_data_manager'
-import { LayerManager } from './maps_v2/layer_manager'
-import { DataLoader } from './maps_v2/data_loader'
-import { EventHandlers } from './maps_v2/event_handlers'
-import { FilterManager } from './maps_v2/filter_manager'
-import { DateManager } from './maps_v2/date_manager'
-import { SettingsController } from './maps_v2/settings_manager'
-import { AreaSelectionManager } from './maps_v2/area_selection_manager'
-import { VisitsManager } from './maps_v2/visits_manager'
-import { PlacesManager } from './maps_v2/places_manager'
-import { RoutesManager } from './maps_v2/routes_manager'
+import { ApiClient } from 'maps_maplibre/services/api_client'
+import { SettingsManager } from 'maps_maplibre/utils/settings_manager'
+import { SearchManager } from 'maps_maplibre/utils/search_manager'
+import { Toast } from 'maps_maplibre/components/toast'
+import { performanceMonitor } from 'maps_maplibre/utils/performance_monitor'
+import { CleanupHelper } from 'maps_maplibre/utils/cleanup_helper'
+import { MapInitializer } from './maplibre/map_initializer'
+import { MapDataManager } from './maplibre/map_data_manager'
+import { LayerManager } from './maplibre/layer_manager'
+import { DataLoader } from './maplibre/data_loader'
+import { EventHandlers } from './maplibre/event_handlers'
+import { FilterManager } from './maplibre/filter_manager'
+import { DateManager } from './maplibre/date_manager'
+import { SettingsController } from './maplibre/settings_manager'
+import { AreaSelectionManager } from './maplibre/area_selection_manager'
+import { VisitsManager } from './maplibre/visits_manager'
+import { PlacesManager } from './maplibre/places_manager'
+import { RoutesManager } from './maplibre/routes_manager'
 
 /**
  * Main map controller for Maps V2
diff --git a/app/javascript/controllers/maps_v2_realtime_controller.js b/app/javascript/controllers/maps/maplibre_realtime_controller.js
similarity index 97%
rename from app/javascript/controllers/maps_v2_realtime_controller.js
rename to app/javascript/controllers/maps/maplibre_realtime_controller.js
index 5e560083..b26e4de0 100644
--- a/app/javascript/controllers/maps_v2_realtime_controller.js
+++ b/app/javascript/controllers/maps/maplibre_realtime_controller.js
@@ -1,7 +1,7 @@
 import { Controller } from '@hotwired/stimulus'
-import { createMapChannel } from 'maps_v2/channels/map_channel'
-import { WebSocketManager } from 'maps_v2/utils/websocket_manager'
-import { Toast } from 'maps_v2/components/toast'
+import { createMapChannel } from 'maps_maplibre/channels/map_channel'
+import { WebSocketManager } from 'maps_maplibre/utils/websocket_manager'
+import { Toast } from 'maps_maplibre/components/toast'
 
 /**
  * Real-time controller
diff --git a/app/javascript/controllers/visit_creation_v2_controller.js b/app/javascript/controllers/visit_creation_v2_controller.js
index 34db2ccd..4b9038e7 100644
--- a/app/javascript/controllers/visit_creation_v2_controller.js
+++ b/app/javascript/controllers/visit_creation_v2_controller.js
@@ -1,5 +1,5 @@
 import { Controller } from '@hotwired/stimulus'
-import { Toast } from 'maps_v2/components/toast'
+import { Toast } from 'maps_maplibre/components/toast'
 
 /**
  * Controller for visit creation modal in Maps V2
diff --git a/app/javascript/maps_v2/channels/map_channel.js b/app/javascript/maps_maplibre/channels/map_channel.js
similarity index 98%
rename from app/javascript/maps_v2/channels/map_channel.js
rename to app/javascript/maps_maplibre/channels/map_channel.js
index f88fa5e9..7a2e9d38 100644
--- a/app/javascript/maps_v2/channels/map_channel.js
+++ b/app/javascript/maps_maplibre/channels/map_channel.js
@@ -1,7 +1,7 @@
 import consumer from '../../channels/consumer'
 
 /**
- * Create map channel subscription for maps_v2
+ * Create map channel subscription for maps_maplibre
  * Wraps the existing FamilyLocationsChannel and other channels for real-time updates
  * @param {Object} options - { received, connected, disconnected, enableLiveMode }
  * @returns {Object} Subscriptions object with multiple channels
diff --git a/app/javascript/maps_v2/components/photo_popup.js b/app/javascript/maps_maplibre/components/photo_popup.js
similarity index 100%
rename from app/javascript/maps_v2/components/photo_popup.js
rename to app/javascript/maps_maplibre/components/photo_popup.js
diff --git a/app/javascript/maps_v2/components/popup_factory.js b/app/javascript/maps_maplibre/components/popup_factory.js
similarity index 100%
rename from app/javascript/maps_v2/components/popup_factory.js
rename to app/javascript/maps_maplibre/components/popup_factory.js
diff --git a/app/javascript/maps_v2/components/toast.js b/app/javascript/maps_maplibre/components/toast.js
similarity index 100%
rename from app/javascript/maps_v2/components/toast.js
rename to app/javascript/maps_maplibre/components/toast.js
diff --git a/app/javascript/maps_v2/components/visit_card.js b/app/javascript/maps_maplibre/components/visit_card.js
similarity index 100%
rename from app/javascript/maps_v2/components/visit_card.js
rename to app/javascript/maps_maplibre/components/visit_card.js
diff --git a/app/javascript/maps_v2/components/visit_popup.js b/app/javascript/maps_maplibre/components/visit_popup.js
similarity index 100%
rename from app/javascript/maps_v2/components/visit_popup.js
rename to app/javascript/maps_maplibre/components/visit_popup.js
diff --git a/app/javascript/maps_v2/layers/areas_layer.js b/app/javascript/maps_maplibre/layers/areas_layer.js
similarity index 100%
rename from app/javascript/maps_v2/layers/areas_layer.js
rename to app/javascript/maps_maplibre/layers/areas_layer.js
diff --git a/app/javascript/maps_v2/layers/base_layer.js b/app/javascript/maps_maplibre/layers/base_layer.js
similarity index 100%
rename from app/javascript/maps_v2/layers/base_layer.js
rename to app/javascript/maps_maplibre/layers/base_layer.js
diff --git a/app/javascript/maps_v2/layers/family_layer.js b/app/javascript/maps_maplibre/layers/family_layer.js
similarity index 100%
rename from app/javascript/maps_v2/layers/family_layer.js
rename to app/javascript/maps_maplibre/layers/family_layer.js
diff --git a/app/javascript/maps_v2/layers/fog_layer.js b/app/javascript/maps_maplibre/layers/fog_layer.js
similarity index 100%
rename from app/javascript/maps_v2/layers/fog_layer.js
rename to app/javascript/maps_maplibre/layers/fog_layer.js
diff --git a/app/javascript/maps_v2/layers/heatmap_layer.js b/app/javascript/maps_maplibre/layers/heatmap_layer.js
similarity index 100%
rename from app/javascript/maps_v2/layers/heatmap_layer.js
rename to app/javascript/maps_maplibre/layers/heatmap_layer.js
diff --git a/app/javascript/maps_v2/layers/photos_layer.js b/app/javascript/maps_maplibre/layers/photos_layer.js
similarity index 100%
rename from app/javascript/maps_v2/layers/photos_layer.js
rename to app/javascript/maps_maplibre/layers/photos_layer.js
diff --git a/app/javascript/maps_v2/layers/places_layer.js b/app/javascript/maps_maplibre/layers/places_layer.js
similarity index 100%
rename from app/javascript/maps_v2/layers/places_layer.js
rename to app/javascript/maps_maplibre/layers/places_layer.js
diff --git a/app/javascript/maps_v2/layers/points_layer.js b/app/javascript/maps_maplibre/layers/points_layer.js
similarity index 100%
rename from app/javascript/maps_v2/layers/points_layer.js
rename to app/javascript/maps_maplibre/layers/points_layer.js
diff --git a/app/javascript/maps_v2/layers/routes_layer.js b/app/javascript/maps_maplibre/layers/routes_layer.js
similarity index 100%
rename from app/javascript/maps_v2/layers/routes_layer.js
rename to app/javascript/maps_maplibre/layers/routes_layer.js
diff --git a/app/javascript/maps_v2/layers/scratch_layer.js b/app/javascript/maps_maplibre/layers/scratch_layer.js
similarity index 100%
rename from app/javascript/maps_v2/layers/scratch_layer.js
rename to app/javascript/maps_maplibre/layers/scratch_layer.js
diff --git a/app/javascript/maps_v2/layers/selected_points_layer.js b/app/javascript/maps_maplibre/layers/selected_points_layer.js
similarity index 100%
rename from app/javascript/maps_v2/layers/selected_points_layer.js
rename to app/javascript/maps_maplibre/layers/selected_points_layer.js
diff --git a/app/javascript/maps_v2/layers/selection_layer.js b/app/javascript/maps_maplibre/layers/selection_layer.js
similarity index 100%
rename from app/javascript/maps_v2/layers/selection_layer.js
rename to app/javascript/maps_maplibre/layers/selection_layer.js
diff --git a/app/javascript/maps_v2/layers/tracks_layer.js b/app/javascript/maps_maplibre/layers/tracks_layer.js
similarity index 100%
rename from app/javascript/maps_v2/layers/tracks_layer.js
rename to app/javascript/maps_maplibre/layers/tracks_layer.js
diff --git a/app/javascript/maps_v2/layers/visits_layer.js b/app/javascript/maps_maplibre/layers/visits_layer.js
similarity index 100%
rename from app/javascript/maps_v2/layers/visits_layer.js
rename to app/javascript/maps_maplibre/layers/visits_layer.js
diff --git a/app/javascript/maps_v2/services/api_client.js b/app/javascript/maps_maplibre/services/api_client.js
similarity index 100%
rename from app/javascript/maps_v2/services/api_client.js
rename to app/javascript/maps_maplibre/services/api_client.js
diff --git a/app/javascript/maps_v2/services/location_search_service.js b/app/javascript/maps_maplibre/services/location_search_service.js
similarity index 100%
rename from app/javascript/maps_v2/services/location_search_service.js
rename to app/javascript/maps_maplibre/services/location_search_service.js
diff --git a/app/javascript/maps_v2/utils/cleanup_helper.js b/app/javascript/maps_maplibre/utils/cleanup_helper.js
similarity index 100%
rename from app/javascript/maps_v2/utils/cleanup_helper.js
rename to app/javascript/maps_maplibre/utils/cleanup_helper.js
diff --git a/app/javascript/maps_v2/utils/fps_monitor.js b/app/javascript/maps_maplibre/utils/fps_monitor.js
similarity index 100%
rename from app/javascript/maps_v2/utils/fps_monitor.js
rename to app/javascript/maps_maplibre/utils/fps_monitor.js
diff --git a/app/javascript/maps_v2/utils/geojson_transformers.js b/app/javascript/maps_maplibre/utils/geojson_transformers.js
similarity index 100%
rename from app/javascript/maps_v2/utils/geojson_transformers.js
rename to app/javascript/maps_maplibre/utils/geojson_transformers.js
diff --git a/app/javascript/maps_v2/utils/geometry.js b/app/javascript/maps_maplibre/utils/geometry.js
similarity index 100%
rename from app/javascript/maps_v2/utils/geometry.js
rename to app/javascript/maps_maplibre/utils/geometry.js
diff --git a/app/javascript/maps_v2/utils/lazy_loader.js b/app/javascript/maps_maplibre/utils/lazy_loader.js
similarity index 100%
rename from app/javascript/maps_v2/utils/lazy_loader.js
rename to app/javascript/maps_maplibre/utils/lazy_loader.js
diff --git a/app/javascript/maps_v2/utils/performance_monitor.js b/app/javascript/maps_maplibre/utils/performance_monitor.js
similarity index 100%
rename from app/javascript/maps_v2/utils/performance_monitor.js
rename to app/javascript/maps_maplibre/utils/performance_monitor.js
diff --git a/app/javascript/maps_v2/utils/popup_theme.js b/app/javascript/maps_maplibre/utils/popup_theme.js
similarity index 100%
rename from app/javascript/maps_v2/utils/popup_theme.js
rename to app/javascript/maps_maplibre/utils/popup_theme.js
diff --git a/app/javascript/maps_v2/utils/progressive_loader.js b/app/javascript/maps_maplibre/utils/progressive_loader.js
similarity index 100%
rename from app/javascript/maps_v2/utils/progressive_loader.js
rename to app/javascript/maps_maplibre/utils/progressive_loader.js
diff --git a/app/javascript/maps_v2/utils/search_manager.js b/app/javascript/maps_maplibre/utils/search_manager.js
similarity index 100%
rename from app/javascript/maps_v2/utils/search_manager.js
rename to app/javascript/maps_maplibre/utils/search_manager.js
diff --git a/app/javascript/maps_v2/utils/settings_manager.js b/app/javascript/maps_maplibre/utils/settings_manager.js
similarity index 99%
rename from app/javascript/maps_v2/utils/settings_manager.js
rename to app/javascript/maps_maplibre/utils/settings_manager.js
index f0d7eb41..0dd0f9eb 100644
--- a/app/javascript/maps_v2/utils/settings_manager.js
+++ b/app/javascript/maps_maplibre/utils/settings_manager.js
@@ -33,7 +33,7 @@ const LAYER_NAME_MAP = {
 
 // Mapping between frontend settings and backend API keys
 const BACKEND_SETTINGS_MAP = {
-  mapStyle: 'maps_v2_style',
+  mapStyle: 'maps_maplibre_style',
   enabledMapLayers: 'enabled_map_layers'
 }
 
diff --git a/app/javascript/maps_v2/utils/speed_colors.js b/app/javascript/maps_maplibre/utils/speed_colors.js
similarity index 100%
rename from app/javascript/maps_v2/utils/speed_colors.js
rename to app/javascript/maps_maplibre/utils/speed_colors.js
diff --git a/app/javascript/maps_v2/utils/style_manager.js b/app/javascript/maps_maplibre/utils/style_manager.js
similarity index 97%
rename from app/javascript/maps_v2/utils/style_manager.js
rename to app/javascript/maps_maplibre/utils/style_manager.js
index 3c43bbc0..f71749b4 100644
--- a/app/javascript/maps_v2/utils/style_manager.js
+++ b/app/javascript/maps_maplibre/utils/style_manager.js
@@ -31,7 +31,7 @@ async function loadStyleFile(styleName) {
   }
 
   // Fetch the style file from the public assets
-  const response = await fetch(`/maps_v2/styles/${styleName}.json`)
+  const response = await fetch(`/maps_maplibre/styles/${styleName}.json`)
   if (!response.ok) {
     throw new Error(`Failed to load style: ${styleName} (${response.status})`)
   }
diff --git a/app/javascript/maps_v2/utils/websocket_manager.js b/app/javascript/maps_maplibre/utils/websocket_manager.js
similarity index 100%
rename from app/javascript/maps_v2/utils/websocket_manager.js
rename to app/javascript/maps_maplibre/utils/websocket_manager.js
diff --git a/app/views/maps_v2/_area_creation_modal.html.erb b/app/views/maps/maplibre/_area_creation_modal.html.erb
similarity index 100%
rename from app/views/maps_v2/_area_creation_modal.html.erb
rename to app/views/maps/maplibre/_area_creation_modal.html.erb
diff --git a/app/views/maps_v2/_settings_panel.html.erb b/app/views/maps/maplibre/_settings_panel.html.erb
similarity index 81%
rename from app/views/maps_v2/_settings_panel.html.erb
rename to app/views/maps/maplibre/_settings_panel.html.erb
index ee568712..95be7f6c 100644
--- a/app/views/maps_v2/_settings_panel.html.erb
+++ b/app/views/maps/maplibre/_settings_panel.html.erb
@@ -1,4 +1,4 @@
-<div class="map-control-panel" data-maps-v2-target="settingsPanel" data-controller="map-panel">
+<div class="map-control-panel" data-maps--maplibre-target="settingsPanel" data-controller="map-panel">
   <!-- Vertical Icon Tabs (Left Side) -->
   <div class="panel-tabs">
     <button class="tab-btn active"
@@ -51,7 +51,7 @@
     <div class="panel-header">
       <h3 class="panel-title" data-map-panel-target="title">Layers</h3>
       <button class="btn btn-ghost btn-sm btn-circle"
-              data-action="click->maps-v2#toggleSettings"
+              data-action="click->maps--maplibre#toggleSettings"
               title="Close panel">
         <%= icon 'search' %>
       </button>
@@ -69,11 +69,11 @@
             <input type="text"
                    placeholder="Enter name of a place"
                    class="input input-bordered w-full"
-                   data-maps-v2-target="searchInput"
+                   data-maps--maplibre-target="searchInput"
                    autocomplete="off" />
             <!-- Search Results -->
             <div class="absolute z-50 w-full mt-1 bg-base-100 rounded-lg shadow-lg border border-base-300 hidden max-h-full overflow-y-auto"
-                 data-maps-v2-target="searchResults">
+                 data-maps--maplibre-target="searchResults">
               <!-- Results will be populated by SearchManager -->
             </div>
           </div>
@@ -91,8 +91,8 @@
             <label class="label cursor-pointer justify-start gap-3">
               <input type="checkbox"
                      class="toggle toggle-primary"
-                     data-maps-v2-target="pointsToggle"
-                     data-action="change->maps-v2#togglePoints" />
+                     data-maps--maplibre-target="pointsToggle"
+                     data-action="change->maps--maplibre#togglePoints" />
               <span class="label-text font-medium">Points</span>
             </label>
             <p class="text-sm text-base-content/60 ml-14">Show individual location points</p>
@@ -105,36 +105,36 @@
             <label class="label cursor-pointer justify-start gap-3">
               <input type="checkbox"
                      class="toggle toggle-primary"
-                     data-maps-v2-target="routesToggle"
-                     data-action="change->maps-v2#toggleRoutes" />
+                     data-maps--maplibre-target="routesToggle"
+                     data-action="change->maps--maplibre#toggleRoutes" />
               <span class="label-text font-medium">Routes</span>
             </label>
             <p class="text-sm text-base-content/60 ml-14">Show connected route lines</p>
           </div>
 
           <!-- Speed-Colored Routes Options (conditionally shown) -->
-          <div class="ml-14 space-y-3" data-maps-v2-target="routesOptions" style="display: none;">
+          <div class="ml-14 space-y-3" data-maps--maplibre-target="routesOptions" style="display: none;">
             <div class="form-control">
               <label class="label cursor-pointer py-2">
                 <span class="label-text text-sm">Color by speed</span>
                 <input type="checkbox"
                        class="toggle toggle-sm toggle-primary"
-                       data-maps-v2-target="speedColoredToggle"
-                       data-action="change->maps-v2#toggleSpeedColoredRoutes" />
+                       data-maps--maplibre-target="speedColoredToggle"
+                       data-action="change->maps--maplibre#toggleSpeedColoredRoutes" />
               </label>
             </div>
 
             <!-- Speed Color Scale Editor (shown when speed colors enabled) -->
-            <div class="hidden" data-maps-v2-target="speedColorScaleContainer">
+            <div class="hidden" data-maps--maplibre-target="speedColorScaleContainer">
               <button type="button"
                       class="btn btn-sm btn-outline w-full"
-                      data-action="click->maps-v2#openSpeedColorEditor">
+                      data-action="click->maps--maplibre#openSpeedColorEditor">
                 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
                 </svg>
                 Edit Color Gradient
               </button>
-              <input type="hidden" data-maps-v2-target="speedColorScaleInput" value="" />
+              <input type="hidden" data-maps--maplibre-target="speedColorScaleInput" value="" />
             </div>
           </div>
 
@@ -145,8 +145,8 @@
             <label class="label cursor-pointer justify-start gap-3">
               <input type="checkbox"
                      class="toggle toggle-primary"
-                     data-maps-v2-target="heatmapToggle"
-                     data-action="change->maps-v2#toggleHeatmap" />
+                     data-maps--maplibre-target="heatmapToggle"
+                     data-action="change->maps--maplibre#toggleHeatmap" />
               <span class="label-text font-medium">Heatmap</span>
             </label>
             <p class="text-sm text-base-content/60 ml-14">Show density heatmap</p>
@@ -159,23 +159,23 @@
             <label class="label cursor-pointer justify-start gap-3">
               <input type="checkbox"
                      class="toggle toggle-primary"
-                     data-maps-v2-target="visitsToggle"
-                     data-action="change->maps-v2#toggleVisits" />
+                     data-maps--maplibre-target="visitsToggle"
+                     data-action="change->maps--maplibre#toggleVisits" />
               <span class="label-text font-medium">Visits</span>
             </label>
             <p class="text-sm text-base-content/60 ml-14">Show detected area visits</p>
           </div>
 
           <!-- Visits Search (conditionally shown) -->
-          <div class="ml-14 space-y-2" data-maps-v2-target="visitsSearch" style="display: none;">
+          <div class="ml-14 space-y-2" data-maps--maplibre-target="visitsSearch" style="display: none;">
             <input type="text"
                    id="visits-search"
                    placeholder="Filter by name..."
                    class="input input-sm input-bordered w-full"
-                   data-action="input->maps-v2#searchVisits" />
+                   data-action="input->maps--maplibre#searchVisits" />
 
             <select class="select select-bordered w-full"
-                    data-action="change->maps-v2#filterVisits">
+                    data-action="change->maps--maplibre#filterVisits">
               <option value="all">All Visits</option>
               <option value="confirmed">Confirmed Only</option>
               <option value="suggested">Suggested Only</option>
@@ -189,21 +189,21 @@
             <label class="label cursor-pointer justify-start gap-3">
               <input type="checkbox"
                      class="toggle toggle-primary"
-                     data-maps-v2-target="placesToggle"
-                     data-action="change->maps-v2#togglePlaces" />
+                     data-maps--maplibre-target="placesToggle"
+                     data-action="change->maps--maplibre#togglePlaces" />
               <span class="label-text font-medium">Places</span>
             </label>
             <p class="text-sm text-base-content/60 ml-14">Show your saved places</p>
           </div>
 
           <!-- Places Tags (conditionally shown) -->
-          <div class="ml-14 space-y-2" data-maps-v2-target="placesFilters" style="display: none;">
+          <div class="ml-14 space-y-2" data-maps--maplibre-target="placesFilters" style="display: none;">
             <div class="form-control">
               <label class="label cursor-pointer justify-start gap-2">
                 <input type="checkbox"
                        class="toggle toggle-sm"
-                       data-maps-v2-target="enableAllPlaceTagsToggle"
-                       data-action="change->maps-v2#toggleAllPlaceTags">
+                       data-maps--maplibre-target="enableAllPlaceTagsToggle"
+                       data-action="change->maps--maplibre#toggleAllPlaceTags">
                 <span class="label-text text-sm">Enable All Tags</span>
               </label>
             </div>
@@ -218,7 +218,7 @@
                          name="place_tag_ids[]"
                          value="untagged"
                          class="checkbox checkbox-xs hidden peer"
-                         data-action="change->maps-v2#filterPlacesByTags">
+                         data-action="change->maps--maplibre#filterPlacesByTags">
                   <span class="badge badge-sm badge-outline transition-all peer-checked:scale-105"
                         style="border-color: #94a3b8; color: #94a3b8;"
                         data-checked-style="background-color: #94a3b8; color: white;">
@@ -232,7 +232,7 @@
                            name="place_tag_ids[]"
                            value="<%= tag.id %>"
                            class="checkbox checkbox-xs hidden peer"
-                           data-action="change->maps-v2#filterPlacesByTags">
+                           data-action="change->maps--maplibre#filterPlacesByTags">
                     <span class="badge badge-sm badge-outline transition-all peer-checked:scale-105"
                           style="border-color: <%= tag.color %>; color: <%= tag.color %>;"
                           data-checked-style="background-color: <%= tag.color %>; color: white;">
@@ -254,8 +254,8 @@
             <label class="label cursor-pointer justify-start gap-3">
               <input type="checkbox"
                      class="toggle toggle-primary"
-                     data-maps-v2-target="photosToggle"
-                     data-action="change->maps-v2#togglePhotos" />
+                     data-maps--maplibre-target="photosToggle"
+                     data-action="change->maps--maplibre#togglePhotos" />
               <span class="label-text font-medium">Photos</span>
             </label>
             <p class="text-sm text-base-content/60 ml-14">Show geotagged photos</p>
@@ -268,8 +268,8 @@
             <label class="label cursor-pointer justify-start gap-3">
               <input type="checkbox"
                      class="toggle toggle-primary"
-                     data-maps-v2-target="areasToggle"
-                     data-action="change->maps-v2#toggleAreas" />
+                     data-maps--maplibre-target="areasToggle"
+                     data-action="change->maps--maplibre#toggleAreas" />
               <span class="label-text font-medium">Areas</span>
             </label>
             <p class="text-sm text-base-content/60 ml-14">Show defined areas</p>
@@ -282,8 +282,8 @@
             <label class="label cursor-pointer justify-start gap-3">
               <input type="checkbox"
                      class="toggle toggle-primary"
-                     data-maps-v2-target="tracksToggle"
-                     data-action="change->maps-v2#toggleTracks" />
+                     data-maps--maplibre-target="tracksToggle"
+                     data-action="change->maps--maplibre#toggleTracks" />
               <span class="label-text font-medium">Tracks</span>
             </label>
             <p class="text-sm text-base-content/60 ml-14">Show saved tracks</p>
@@ -296,8 +296,8 @@
             <label class="label cursor-pointer justify-start gap-3">
               <input type="checkbox"
                      class="toggle toggle-primary"
-                     data-maps-v2-target="fogToggle"
-                     data-action="change->maps-v2#toggleFog" />
+                     data-maps--maplibre-target="fogToggle"
+                     data-action="change->maps--maplibre#toggleFog" />
               <span class="label-text font-medium">Fog of War</span>
             </label>
             <p class="text-sm text-base-content/60 ml-14">Show explored areas</p>
@@ -310,8 +310,8 @@
             <label class="label cursor-pointer justify-start gap-3">
               <input type="checkbox"
                      class="toggle toggle-primary"
-                     data-maps-v2-target="scratchToggle"
-                     data-action="change->maps-v2#toggleScratch" />
+                     data-maps--maplibre-target="scratchToggle"
+                     data-action="change->maps--maplibre#toggleScratch" />
               <span class="label-text font-medium">Scratch Map</span>
             </label>
             <p class="text-sm text-base-content/60 ml-14">Show scratched countries</p>
@@ -322,7 +322,7 @@
 
       <!-- Settings Tab -->
       <div class="tab-content" data-tab-content="settings" data-map-panel-target="tabContent">
-        <form data-action="submit->maps-v2#updateAdvancedSettings" class="space-y-4">
+        <form data-action="submit->maps--maplibre#updateAdvancedSettings" class="space-y-4">
           <!-- Map Style -->
           <div class="form-control w-full">
             <label class="label">
@@ -330,7 +330,7 @@
             </label>
             <select class="select select-bordered w-full"
                     name="mapStyle"
-                    data-action="change->maps-v2#updateMapStyle">
+                    data-action="change->maps--maplibre#updateMapStyle">
               <option value="light" selected>Light</option>
               <option value="dark">Dark</option>
               <option value="white">White</option>
@@ -354,8 +354,8 @@
                    step="10"
                    value="100"
                    class="range range-sm"
-                   data-maps-v2-target="routeOpacityRange"
-                   data-action="input->maps-v2#updateRouteOpacity" />
+                   data-maps--maplibre-target="routeOpacityRange"
+                   data-action="input->maps--maplibre#updateRouteOpacity" />
             <div class="w-full flex justify-between text-xs px-2 mt-1">
               <span>10%</span>
               <span>50%</span>
@@ -369,7 +369,7 @@
           <div class="form-control w-full">
             <label class="label">
               <span class="label-text font-medium">Fog of War Radius</span>
-              <span class="label-text-alt" data-maps-v2-target="fogRadiusValue">1000m</span>
+              <span class="label-text-alt" data-maps--maplibre-target="fogRadiusValue">1000m</span>
             </label>
             <input type="range"
                    name="fogOfWarRadius"
@@ -378,7 +378,7 @@
                    step="5"
                    value="1000"
                    class="range range-sm"
-                   data-action="input->maps-v2#updateFogRadiusDisplay" />
+                   data-action="input->maps--maplibre#updateFogRadiusDisplay" />
             <div class="w-full flex justify-between text-xs px-2 mt-1">
               <span>5m</span>
               <span>1000m</span>
@@ -390,7 +390,7 @@
           <div class="form-control w-full">
             <label class="label">
               <span class="label-text font-medium">Fog of War Threshold</span>
-              <span class="label-text-alt" data-maps-v2-target="fogThresholdValue">1</span>
+              <span class="label-text-alt" data-maps--maplibre-target="fogThresholdValue">1</span>
             </label>
             <input type="range"
                    name="fogOfWarThreshold"
@@ -399,7 +399,7 @@
                    step="1"
                    value="1"
                    class="range range-sm"
-                   data-action="input->maps-v2#updateFogThresholdDisplay" />
+                   data-action="input->maps--maplibre#updateFogThresholdDisplay" />
             <div class="w-full flex justify-between text-xs px-2 mt-1">
               <span>1</span>
               <span>5</span>
@@ -414,7 +414,7 @@
           <div class="form-control w-full">
             <label class="label">
               <span class="label-text font-medium">Meters Between Routes</span>
-              <span class="label-text-alt" data-maps-v2-target="metersBetweenValue">500m</span>
+              <span class="label-text-alt" data-maps--maplibre-target="metersBetweenValue">500m</span>
             </label>
             <input type="range"
                    name="metersBetweenRoutes"
@@ -423,7 +423,7 @@
                    step="100"
                    value="500"
                    class="range range-sm"
-                   data-action="input->maps-v2#updateMetersBetweenDisplay" />
+                   data-action="input->maps--maplibre#updateMetersBetweenDisplay" />
             <div class="w-full flex justify-between text-xs px-2 mt-1">
               <span>100m</span>
               <span>2500m</span>
@@ -435,7 +435,7 @@
           <div class="form-control w-full">
             <label class="label">
               <span class="label-text font-medium">Minutes Between Routes</span>
-              <span class="label-text-alt" data-maps-v2-target="minutesBetweenValue">60min</span>
+              <span class="label-text-alt" data-maps--maplibre-target="minutesBetweenValue">60min</span>
             </label>
             <input type="range"
                    name="minutesBetweenRoutes"
@@ -444,7 +444,7 @@
                    step="1"
                    value="60"
                    class="range range-sm"
-                   data-action="input->maps-v2#updateMinutesBetweenDisplay" />
+                   data-action="input->maps--maplibre#updateMinutesBetweenDisplay" />
             <div class="w-full flex justify-between text-xs px-2 mt-1">
               <span>1min</span>
               <span>90min</span>
@@ -499,8 +499,8 @@
             <label class="label cursor-pointer justify-start gap-3">
               <input type="checkbox"
                      class="toggle toggle-primary"
-                     data-action="change->maps-v2-realtime#toggleLiveMode"
-                     data-maps-v2-realtime-target="liveModeToggle" />
+                     data-action="change->maps--maplibre-realtime#toggleLiveMode"
+                     data-maps--maplibre-realtime-target="liveModeToggle" />
               <span class="label-text font-medium">Live Mode</span>
             </label>
             <p class="text-sm text-base-content/60 mt-1">Show new points in real-time</p>
@@ -517,7 +517,7 @@
           <!-- Reset Settings -->
           <button type="button"
                   class="btn btn-sm btn-outline btn-block"
-                  data-action="click->maps-v2#resetSettings">
+                  data-action="click->maps--maplibre#resetSettings">
             <%= icon 'rotate-ccw' %>
             Reset to Defaults
           </button>
@@ -532,7 +532,7 @@
             <!-- Create a Visit Button -->
             <button type="button"
                     class="btn btn-sm btn-outline"
-                    data-action="click->maps-v2#startCreateVisit">
+                    data-action="click->maps--maplibre#startCreateVisit">
               <%= icon 'map-pin-check' %>
               Create a Visit
             </button>
@@ -540,7 +540,7 @@
             <!-- Create a Place Button -->
             <button type="button"
                     class="btn btn-sm btn-outline"
-                    data-action="click->maps-v2#startCreatePlace">
+                    data-action="click->maps--maplibre#startCreatePlace">
               <%= icon 'map-pin-plus' %>
               Create a Place
             </button>
@@ -548,8 +548,8 @@
             <!-- Select Area Button -->
             <button type="button"
                     class="btn btn-sm btn-outline"
-                    data-maps-v2-target="selectAreaButton"
-                    data-action="click->maps-v2#startSelectArea">
+                    data-maps--maplibre-target="selectAreaButton"
+                    data-action="click->maps--maplibre#startSelectArea">
               <%= icon 'square-dashed-mouse-pointer' %>
               Select Area
             </button>
@@ -557,29 +557,29 @@
             <!-- Create Area Button -->
             <button type="button"
                     class="btn btn-sm btn-outline"
-                    data-action="click->maps-v2#startCreateArea">
+                    data-action="click->maps--maplibre#startCreateArea">
               <%= icon 'circle-plus' %>
               Create an Area
             </button>
           </div>
 
           <!-- Selection Actions (shown after area is selected) -->
-          <div class="hidden mt-4 space-y-2" data-maps-v2-target="selectionActions">
+          <div class="hidden mt-4 space-y-2" data-maps--maplibre-target="selectionActions">
             <button type="button"
                     class="btn btn-sm btn-outline btn-error btn-block"
-                    data-action="click->maps-v2#deleteSelectedPoints"
-                    data-maps-v2-target="deletePointsButton">
+                    data-action="click->maps--maplibre#deleteSelectedPoints"
+                    data-maps--maplibre-target="deletePointsButton">
               <%= icon 'trash-2' %>
-              <span data-maps-v2-target="deleteButtonText">Delete Selected Points</span>
+              <span data-maps--maplibre-target="deleteButtonText">Delete Selected Points</span>
             </button>
 
             <!-- Selected Visits Container -->
-            <div class="hidden mt-4 max-h-full overflow-y-auto" data-maps-v2-target="selectedVisitsContainer">
+            <div class="hidden mt-4 max-h-full overflow-y-auto" data-maps--maplibre-target="selectedVisitsContainer">
               <!-- Visit cards will be dynamically inserted here -->
             </div>
 
             <!-- Bulk Actions for Visits -->
-            <div class="hidden" data-maps-v2-target="selectedVisitsBulkActions">
+            <div class="hidden" data-maps--maplibre-target="selectedVisitsBulkActions">
               <!-- Bulk action buttons will be dynamically inserted here -->
             </div>
           </div>
diff --git a/app/views/maps_v2/_visit_creation_modal.html.erb b/app/views/maps/maplibre/_visit_creation_modal.html.erb
similarity index 100%
rename from app/views/maps_v2/_visit_creation_modal.html.erb
rename to app/views/maps/maplibre/_visit_creation_modal.html.erb
diff --git a/app/views/maps_v2/index.html.erb b/app/views/maps/maplibre/index.html.erb
similarity index 51%
rename from app/views/maps_v2/index.html.erb
rename to app/views/maps/maplibre/index.html.erb
index d5040f9f..c0e33add 100644
--- a/app/views/maps_v2/index.html.erb
+++ b/app/views/maps/maplibre/index.html.erb
@@ -2,16 +2,16 @@
 
 <%= render 'shared/map/date_navigation_v2', start_at: @start_at, end_at: @end_at %>
 
-<div id="maps-v2-container"
-     data-controller="maps-v2 area-drawer maps-v2-realtime"
-     data-maps-v2-api-key-value="<%= current_user.api_key %>"
-     data-maps-v2-start-date-value="<%= @start_at.to_s %>"
-     data-maps-v2-end-date-value="<%= @end_at.to_s %>"
-     data-maps-v2-realtime-enabled-value="true"
+<div id="maps-maplibre-container"
+     data-controller="maps--maplibre area-drawer maps--maplibre-realtime"
+     data-maps--maplibre-api-key-value="<%= current_user.api_key %>"
+     data-maps--maplibre-start-date-value="<%= @start_at.to_s %>"
+     data-maps--maplibre-end-date-value="<%= @end_at.to_s %>"
+     data-maps--maplibre-realtime-enabled-value="true"
      style="width: 100%; height: 100%; position: relative;">
 
   <!-- Map container takes full width and height -->
-  <div data-maps-v2-target="container" class="maps-v2-container" style="width: 100%; height: 100%;"></div>
+  <div data-maps--maplibre-target="container" class="maps-maplibre-container" style="width: 100%; height: 100%;"></div>
 
   <!-- Connection indicator -->
   <div class="connection-indicator disconnected">
@@ -21,7 +21,7 @@
 
   <!-- Settings button (top-left corner) -->
   <div class="absolute top-4 left-4 z-10">
-    <button data-action="click->maps-v2#toggleSettings"
+    <button data-action="click->maps--maplibre#toggleSettings"
             class="btn btn-sm btn-primary"
             title="Open map settings">
       <%= icon 'square-pen' %>
@@ -30,19 +30,19 @@
   </div>
 
   <!-- Loading overlay -->
-  <div data-maps-v2-target="loading" class="loading-overlay hidden">
+  <div data-maps--maplibre-target="loading" class="loading-overlay hidden">
     <div class="loading-spinner"></div>
-    <div class="loading-text" data-maps-v2-target="loadingText">Loading points...</div>
+    <div class="loading-text" data-maps--maplibre-target="loadingText">Loading points...</div>
   </div>
 
   <!-- Settings panel -->
-  <%= render 'maps_v2/settings_panel' %>
+  <%= render 'maps/maplibre/settings_panel' %>
 
   <!-- Visit creation modal -->
-  <%= render 'maps_v2/visit_creation_modal' %>
+  <%= render 'maps/maplibre/visit_creation_modal' %>
 
   <!-- Area creation modal -->
-  <%= render 'maps_v2/area_creation_modal' %>
+  <%= render 'maps/maplibre/area_creation_modal' %>
 
   <!-- Place creation modal (shared) -->
   <%= render 'shared/place_creation_modal' %>
diff --git a/app/views/shared/map/_date_navigation_v2.html.erb b/app/views/shared/map/_date_navigation_v2.html.erb
index b3262c50..799fdcce 100644
--- a/app/views/shared/map/_date_navigation_v2.html.erb
+++ b/app/views/shared/map/_date_navigation_v2.html.erb
@@ -17,12 +17,12 @@
   <div
     data-map-controls-target="panel"
     class="hidden lg:!block bg-base-100 rounded-lg shadow-lg p-4 mt-2 lg:mt-0">
-    <%= form_with url: maps_v2_path(import_id: params[:import_id]), method: :get do |f| %>
+    <%= form_with url: maps_maplibre_path(import_id: params[:import_id]), method: :get do |f| %>
       <div class="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4 lg:items-end">
         <div class="w-full lg:w-1/12">
           <div class="flex flex-col space-y-2">
             <span class="tooltip" data-tip="<%= human_date(start_at - 1.day) %>">
-              <%= link_to maps_v2_path(start_at: start_at - 1.day, end_at: end_at - 1.day, import_id: params[:import_id]), class: "btn btn-sm border border-base-300 hover:btn-ghost w-full" do %>
+              <%= link_to maps_maplibre_path(start_at: start_at - 1.day, end_at: end_at - 1.day, import_id: params[:import_id]), class: "btn btn-sm border border-base-300 hover:btn-ghost w-full" do %>
                 <%= icon 'chevron-left' %>
               <% end %>
             </span>
@@ -37,7 +37,7 @@
         <div class="w-full lg:w-1/12">
           <div class="flex flex-col space-y-2">
             <span class="tooltip" data-tip="<%= human_date(start_at + 1.day) %>">
-              <%= link_to maps_v2_path(start_at: start_at + 1.day, end_at: end_at + 1.day, import_id: params[:import_id]), class: "btn btn-sm border border-base-300 hover:btn-ghost w-full" do %>
+              <%= link_to maps_maplibre_path(start_at: start_at + 1.day, end_at: end_at + 1.day, import_id: params[:import_id]), class: "btn btn-sm border border-base-300 hover:btn-ghost w-full" do %>
                 <%= icon 'chevron-right' %>
               <% end %>
             </span>
@@ -51,18 +51,18 @@
         <div class="w-full lg:w-1/12">
           <div class="flex flex-col space-y-2 text-center">
             <%= link_to "Today",
-              maps_v2_path(start_at: Time.current.beginning_of_day, end_at: Time.current.end_of_day, import_id: params[:import_id]),
+              maps_maplibre_path(start_at: Time.current.beginning_of_day, end_at: Time.current.end_of_day, import_id: params[:import_id]),
               class: "btn btn-sm border border-base-300 hover:btn-ghost w-full" %>
           </div>
         </div>
         <div class="w-full lg:w-2/12">
           <div class="flex flex-col space-y-2 text-center">
-            <%= link_to "Last 7 days", maps_v2_path(start_at: 1.week.ago.beginning_of_day, end_at: Time.current.end_of_day, import_id: params[:import_id]), class: "btn btn-sm border border-base-300 hover:btn-ghost w-full" %>
+            <%= link_to "Last 7 days", maps_maplibre_path(start_at: 1.week.ago.beginning_of_day, end_at: Time.current.end_of_day, import_id: params[:import_id]), class: "btn btn-sm border border-base-300 hover:btn-ghost w-full" %>
           </div>
         </div>
         <div class="w-full lg:w-2/12">
           <div class="flex flex-col space-y-2 text-center">
-            <%= link_to "Last month", maps_v2_path(start_at: 1.month.ago.beginning_of_day, end_at: Time.current.end_of_day, import_id: params[:import_id]), class: "btn btn-sm border border-base-300 hover:btn-ghost w-full" %>
+            <%= link_to "Last month", maps_maplibre_path(start_at: 1.month.ago.beginning_of_day, end_at: Time.current.end_of_day, import_id: params[:import_id]), class: "btn btn-sm border border-base-300 hover:btn-ghost w-full" %>
           </div>
         </div>
       </div>
diff --git a/config/importmap.rb b/config/importmap.rb
index 140cd933..3a88d32b 100644
--- a/config/importmap.rb
+++ b/config/importmap.rb
@@ -4,7 +4,7 @@
 
 pin_all_from 'app/javascript/channels', under: 'channels'
 pin_all_from 'app/javascript/maps', under: 'maps'
-pin_all_from 'app/javascript/maps_v2', under: 'maps_v2'
+pin_all_from 'app/javascript/maps_maplibre', under: 'maps_maplibre'
 
 pin 'application', preload: true
 pin '@rails/actioncable', to: 'actioncable.esm.js'
diff --git a/config/routes.rb b/config/routes.rb
index c4e216e4..fde4ac57 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -110,10 +110,19 @@ Rails.application.routes.draw do
 
   resources :metrics, only: [:index]
 
+  # V1 (Leaflet) - legacy
   get 'map', to: 'map#index'
 
-  # Maps V2
-  get '/maps_v2', to: 'maps_v2#index', as: :maps_v2
+  # Main maps entry - redirects to MapLibre
+  get '/maps', to: 'maps#index', as: :maps
+
+  # Maps namespace
+  namespace :maps do
+    get '/maplibre', to: 'maplibre#index', as: :maplibre
+  end
+
+  # Backward compatibility redirect
+  get '/maps_v2', to: redirect('/maps/maplibre')
 
   namespace :api do
     namespace :v1 do
diff --git a/e2e/v2/helpers/setup.js b/e2e/v2/helpers/setup.js
index 783f5f79..f9d8c734 100644
--- a/e2e/v2/helpers/setup.js
+++ b/e2e/v2/helpers/setup.js
@@ -7,7 +7,7 @@
  * @param {Page} page - Playwright page object
  */
 export async function navigateToMapsV2(page) {
-  await page.goto('/maps_v2');
+  await page.goto('/maps/maplibre');
 }
 
 /**
@@ -44,18 +44,18 @@ export async function waitForMapLibre(page, timeout = 10000) {
 
   // Wait for map instance to exist and style to be loaded
   await page.waitForFunction(() => {
-    const element = document.querySelector('[data-controller*="maps-v2"]');
+    const element = document.querySelector('[data-controller*="maps--maplibre"]');
     if (!element) return false;
     const app = window.Stimulus || window.Application;
     if (!app) return false;
-    const controller = app.getControllerForElementAndIdentifier(element, 'maps-v2');
+    const controller = app.getControllerForElementAndIdentifier(element, 'maps--maplibre');
     // Check if map exists and style is loaded (more reliable than loaded())
     return controller?.map && controller.map.isStyleLoaded();
   }, { timeout: 15000 });
 
   // Wait for loading overlay to be hidden
   await page.waitForFunction(() => {
-    const loading = document.querySelector('[data-maps-v2-target="loading"]');
+    const loading = document.querySelector('[data-maps--maplibre-target="loading"]');
     return loading && loading.classList.contains('hidden');
   }, { timeout: 15000 });
 }
@@ -67,14 +67,14 @@ export async function waitForMapLibre(page, timeout = 10000) {
  */
 export async function hasMapInstance(page) {
   return await page.evaluate(() => {
-    const element = document.querySelector('[data-controller*="maps-v2"]');
+    const element = document.querySelector('[data-controller*="maps--maplibre"]');
     if (!element) return false;
 
     // Get Stimulus controller instance
     const app = window.Stimulus || window.Application;
     if (!app) return false;
 
-    const controller = app.getControllerForElementAndIdentifier(element, 'maps-v2');
+    const controller = app.getControllerForElementAndIdentifier(element, 'maps--maplibre');
     return controller && controller.map !== undefined;
   });
 }
@@ -86,13 +86,13 @@ export async function hasMapInstance(page) {
  */
 export async function getMapZoom(page) {
   return await page.evaluate(() => {
-    const element = document.querySelector('[data-controller*="maps-v2"]');
+    const element = document.querySelector('[data-controller*="maps--maplibre"]');
     if (!element) return null;
 
     const app = window.Stimulus || window.Application;
     if (!app) return null;
 
-    const controller = app.getControllerForElementAndIdentifier(element, 'maps-v2');
+    const controller = app.getControllerForElementAndIdentifier(element, 'maps--maplibre');
     return controller?.map?.getZoom() || null;
   });
 }
@@ -104,13 +104,13 @@ export async function getMapZoom(page) {
  */
 export async function getMapCenter(page) {
   return await page.evaluate(() => {
-    const element = document.querySelector('[data-controller*="maps-v2"]');
+    const element = document.querySelector('[data-controller*="maps--maplibre"]');
     if (!element) return null;
 
     const app = window.Stimulus || window.Application;
     if (!app) return null;
 
-    const controller = app.getControllerForElementAndIdentifier(element, 'maps-v2');
+    const controller = app.getControllerForElementAndIdentifier(element, 'maps--maplibre');
     if (!controller?.map) return null;
 
     const center = controller.map.getCenter();
@@ -125,13 +125,13 @@ export async function getMapCenter(page) {
  */
 export async function getPointsSourceData(page) {
   return await page.evaluate(() => {
-    const element = document.querySelector('[data-controller*="maps-v2"]');
+    const element = document.querySelector('[data-controller*="maps--maplibre"]');
     if (!element) return { hasSource: false, featureCount: 0, features: [] };
 
     const app = window.Stimulus || window.Application;
     if (!app) return { hasSource: false, featureCount: 0, features: [] };
 
-    const controller = app.getControllerForElementAndIdentifier(element, 'maps-v2');
+    const controller = app.getControllerForElementAndIdentifier(element, 'maps--maplibre');
     if (!controller?.map) return { hasSource: false, featureCount: 0, features: [] };
 
     const source = controller.map.getSource('points-source');
@@ -154,13 +154,13 @@ export async function getPointsSourceData(page) {
  */
 export async function hasLayer(page, layerId) {
   return await page.evaluate((id) => {
-    const element = document.querySelector('[data-controller*="maps-v2"]');
+    const element = document.querySelector('[data-controller*="maps--maplibre"]');
     if (!element) return false;
 
     const app = window.Stimulus || window.Application;
     if (!app) return false;
 
-    const controller = app.getControllerForElementAndIdentifier(element, 'maps-v2');
+    const controller = app.getControllerForElementAndIdentifier(element, 'maps--maplibre');
     if (!controller?.map) return false;
 
     return controller.map.getLayer(id) !== undefined;
@@ -174,7 +174,7 @@ export async function hasLayer(page, layerId) {
  * @param {number} y - Y coordinate
  */
 export async function clickMapAt(page, x, y) {
-  const mapContainer = page.locator('[data-maps-v2-target="container"]');
+  const mapContainer = page.locator('[data-maps--maplibre-target="container"]');
   await mapContainer.click({ position: { x, y } });
 }
 
@@ -184,7 +184,7 @@ export async function clickMapAt(page, x, y) {
  */
 export async function waitForLoadingComplete(page) {
   await page.waitForFunction(() => {
-    const loading = document.querySelector('[data-maps-v2-target="loading"]');
+    const loading = document.querySelector('[data-maps--maplibre-target="loading"]');
     return loading && loading.classList.contains('hidden');
   }, { timeout: 15000 });
 }
@@ -207,13 +207,13 @@ export async function hasPopup(page) {
  */
 export async function getLayerVisibility(page, layerId) {
   return await page.evaluate((id) => {
-    const element = document.querySelector('[data-controller*="maps-v2"]');
+    const element = document.querySelector('[data-controller*="maps--maplibre"]');
     if (!element) return false;
 
     const app = window.Stimulus || window.Application;
     if (!app) return false;
 
-    const controller = app.getControllerForElementAndIdentifier(element, 'maps-v2');
+    const controller = app.getControllerForElementAndIdentifier(element, 'maps--maplibre');
     if (!controller?.map) return false;
 
     const visibility = controller.map.getLayoutProperty(id, 'visibility');
@@ -228,13 +228,13 @@ export async function getLayerVisibility(page, layerId) {
  */
 export async function getRoutesSourceData(page) {
   return await page.evaluate(() => {
-    const element = document.querySelector('[data-controller*="maps-v2"]');
+    const element = document.querySelector('[data-controller*="maps--maplibre"]');
     if (!element) return { hasSource: false, featureCount: 0, features: [] };
 
     const app = window.Stimulus || window.Application;
     if (!app) return { hasSource: false, featureCount: 0, features: [] };
 
-    const controller = app.getControllerForElementAndIdentifier(element, 'maps-v2');
+    const controller = app.getControllerForElementAndIdentifier(element, 'maps--maplibre');
     if (!controller?.map) return { hasSource: false, featureCount: 0, features: [] };
 
     const source = controller.map.getSource('routes-source');
diff --git a/e2e/v2/map/area-selection.spec.js b/e2e/v2/map/area-selection.spec.js
index c17bd788..92262885 100644
--- a/e2e/v2/map/area-selection.spec.js
+++ b/e2e/v2/map/area-selection.spec.js
@@ -5,7 +5,7 @@ import { waitForMapLibre, waitForLoadingComplete } from '../helpers/setup.js'
 test.describe('Area Selection in Maps V2', () => {
   test.beforeEach(async ({ page }) => {
     // Navigate to Maps V2 with specific date range that has data
-    await page.goto('/maps_v2?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
+    await page.goto('/maps/maplibre?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
     await closeOnboardingModal(page)
     await waitForMapLibre(page)
     await waitForLoadingComplete(page)
@@ -15,17 +15,17 @@ test.describe('Area Selection in Maps V2', () => {
 
   test('should enable area selection mode when clicking Select Area button', async ({ page }) => {
     // Open settings panel and switch to Tools tab
-    await page.click('[data-action="click->maps-v2#toggleSettings"]')
+    await page.click('[data-action="click->maps--maplibre#toggleSettings"]')
     await page.click('button[data-tab="tools"]')
 
     // Click Select Area button
-    await page.click('[data-maps-v2-target="selectAreaButton"]')
+    await page.click('[data-maps--maplibre-target="selectAreaButton"]')
 
     // Wait a moment for UI to update
     await page.waitForTimeout(100)
 
     // Verify the button changes to Cancel Selection
-    const selectButton = page.locator('[data-maps-v2-target="selectAreaButton"]')
+    const selectButton = page.locator('[data-maps--maplibre-target="selectAreaButton"]')
     await expect(selectButton).toContainText('Cancel Selection', { timeout: 2000 })
 
     // Verify cursor changes to crosshair (via canvas style)
@@ -39,20 +39,20 @@ test.describe('Area Selection in Maps V2', () => {
 
   test('should draw selection rectangle when dragging mouse', async ({ page }) => {
     // Open settings panel and switch to Tools tab
-    await page.click('[data-action="click->maps-v2#toggleSettings"]')
+    await page.click('[data-action="click->maps--maplibre#toggleSettings"]')
     await page.click('button[data-tab="tools"]')
 
     // Click Select Area button
-    await page.click('[data-maps-v2-target="selectAreaButton"]')
+    await page.click('[data-maps--maplibre-target="selectAreaButton"]')
 
     // Wait for selection mode to be enabled
     await page.waitForTimeout(500)
 
     // Check if selection layer has been added to map
     const hasSelectionLayer = await page.evaluate(() => {
-      const element = document.querySelector('[data-controller*="maps-v2"]')
+      const element = document.querySelector('[data-controller*="maps--maplibre"]')
       const app = window.Stimulus || window.Application
-      const controller = app.getControllerForElementAndIdentifier(element, 'maps-v2')
+      const controller = app.getControllerForElementAndIdentifier(element, 'maps--maplibre')
       return controller.areaSelectionManager?.selectionLayer !== undefined
     })
     expect(hasSelectionLayer).toBeTruthy()
@@ -77,11 +77,11 @@ test.describe('Area Selection in Maps V2', () => {
 
   test('should show selection actions when points are selected', async ({ page }) => {
     // Open settings panel and switch to Tools tab
-    await page.click('[data-action="click->maps-v2#toggleSettings"]')
+    await page.click('[data-action="click->maps--maplibre#toggleSettings"]')
     await page.click('button[data-tab="tools"]')
 
     // Click Select Area button
-    await page.click('[data-maps-v2-target="selectAreaButton"]')
+    await page.click('[data-maps--maplibre-target="selectAreaButton"]')
 
     // Get map canvas
     const canvas = page.locator('canvas.maplibregl-canvas')
@@ -103,30 +103,30 @@ test.describe('Area Selection in Maps V2', () => {
     await page.waitForTimeout(1000)
 
     // If points were found, verify UI updates
-    const selectionActions = page.locator('[data-maps-v2-target="selectionActions"]')
+    const selectionActions = page.locator('[data-maps--maplibre-target="selectionActions"]')
     const isVisible = await selectionActions.isVisible().catch(() => false)
 
     if (isVisible) {
       // Verify delete button is visible and shows count
-      const deleteButton = page.locator('[data-maps-v2-target="deleteButtonText"]')
+      const deleteButton = page.locator('[data-maps--maplibre-target="deleteButtonText"]')
       await expect(deleteButton).toBeVisible()
 
       // Wait for button text to update with count
       await expect(deleteButton).toContainText(/Delete \d+ Points?/, { timeout: 2000 })
 
       // Verify the Select Area button has changed to Cancel Selection (at top of tools)
-      const selectButton = page.locator('[data-maps-v2-target="selectAreaButton"]')
+      const selectButton = page.locator('[data-maps--maplibre-target="selectAreaButton"]')
       await expect(selectButton).toContainText('Cancel Selection')
     }
   })
 
   test('should cancel area selection', async ({ page }) => {
     // Open settings panel and switch to Tools tab
-    await page.click('[data-action="click->maps-v2#toggleSettings"]')
+    await page.click('[data-action="click->maps--maplibre#toggleSettings"]')
     await page.click('button[data-tab="tools"]')
 
     // Click Select Area button
-    await page.click('[data-maps-v2-target="selectAreaButton"]')
+    await page.click('[data-maps--maplibre-target="selectAreaButton"]')
 
     // Wait for selection mode
     await page.waitForTimeout(500)
@@ -150,12 +150,12 @@ test.describe('Area Selection in Maps V2', () => {
     await page.waitForTimeout(500)
 
     // Check if selection actions are visible
-    const selectionActions = page.locator('[data-maps-v2-target="selectionActions"]')
+    const selectionActions = page.locator('[data-maps--maplibre-target="selectionActions"]')
     const isVisible = await selectionActions.isVisible().catch(() => false)
 
     if (isVisible) {
       // Click Cancel button (the red one at the top that replaced Select Area)
-      const cancelButton = page.locator('[data-maps-v2-target="selectAreaButton"]')
+      const cancelButton = page.locator('[data-maps--maplibre-target="selectAreaButton"]')
       await expect(cancelButton).toContainText('Cancel Selection')
       await cancelButton.click()
 
@@ -171,11 +171,11 @@ test.describe('Area Selection in Maps V2', () => {
 
   test('should display delete confirmation dialog', async ({ page }) => {
     // Open settings panel and switch to Tools tab
-    await page.click('[data-action="click->maps-v2#toggleSettings"]')
+    await page.click('[data-action="click->maps--maplibre#toggleSettings"]')
     await page.click('button[data-tab="tools"]')
 
     // Click Select Area button
-    await page.click('[data-maps-v2-target="selectAreaButton"]')
+    await page.click('[data-maps--maplibre-target="selectAreaButton"]')
 
     // Get map canvas
     const canvas = page.locator('canvas.maplibregl-canvas')
@@ -196,7 +196,7 @@ test.describe('Area Selection in Maps V2', () => {
     await page.waitForTimeout(500)
 
     // Check if selection actions are visible
-    const selectionActions = page.locator('[data-maps-v2-target="selectionActions"]')
+    const selectionActions = page.locator('[data-maps--maplibre-target="selectionActions"]')
     const isVisible = await selectionActions.isVisible().catch(() => false)
 
     if (isVisible) {
@@ -210,7 +210,7 @@ test.describe('Area Selection in Maps V2', () => {
       })
 
       // Click Delete button (text now includes count like "Delete 100 Points")
-      await page.locator('[data-maps-v2-target="deletePointsButton"]').click()
+      await page.locator('[data-maps--maplibre-target="deletePointsButton"]').click()
 
       // Wait for dialog to be handled
       await page.waitForTimeout(1000)
@@ -228,11 +228,11 @@ test.describe('Area Selection in Maps V2', () => {
     // by verifying the API call is made with the correct parameters when selecting an area
 
     // Open settings panel and switch to Tools tab
-    await page.click('[data-action="click->maps-v2#toggleSettings"]')
+    await page.click('[data-action="click->maps--maplibre#toggleSettings"]')
     await page.click('button[data-tab="tools"]')
 
     // Click Select Area button
-    await page.click('[data-maps-v2-target="selectAreaButton"]')
+    await page.click('[data-maps--maplibre-target="selectAreaButton"]')
     await page.waitForTimeout(500)
 
     // Get map canvas
@@ -269,11 +269,11 @@ test.describe('Area Selection in Maps V2', () => {
 
   test('should add selected points layer to map when points are selected', async ({ page }) => {
     // Open settings panel and switch to Tools tab
-    await page.click('[data-action="click->maps-v2#toggleSettings"]')
+    await page.click('[data-action="click->maps--maplibre#toggleSettings"]')
     await page.click('button[data-tab="tools"]')
 
     // Click Select Area button
-    await page.click('[data-maps-v2-target="selectAreaButton"]')
+    await page.click('[data-maps--maplibre-target="selectAreaButton"]')
 
     // Get map canvas
     const canvas = page.locator('canvas.maplibregl-canvas')
@@ -295,9 +295,9 @@ test.describe('Area Selection in Maps V2', () => {
 
     // Check if selected points layer exists
     const hasSelectedPointsLayer = await page.evaluate(() => {
-      const element = document.querySelector('[data-controller*="maps-v2"]')
+      const element = document.querySelector('[data-controller*="maps--maplibre"]')
       const app = window.Stimulus || window.Application
-      const controller = app.getControllerForElementAndIdentifier(element, 'maps-v2')
+      const controller = app.getControllerForElementAndIdentifier(element, 'maps--maplibre')
       return controller?.areaSelectionManager?.selectedPointsLayer !== undefined
     })
 
@@ -305,9 +305,9 @@ test.describe('Area Selection in Maps V2', () => {
     if (hasSelectedPointsLayer) {
       // Verify layer is on the map
       const layerExistsOnMap = await page.evaluate(() => {
-        const element = document.querySelector('[data-controller*="maps-v2"]')
+        const element = document.querySelector('[data-controller*="maps--maplibre"]')
         const app = window.Stimulus || window.Application
-        const controller = app.getControllerForElementAndIdentifier(element, 'maps-v2')
+        const controller = app.getControllerForElementAndIdentifier(element, 'maps--maplibre')
         return controller?.map?.getLayer('selected-points') !== undefined
       })
       expect(layerExistsOnMap).toBeTruthy()
diff --git a/e2e/v2/map/core.spec.js b/e2e/v2/map/core.spec.js
index e0ebee96..987f3cc5 100644
--- a/e2e/v2/map/core.spec.js
+++ b/e2e/v2/map/core.spec.js
@@ -18,7 +18,7 @@ test.describe('Map Core', () => {
 
   test.describe('Initialization', () => {
     test('loads map container', async ({ page }) => {
-      const mapContainer = page.locator('[data-maps-v2-target="container"]')
+      const mapContainer = page.locator('[data-maps--maplibre-target="container"]')
       await expect(mapContainer).toBeVisible()
     })
 
@@ -33,7 +33,7 @@ test.describe('Map Core', () => {
     })
 
     test('has valid initial center and zoom', async ({ page }) => {
-      await page.goto('/maps_v2?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
+      await page.goto('/maps/maplibre?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
       await closeOnboardingModal(page)
       await waitForMapLibre(page)
       await waitForLoadingComplete(page)
@@ -55,7 +55,7 @@ test.describe('Map Core', () => {
 
   test.describe('Loading States', () => {
     test('shows loading indicator during data fetch', async ({ page }) => {
-      const loading = page.locator('[data-maps-v2-target="loading"]')
+      const loading = page.locator('[data-maps--maplibre-target="loading"]')
 
       const navigationPromise = page.reload({ waitUntil: 'domcontentloaded' })
 
@@ -83,7 +83,7 @@ test.describe('Map Core', () => {
 
   test.describe('Data Bounds', () => {
     test('fits map bounds to loaded data', async ({ page }) => {
-      await page.goto('/maps_v2?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
+      await page.goto('/maps/maplibre?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
       await closeOnboardingModal(page)
       await waitForMapLibre(page)
       await waitForLoadingComplete(page)
@@ -96,7 +96,7 @@ test.describe('Map Core', () => {
 
   test.describe('Lifecycle', () => {
     test('cleans up and reinitializes on navigation', async ({ page }) => {
-      await page.goto('/maps_v2?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
+      await page.goto('/maps/maplibre?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
       await closeOnboardingModal(page)
       await waitForLoadingComplete(page)
 
@@ -114,7 +114,7 @@ test.describe('Map Core', () => {
     })
 
     test('reloads data when changing date range', async ({ page }) => {
-      await page.goto('/maps_v2?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
+      await page.goto('/maps/maplibre?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
       await closeOnboardingModal(page)
       await waitForLoadingComplete(page)
 
diff --git a/e2e/v2/map/interactions.spec.js b/e2e/v2/map/interactions.spec.js
index 18761a1f..5bf632cb 100644
--- a/e2e/v2/map/interactions.spec.js
+++ b/e2e/v2/map/interactions.spec.js
@@ -9,7 +9,7 @@ import {
 
 test.describe('Map Interactions', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto('/maps_v2?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
+    await page.goto('/maps/maplibre?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
     await closeOnboardingModal(page)
     await waitForLoadingComplete(page)
     await page.waitForTimeout(500)
@@ -57,7 +57,7 @@ test.describe('Map Interactions', () => {
 
   test.describe('Hover Effects', () => {
     test('map container is interactive', async ({ page }) => {
-      const mapContainer = page.locator('[data-maps-v2-target="container"]')
+      const mapContainer = page.locator('[data-maps--maplibre-target="container"]')
       await expect(mapContainer).toBeVisible()
     })
   })
diff --git a/e2e/v2/map/layers/advanced.spec.js b/e2e/v2/map/layers/advanced.spec.js
index 6de68ea8..9ae68570 100644
--- a/e2e/v2/map/layers/advanced.spec.js
+++ b/e2e/v2/map/layers/advanced.spec.js
@@ -3,12 +3,12 @@ import { closeOnboardingModal } from '../../../helpers/navigation.js'
 
 test.describe('Advanced Layers', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto('/maps_v2')
+    await page.goto('/maps/maplibre')
     await page.evaluate(() => {
-      localStorage.removeItem('dawarich-maps-v2-settings')
+      localStorage.removeItem('dawarich-maps--maplibre-settings')
     })
 
-    await page.goto('/maps_v2?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
+    await page.goto('/maps/maplibre?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
     await closeOnboardingModal(page)
     await page.waitForTimeout(2000)
   })
@@ -16,7 +16,7 @@ test.describe('Advanced Layers', () => {
   test.describe('Fog of War', () => {
     test('fog layer is disabled by default', async ({ page }) => {
       const fogEnabled = await page.evaluate(() => {
-        const settings = JSON.parse(localStorage.getItem('dawarich-maps-v2-settings') || '{}')
+        const settings = JSON.parse(localStorage.getItem('dawarich-maps--maplibre-settings') || '{}')
         return settings.fogEnabled
       })
 
diff --git a/e2e/v2/map/layers/areas.spec.js b/e2e/v2/map/layers/areas.spec.js
index 9684e807..2043c46b 100644
--- a/e2e/v2/map/layers/areas.spec.js
+++ b/e2e/v2/map/layers/areas.spec.js
@@ -14,7 +14,7 @@ test.describe('Areas Layer', () => {
   test.describe('Toggle', () => {
     test('areas layer toggle exists', async ({ page }) => {
       // Open settings panel
-      await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+      await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
       await page.waitForTimeout(200)
 
       // Click Layers tab
@@ -27,7 +27,7 @@ test.describe('Areas Layer', () => {
 
     test('can toggle areas layer', async ({ page }) => {
       // Open settings panel
-      await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+      await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
       await page.waitForTimeout(200)
 
       // Click Layers tab
@@ -46,7 +46,7 @@ test.describe('Areas Layer', () => {
   test.describe('Area Creation', () => {
     test('should have Create an Area button in Tools tab', async ({ page }) => {
       // Open settings
-      await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+      await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
       await page.waitForTimeout(200)
 
       // Click Tools tab
@@ -60,7 +60,7 @@ test.describe('Areas Layer', () => {
 
     test('should change cursor to crosshair when Create an Area is clicked', async ({ page }) => {
       // Open settings
-      await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+      await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
       await page.waitForTimeout(200)
       await page.locator('button[data-tab="tools"]').click()
       await page.waitForTimeout(200)
@@ -79,7 +79,7 @@ test.describe('Areas Layer', () => {
 
     test('should show area preview while drawing', async ({ page }) => {
       // Enable creation mode
-      await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+      await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
       await page.waitForTimeout(200)
       await page.locator('button[data-tab="tools"]').click()
       await page.waitForTimeout(200)
@@ -97,9 +97,9 @@ test.describe('Areas Layer', () => {
 
       // Verify draw layers exist
       const hasDrawLayers = await page.evaluate(() => {
-        const element = document.querySelector('[data-controller*="maps-v2"]')
+        const element = document.querySelector('[data-controller*="maps--maplibre"]')
         const app = window.Stimulus || window.Application
-        const controller = app?.getControllerForElementAndIdentifier(element, 'maps-v2')
+        const controller = app?.getControllerForElementAndIdentifier(element, 'maps--maplibre')
         const map = controller?.map
         return map && map.getSource('draw-source') !== undefined
       })
@@ -108,7 +108,7 @@ test.describe('Areas Layer', () => {
 
     test('should open modal when area is drawn', async ({ page }) => {
       // Enable creation mode
-      await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+      await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
       await page.waitForTimeout(200)
       await page.locator('button[data-tab="tools"]').click()
       await page.waitForTimeout(200)
@@ -133,7 +133,7 @@ test.describe('Areas Layer', () => {
 
     test('should display radius and location in modal', async ({ page }) => {
       // Enable creation mode and draw area
-      await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+      await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
       await page.waitForTimeout(200)
       await page.locator('button[data-tab="tools"]').click()
       await page.waitForTimeout(200)
@@ -167,7 +167,7 @@ test.describe('Areas Layer', () => {
 
     test('should create area and enable layer when submitted', async ({ page }) => {
       // Draw area
-      await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+      await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
       await page.waitForTimeout(200)
       await page.locator('button[data-tab="tools"]').click()
       await page.waitForTimeout(200)
@@ -224,7 +224,7 @@ test.describe('Areas Layer', () => {
         await page.waitForTimeout(1000)
 
         // Verify areas layer is now enabled
-        await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+        await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
         await page.waitForTimeout(200)
         await page.locator('button[data-tab="layers"]').click()
         await page.waitForTimeout(200)
diff --git a/e2e/v2/map/layers/heatmap.spec.js b/e2e/v2/map/layers/heatmap.spec.js
index 8dd3a4fb..dd3656f9 100644
--- a/e2e/v2/map/layers/heatmap.spec.js
+++ b/e2e/v2/map/layers/heatmap.spec.js
@@ -3,7 +3,7 @@ import { closeOnboardingModal } from '../../../helpers/navigation.js'
 
 test.describe('Heatmap Layer', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto('/maps_v2?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
+    await page.goto('/maps/maplibre?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
     await closeOnboardingModal(page)
     await page.waitForTimeout(2000)
   })
@@ -22,18 +22,18 @@ test.describe('Heatmap Layer', () => {
 
       // Wait for heatmap layer to be created
       await page.waitForFunction(() => {
-        const element = document.querySelector('[data-controller*="maps-v2"]')
+        const element = document.querySelector('[data-controller*="maps--maplibre"]')
         if (!element) return false
         const app = window.Stimulus || window.Application
-        const controller = app?.getControllerForElementAndIdentifier(element, 'maps-v2')
+        const controller = app?.getControllerForElementAndIdentifier(element, 'maps--maplibre')
         return controller?.map?.getLayer('heatmap') !== undefined
       }, { timeout: 3000 }).catch(() => false)
 
       const hasHeatmap = await page.evaluate(() => {
-        const element = document.querySelector('[data-controller*="maps-v2"]')
+        const element = document.querySelector('[data-controller*="maps--maplibre"]')
         if (!element) return false
         const app = window.Stimulus || window.Application
-        const controller = app?.getControllerForElementAndIdentifier(element, 'maps-v2')
+        const controller = app?.getControllerForElementAndIdentifier(element, 'maps--maplibre')
         return controller?.map?.getLayer('heatmap') !== undefined
       })
 
@@ -70,7 +70,7 @@ test.describe('Heatmap Layer', () => {
       await page.waitForTimeout(500)
 
       const settings = await page.evaluate(() => {
-        return localStorage.getItem('dawarich-maps-v2-settings')
+        return localStorage.getItem('dawarich-maps--maplibre-settings')
       })
 
       const parsed = JSON.parse(settings)
diff --git a/e2e/v2/map/layers/places.spec.js b/e2e/v2/map/layers/places.spec.js
index 53aaf1f1..80d6933d 100644
--- a/e2e/v2/map/layers/places.spec.js
+++ b/e2e/v2/map/layers/places.spec.js
@@ -18,7 +18,7 @@ test.describe('Places Layer in Maps V2', () => {
 
   test('should have Tools tab with Create a Place button', async ({ page }) => {
     // Click settings button
-    await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+    await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
     await page.waitForTimeout(200)
 
     // Click Tools tab
@@ -32,7 +32,7 @@ test.describe('Places Layer in Maps V2', () => {
 
   test('should enable place creation mode when Create a Place is clicked', async ({ page }) => {
     // Open Tools tab
-    await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+    await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
     await page.waitForTimeout(200)
     await page.locator('button[data-tab="tools"]').click()
     await page.waitForTimeout(200)
@@ -51,7 +51,7 @@ test.describe('Places Layer in Maps V2', () => {
 
   test('should open modal when map is clicked in creation mode', async ({ page }) => {
     // Enable creation mode
-    await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+    await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
     await page.waitForTimeout(200)
     await page.locator('button[data-tab="tools"]').click()
     await page.waitForTimeout(200)
@@ -74,7 +74,7 @@ test.describe('Places Layer in Maps V2', () => {
 
   test('should have Places toggle in settings', async ({ page }) => {
     // Open settings
-    await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+    await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
     await page.waitForTimeout(200)
 
     // Click Layers tab
@@ -92,7 +92,7 @@ test.describe('Places Layer in Maps V2', () => {
 
   test('should show tag filters when Places toggle is enabled with all tags enabled by default', async ({ page }) => {
     // Open settings
-    await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+    await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
     await page.waitForTimeout(200)
 
     // Click Layers tab
@@ -105,11 +105,11 @@ test.describe('Places Layer in Maps V2', () => {
     await page.waitForTimeout(1000)
 
     // Verify filters are visible
-    const placesFilters = page.locator('[data-maps-v2-target="placesFilters"]')
+    const placesFilters = page.locator('[data-maps--maplibre-target="placesFilters"]')
     await expect(placesFilters).toBeVisible()
 
     // Verify "Enable All Tags" toggle is enabled by default
-    const enableAllToggle = page.locator('input[data-maps-v2-target="enableAllPlaceTagsToggle"]')
+    const enableAllToggle = page.locator('input[data-maps--maplibre-target="enableAllPlaceTagsToggle"]')
     await expect(enableAllToggle).toBeChecked()
 
     // Verify all tag checkboxes are checked by default
@@ -127,7 +127,7 @@ test.describe('Places Layer in Maps V2', () => {
 
   test('should toggle tag filter styling when clicked', async ({ page }) => {
     // Open settings and enable Places
-    await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+    await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
     await page.waitForTimeout(200)
 
     // Click Layers tab
@@ -139,8 +139,8 @@ test.describe('Places Layer in Maps V2', () => {
     await page.waitForTimeout(1000)
 
     // Get first tag badge (in Places filters section) - click badge since checkbox is hidden
-    const firstBadge = page.locator('[data-maps-v2-target="placesFilters"] .badge').first()
-    const firstCheckbox = page.locator('[data-maps-v2-target="placesFilters"] input[name="place_tag_ids[]"]').first()
+    const firstBadge = page.locator('[data-maps--maplibre-target="placesFilters"] .badge').first()
+    const firstCheckbox = page.locator('[data-maps--maplibre-target="placesFilters"] input[name="place_tag_ids[]"]').first()
 
     // Check initial state (should be checked by default)
     await expect(firstCheckbox).toBeChecked()
@@ -160,7 +160,7 @@ test.describe('Places Layer in Maps V2', () => {
 
   test('should hide tag filters when Places toggle is disabled', async ({ page }) => {
     // Open settings
-    await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+    await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
     await page.waitForTimeout(200)
 
     // Click Layers tab
@@ -175,14 +175,14 @@ test.describe('Places Layer in Maps V2', () => {
     await page.waitForTimeout(300)
 
     // Verify filters are hidden
-    const placesFilters = page.locator('[data-maps-v2-target="placesFilters"]')
+    const placesFilters = page.locator('[data-maps--maplibre-target="placesFilters"]')
     const isVisible = await placesFilters.isVisible()
     expect(isVisible).toBe(false)
   })
 
   test('can toggle places layer', async ({ page }) => {
     // Open settings
-    await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+    await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
     await page.waitForTimeout(200)
 
     // Click Layers tab
@@ -201,7 +201,7 @@ test.describe('Places Layer in Maps V2', () => {
 
   test('should show popup when clicking on a place marker', async ({ page }) => {
     // Enable Places layer
-    await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+    await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
     await page.waitForTimeout(200)
 
     // Click Layers tab
@@ -213,7 +213,7 @@ test.describe('Places Layer in Maps V2', () => {
     await page.waitForTimeout(1000)
 
     // Close settings to make map clickable
-    await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+    await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
     await page.waitForTimeout(200)
 
     // Try to click on a place marker (if any exist)
@@ -233,7 +233,7 @@ test.describe('Places Layer in Maps V2', () => {
 
   test('should sync Enable All Tags toggle with individual tag checkboxes', async ({ page }) => {
     // Open settings and enable Places
-    await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+    await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
     await page.waitForTimeout(200)
 
     // Click Layers tab
@@ -244,14 +244,14 @@ test.describe('Places Layer in Maps V2', () => {
     await placesToggle.check()
     await page.waitForTimeout(1000)
 
-    const enableAllToggle = page.locator('input[data-maps-v2-target="enableAllPlaceTagsToggle"]')
+    const enableAllToggle = page.locator('input[data-maps--maplibre-target="enableAllPlaceTagsToggle"]')
 
     // Initially all tags should be enabled
     await expect(enableAllToggle).toBeChecked()
 
     // Click first badge to uncheck it (checkbox is hidden, must click badge)
-    const firstBadge = page.locator('[data-maps-v2-target="placesFilters"] .badge').first()
-    const firstCheckbox = page.locator('[data-maps-v2-target="placesFilters"] input[name="place_tag_ids[]"]').first()
+    const firstBadge = page.locator('[data-maps--maplibre-target="placesFilters"] .badge').first()
+    const firstCheckbox = page.locator('[data-maps--maplibre-target="placesFilters"] input[name="place_tag_ids[]"]').first()
 
     await firstBadge.click()
     await page.waitForTimeout(300)
@@ -269,7 +269,7 @@ test.describe('Places Layer in Maps V2', () => {
 
   test('should enable/disable all tags when Enable All Tags toggle is clicked', async ({ page }) => {
     // Open settings and enable Places
-    await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+    await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
     await page.waitForTimeout(200)
 
     // Click Layers tab
@@ -280,7 +280,7 @@ test.describe('Places Layer in Maps V2', () => {
     await placesToggle.check()
     await page.waitForTimeout(1000)
 
-    const enableAllToggle = page.locator('input[data-maps-v2-target="enableAllPlaceTagsToggle"]')
+    const enableAllToggle = page.locator('input[data-maps--maplibre-target="enableAllPlaceTagsToggle"]')
 
     // Disable all tags
     await enableAllToggle.uncheck()
@@ -305,7 +305,7 @@ test.describe('Places Layer in Maps V2', () => {
 
   test('should show no places when all tags are unchecked', async ({ page }) => {
     // Open settings and enable Places
-    await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+    await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
     await page.waitForTimeout(200)
 
     // Click Layers tab
@@ -317,7 +317,7 @@ test.describe('Places Layer in Maps V2', () => {
     await page.waitForTimeout(1000)
 
     // Disable all tags
-    const enableAllToggle = page.locator('input[data-maps-v2-target="enableAllPlaceTagsToggle"]')
+    const enableAllToggle = page.locator('input[data-maps--maplibre-target="enableAllPlaceTagsToggle"]')
     await enableAllToggle.uncheck()
     await page.waitForTimeout(1000)
 
diff --git a/e2e/v2/map/layers/points.spec.js b/e2e/v2/map/layers/points.spec.js
index 4f0cd91f..974e2d51 100644
--- a/e2e/v2/map/layers/points.spec.js
+++ b/e2e/v2/map/layers/points.spec.js
@@ -9,7 +9,7 @@ import {
 
 test.describe('Points Layer', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto('/maps_v2?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
+    await page.goto('/maps/maplibre?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
     await closeOnboardingModal(page)
     await waitForLoadingComplete(page)
     await page.waitForTimeout(1500)
@@ -19,9 +19,9 @@ test.describe('Points Layer', () => {
     test('displays points layer', async ({ page }) => {
       // Wait for points layer to be added
       await page.waitForFunction(() => {
-        const element = document.querySelector('[data-controller*="maps-v2"]')
+        const element = document.querySelector('[data-controller*="maps--maplibre"]')
         const app = window.Stimulus || window.Application
-        const controller = app?.getControllerForElementAndIdentifier(element, 'maps-v2')
+        const controller = app?.getControllerForElementAndIdentifier(element, 'maps--maplibre')
         return controller?.map?.getLayer('points') !== undefined
       }, { timeout: 10000 }).catch(() => false)
 
@@ -31,9 +31,9 @@ test.describe('Points Layer', () => {
 
     test('loads and displays point data', async ({ page }) => {
       await page.waitForFunction(() => {
-        const element = document.querySelector('[data-controller*="maps-v2"]')
+        const element = document.querySelector('[data-controller*="maps--maplibre"]')
         const app = window.Stimulus || window.Application
-        const controller = app?.getControllerForElementAndIdentifier(element, 'maps-v2')
+        const controller = app?.getControllerForElementAndIdentifier(element, 'maps--maplibre')
         return controller?.map?.getSource('points-source') !== undefined
       }, { timeout: 15000 }).catch(() => false)
 
@@ -47,9 +47,9 @@ test.describe('Points Layer', () => {
     test('points source contains valid GeoJSON features', async ({ page }) => {
       // Wait for source to be added
       await page.waitForFunction(() => {
-        const element = document.querySelector('[data-controller*="maps-v2"]')
+        const element = document.querySelector('[data-controller*="maps--maplibre"]')
         const app = window.Stimulus || window.Application
-        const controller = app?.getControllerForElementAndIdentifier(element, 'maps-v2')
+        const controller = app?.getControllerForElementAndIdentifier(element, 'maps--maplibre')
         return controller?.map?.getSource('points-source') !== undefined
       }, { timeout: 10000 }).catch(() => false)
 
diff --git a/e2e/v2/map/layers/routes.spec.js b/e2e/v2/map/layers/routes.spec.js
index bbfcb959..d3d8ccc9 100644
--- a/e2e/v2/map/layers/routes.spec.js
+++ b/e2e/v2/map/layers/routes.spec.js
@@ -11,7 +11,7 @@ import {
 
 test.describe('Routes Layer', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto('/maps_v2?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
+    await page.goto('/maps/maplibre?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
     await closeOnboardingModal(page)
     await waitForMapLibre(page)
     await waitForLoadingComplete(page)
@@ -21,11 +21,11 @@ test.describe('Routes Layer', () => {
   test.describe('Layer Existence', () => {
     test('routes layer exists on map', async ({ page }) => {
       await page.waitForFunction(() => {
-        const element = document.querySelector('[data-controller*="maps-v2"]')
+        const element = document.querySelector('[data-controller*="maps--maplibre"]')
         if (!element) return false
         const app = window.Stimulus || window.Application
         if (!app) return false
-        const controller = app.getControllerForElementAndIdentifier(element, 'maps-v2')
+        const controller = app.getControllerForElementAndIdentifier(element, 'maps--maplibre')
         return controller?.map?.getLayer('routes') !== undefined
       }, { timeout: 10000 }).catch(() => false)
 
@@ -37,11 +37,11 @@ test.describe('Routes Layer', () => {
   test.describe('Data Source', () => {
     test('routes source has data', async ({ page }) => {
       await page.waitForFunction(() => {
-        const element = document.querySelector('[data-controller*="maps-v2"]')
+        const element = document.querySelector('[data-controller*="maps--maplibre"]')
         if (!element) return false
         const app = window.Stimulus || window.Application
         if (!app) return false
-        const controller = app.getControllerForElementAndIdentifier(element, 'maps-v2')
+        const controller = app.getControllerForElementAndIdentifier(element, 'maps--maplibre')
         return controller?.map?.getSource('routes-source') !== undefined
       }, { timeout: 20000 })
 
@@ -92,22 +92,22 @@ test.describe('Routes Layer', () => {
   test.describe('Styling', () => {
     test('routes have solid color', async ({ page }) => {
       await page.waitForFunction(() => {
-        const element = document.querySelector('[data-controller*="maps-v2"]')
+        const element = document.querySelector('[data-controller*="maps--maplibre"]')
         if (!element) return false
         const app = window.Stimulus || window.Application
         if (!app) return false
-        const controller = app.getControllerForElementAndIdentifier(element, 'maps-v2')
+        const controller = app.getControllerForElementAndIdentifier(element, 'maps--maplibre')
         return controller?.map?.getLayer('routes') !== undefined
       }, { timeout: 20000 })
 
       const routeLayerInfo = await page.evaluate(() => {
-        const element = document.querySelector('[data-controller*="maps-v2"]')
+        const element = document.querySelector('[data-controller*="maps--maplibre"]')
         if (!element) return null
 
         const app = window.Stimulus || window.Application
         if (!app) return null
 
-        const controller = app.getControllerForElementAndIdentifier(element, 'maps-v2')
+        const controller = app.getControllerForElementAndIdentifier(element, 'maps--maplibre')
         if (!controller?.map) return null
 
         const layer = controller.map.getLayer('routes')
@@ -132,21 +132,21 @@ test.describe('Routes Layer', () => {
   test.describe('Layer Order', () => {
     test('routes layer renders below points layer', async ({ page }) => {
       await page.waitForFunction(() => {
-        const element = document.querySelector('[data-controller*="maps-v2"]')
+        const element = document.querySelector('[data-controller*="maps--maplibre"]')
         const app = window.Stimulus || window.Application
-        const controller = app?.getControllerForElementAndIdentifier(element, 'maps-v2')
+        const controller = app?.getControllerForElementAndIdentifier(element, 'maps--maplibre')
         return controller?.map?.getLayer('routes') !== undefined &&
                controller?.map?.getLayer('points') !== undefined
       }, { timeout: 10000 })
 
       const layerOrder = await page.evaluate(() => {
-        const element = document.querySelector('[data-controller*="maps-v2"]')
+        const element = document.querySelector('[data-controller*="maps--maplibre"]')
         if (!element) return null
 
         const app = window.Stimulus || window.Application
         if (!app) return null
 
-        const controller = app.getControllerForElementAndIdentifier(element, 'maps-v2')
+        const controller = app.getControllerForElementAndIdentifier(element, 'maps--maplibre')
         if (!controller?.map) return null
 
         const style = controller.map.getStyle()
diff --git a/e2e/v2/map/layers/visits.spec.js b/e2e/v2/map/layers/visits.spec.js
index d724822a..afe1b088 100644
--- a/e2e/v2/map/layers/visits.spec.js
+++ b/e2e/v2/map/layers/visits.spec.js
@@ -73,7 +73,7 @@ test.describe('Visits Layer', () => {
       await page.waitForTimeout(500)
 
       // Verify settings panel closed
-      const settingsPanel = page.locator('[data-maps-v2-target="settingsPanel"]')
+      const settingsPanel = page.locator('[data-maps--maplibre-target="settingsPanel"]')
       const hasPanelOpenClass = await settingsPanel.evaluate((el) => el.classList.contains('open'))
       expect(hasPanelOpenClass).toBe(false)
 
diff --git a/e2e/v2/map/performance.spec.js b/e2e/v2/map/performance.spec.js
index af67bdac..b64b1605 100644
--- a/e2e/v2/map/performance.spec.js
+++ b/e2e/v2/map/performance.spec.js
@@ -6,7 +6,7 @@ test.describe('Map Performance', () => {
   test('map loads within acceptable time', async ({ page }) => {
     const startTime = Date.now()
 
-    await page.goto('/maps_v2?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
+    await page.goto('/maps/maplibre?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
     await closeOnboardingModal(page)
     await waitForMapLibre(page)
     await waitForLoadingComplete(page)
@@ -19,7 +19,7 @@ test.describe('Map Performance', () => {
   })
 
   test('handles large datasets efficiently', async ({ page }) => {
-    await page.goto('/maps_v2?start_at=2025-10-01T00:00&end_at=2025-10-31T23:59')
+    await page.goto('/maps/maplibre?start_at=2025-10-01T00:00&end_at=2025-10-31T23:59')
     await closeOnboardingModal(page)
 
     const startTime = Date.now()
diff --git a/e2e/v2/map/search.spec.js b/e2e/v2/map/search.spec.js
index 7fd17c26..b8be7b57 100644
--- a/e2e/v2/map/search.spec.js
+++ b/e2e/v2/map/search.spec.js
@@ -4,7 +4,7 @@ import { waitForMapLibre, waitForLoadingComplete } from '../helpers/setup.js'
 
 test.describe('Location Search', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto('/maps_v2?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
+    await page.goto('/maps/maplibre?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
     await closeOnboardingModal(page)
     await waitForMapLibre(page)
     await waitForLoadingComplete(page)
@@ -18,7 +18,7 @@ test.describe('Location Search', () => {
       await page.waitForTimeout(400)
 
       // Search tab should be active by default
-      const searchInput = page.locator('[data-maps-v2-target="searchInput"]')
+      const searchInput = page.locator('[data-maps--maplibre-target="searchInput"]')
       await expect(searchInput).toBeVisible()
       await expect(searchInput).toHaveAttribute('placeholder', 'Enter name of a place')
     })
@@ -27,7 +27,7 @@ test.describe('Location Search', () => {
       await page.click('button[title="Open map settings"]')
       await page.waitForTimeout(400)
 
-      const resultsContainer = page.locator('[data-maps-v2-target="searchResults"]')
+      const resultsContainer = page.locator('[data-maps--maplibre-target="searchResults"]')
       await expect(resultsContainer).toBeAttached()
       await expect(resultsContainer).toHaveClass(/hidden/)
     })
@@ -38,14 +38,14 @@ test.describe('Location Search', () => {
       await page.click('button[title="Open map settings"]')
       await page.waitForTimeout(400)
 
-      const searchInput = page.locator('[data-maps-v2-target="searchInput"]')
+      const searchInput = page.locator('[data-maps--maplibre-target="searchInput"]')
 
       // Type a search query
       await searchInput.fill('New')
       await page.waitForTimeout(500) // Wait for debounce
 
       // Results container should become visible (or show loading)
-      const resultsContainer = page.locator('[data-maps-v2-target="searchResults"]')
+      const resultsContainer = page.locator('[data-maps--maplibre-target="searchResults"]')
 
       // Wait for results to appear
       await page.waitForTimeout(1000)
@@ -63,8 +63,8 @@ test.describe('Location Search', () => {
       await page.click('button[title="Open map settings"]')
       await page.waitForTimeout(400)
 
-      const searchInput = page.locator('[data-maps-v2-target="searchInput"]')
-      const resultsContainer = page.locator('[data-maps-v2-target="searchResults"]')
+      const searchInput = page.locator('[data-maps--maplibre-target="searchInput"]')
+      const resultsContainer = page.locator('[data-maps--maplibre-target="searchResults"]')
 
       // Type single character
       await searchInput.fill('N')
@@ -78,8 +78,8 @@ test.describe('Location Search', () => {
       await page.click('button[title="Open map settings"]')
       await page.waitForTimeout(400)
 
-      const searchInput = page.locator('[data-maps-v2-target="searchInput"]')
-      const resultsContainer = page.locator('[data-maps-v2-target="searchResults"]')
+      const searchInput = page.locator('[data-maps--maplibre-target="searchInput"]')
+      const resultsContainer = page.locator('[data-maps--maplibre-target="searchResults"]')
 
       // Type search query
       await searchInput.fill('New York')
@@ -100,18 +100,18 @@ test.describe('Location Search', () => {
       await page.waitForTimeout(1000)
 
       const hasSearchManager = await page.evaluate(() => {
-        const element = document.querySelector('[data-controller*="maps-v2"]')
+        const element = document.querySelector('[data-controller*="maps--maplibre"]')
         if (!element) return false
 
         const app = window.Stimulus || window.Application
         if (!app) return false
 
-        const controller = app.getControllerForElementAndIdentifier(element, 'maps-v2')
+        const controller = app.getControllerForElementAndIdentifier(element, 'maps--maplibre')
         return controller?.searchManager !== undefined
       })
 
       // Search manager should exist if search targets are present
-      const hasSearchTargets = await page.locator('[data-maps-v2-target="searchInput"]').count()
+      const hasSearchTargets = await page.locator('[data-maps--maplibre-target="searchInput"]').count()
       if (hasSearchTargets > 0) {
         expect(hasSearchManager).toBe(true)
       }
@@ -121,7 +121,7 @@ test.describe('Location Search', () => {
       await page.click('button[title="Open map settings"]')
       await page.waitForTimeout(400)
 
-      const searchInput = page.locator('[data-maps-v2-target="searchInput"]')
+      const searchInput = page.locator('[data-maps--maplibre-target="searchInput"]')
       await expect(searchInput).toHaveAttribute('autocomplete', 'off')
     })
   })
@@ -131,8 +131,8 @@ test.describe('Location Search', () => {
       await page.click('button[title="Open map settings"]')
       await page.waitForTimeout(400)
 
-      const searchInput = page.locator('[data-maps-v2-target="searchInput"]')
-      const resultsContainer = page.locator('[data-maps-v2-target="searchResults"]')
+      const searchInput = page.locator('[data-maps--maplibre-target="searchInput"]')
+      const resultsContainer = page.locator('[data-maps--maplibre-target="searchResults"]')
 
       // Search for a location
       await searchInput.fill('Sterndamm')
@@ -157,8 +157,8 @@ test.describe('Location Search', () => {
       await page.click('button[title="Open map settings"]')
       await page.waitForTimeout(400)
 
-      const searchInput = page.locator('[data-maps-v2-target="searchInput"]')
-      const resultsContainer = page.locator('[data-maps-v2-target="searchResults"]')
+      const searchInput = page.locator('[data-maps--maplibre-target="searchInput"]')
+      const resultsContainer = page.locator('[data-maps--maplibre-target="searchResults"]')
 
       // Search and select location
       await searchInput.fill('Sterndamm')
@@ -191,8 +191,8 @@ test.describe('Location Search', () => {
       await page.click('button[title="Open map settings"]')
       await page.waitForTimeout(400)
 
-      const searchInput = page.locator('[data-maps-v2-target="searchInput"]')
-      const resultsContainer = page.locator('[data-maps-v2-target="searchResults"]')
+      const searchInput = page.locator('[data-maps--maplibre-target="searchInput"]')
+      const resultsContainer = page.locator('[data-maps--maplibre-target="searchResults"]')
 
       // Search and select location
       await searchInput.fill('Sterndamm')
@@ -236,8 +236,8 @@ test.describe('Location Search', () => {
       await page.click('button[title="Open map settings"]')
       await page.waitForTimeout(400)
 
-      const searchInput = page.locator('[data-maps-v2-target="searchInput"]')
-      const resultsContainer = page.locator('[data-maps-v2-target="searchResults"]')
+      const searchInput = page.locator('[data-maps--maplibre-target="searchInput"]')
+      const resultsContainer = page.locator('[data-maps--maplibre-target="searchResults"]')
 
       // Search and select location
       await searchInput.fill('Sterndamm')
@@ -288,7 +288,7 @@ test.describe('Location Search', () => {
       await page.click('button[title="Open map settings"]')
       await page.waitForTimeout(400)
 
-      const resultsContainer = page.locator('[data-maps-v2-target="searchResults"]')
+      const resultsContainer = page.locator('[data-maps--maplibre-target="searchResults"]')
 
       // Check max-height class is set appropriately (max-h-96)
       const hasMaxHeight = await resultsContainer.evaluate(el => {
@@ -305,7 +305,7 @@ test.describe('Location Search', () => {
       await page.click('button[title="Open map settings"]')
       await page.waitForTimeout(400)
 
-      const searchInput = page.locator('[data-maps-v2-target="searchInput"]')
+      const searchInput = page.locator('[data-maps--maplibre-target="searchInput"]')
 
       // Focus input with keyboard
       await searchInput.focus()
diff --git a/e2e/v2/map/settings.spec.js b/e2e/v2/map/settings.spec.js
index adac4848..4daf00cc 100644
--- a/e2e/v2/map/settings.spec.js
+++ b/e2e/v2/map/settings.spec.js
@@ -4,14 +4,14 @@ import { getLayerVisibility } from '../helpers/setup.js'
 
 test.describe('Map Settings', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto('/maps_v2?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
+    await page.goto('/maps/maplibre?start_at=2025-10-15T00:00&end_at=2025-10-15T23:59')
     await closeOnboardingModal(page)
     await page.waitForTimeout(2000)
   })
 
   test.describe('Settings Panel', () => {
     test('opens and closes settings panel', async ({ page }) => {
-      const panel = page.locator('[data-maps-v2-target="settingsPanel"]')
+      const panel = page.locator('[data-maps--maplibre-target="settingsPanel"]')
 
       // Verify panel exists but is not open initially
       await expect(panel).toBeVisible()
@@ -62,9 +62,9 @@ test.describe('Map Settings', () => {
     test('points layer visibility matches toggle state', async ({ page }) => {
       // Wait for points layer to exist
       await page.waitForFunction(() => {
-        const element = document.querySelector('[data-controller*="maps-v2"]')
+        const element = document.querySelector('[data-controller*="maps--maplibre"]')
         const app = window.Stimulus || window.Application
-        const controller = app?.getControllerForElementAndIdentifier(element, 'maps-v2')
+        const controller = app?.getControllerForElementAndIdentifier(element, 'maps--maplibre')
         return controller?.map?.getLayer('points') !== undefined
       }, { timeout: 5000 }).catch(() => false)
 
@@ -84,9 +84,9 @@ test.describe('Map Settings', () => {
     test('routes layer visibility matches toggle state', async ({ page }) => {
       // Wait for routes layer to exist
       await page.waitForFunction(() => {
-        const element = document.querySelector('[data-controller*="maps-v2"]')
+        const element = document.querySelector('[data-controller*="maps--maplibre"]')
         const app = window.Stimulus || window.Application
-        const controller = app?.getControllerForElementAndIdentifier(element, 'maps-v2')
+        const controller = app?.getControllerForElementAndIdentifier(element, 'maps--maplibre')
         return controller?.map?.getLayer('routes') !== undefined
       }, { timeout: 5000 }).catch(() => false)
 
@@ -182,7 +182,7 @@ test.describe('Map Settings', () => {
       const initialState = await pointsToggle.isChecked()
 
       const settings = await page.evaluate(() => {
-        return localStorage.getItem('dawarich-maps-v2-settings')
+        return localStorage.getItem('dawarich-maps--maplibre-settings')
       })
 
       expect(settings).toBeTruthy()
diff --git a/e2e/v2/realtime/family.spec.js b/e2e/v2/realtime/family.spec.js
index 9e17eba3..d9a28175 100644
--- a/e2e/v2/realtime/family.spec.js
+++ b/e2e/v2/realtime/family.spec.js
@@ -14,9 +14,9 @@ test.describe('Realtime Family Tracking', () => {
     test.skip('family layer exists but is hidden by default', async ({ page }) => {
       // Family layer is created but hidden until ActionCable data arrives
       const layerExists = await page.evaluate(() => {
-        const element = document.querySelector('[data-controller*="maps-v2"]')
+        const element = document.querySelector('[data-controller*="maps--maplibre"]')
         const app = window.Stimulus || window.Application
-        const controller = app?.getControllerForElementAndIdentifier(element, 'maps-v2')
+        const controller = app?.getControllerForElementAndIdentifier(element, 'maps--maplibre')
         return controller?.map?.getLayer('family') !== undefined
       })
 
diff --git a/e2e/v2/realtime/live-mode.spec.js b/e2e/v2/realtime/live-mode.spec.js
index f81f62e9..1a3febb1 100644
--- a/e2e/v2/realtime/live-mode.spec.js
+++ b/e2e/v2/realtime/live-mode.spec.js
@@ -14,7 +14,7 @@ test.describe('Live Mode', () => {
   test.describe('Live Mode Toggle', () => {
     test('should have live mode toggle in settings', async ({ page }) => {
       // Open settings
-      await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+      await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
       await page.waitForTimeout(300)
 
       // Click Settings tab
@@ -22,7 +22,7 @@ test.describe('Live Mode', () => {
       await page.waitForTimeout(300)
 
       // Verify Live Mode toggle exists
-      const liveModeToggle = page.locator('[data-maps-v2-realtime-target="liveModeToggle"]')
+      const liveModeToggle = page.locator('[data-maps--maplibre-realtime-target="liveModeToggle"]')
       await expect(liveModeToggle).toBeVisible()
 
       // Verify label text
@@ -36,12 +36,12 @@ test.describe('Live Mode', () => {
 
     test('should toggle live mode on and off', async ({ page }) => {
       // Open settings
-      await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+      await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
       await page.waitForTimeout(300)
       await page.locator('button[data-tab="settings"]').click()
       await page.waitForTimeout(300)
 
-      const liveModeToggle = page.locator('[data-maps-v2-realtime-target="liveModeToggle"]')
+      const liveModeToggle = page.locator('[data-maps--maplibre-realtime-target="liveModeToggle"]')
 
       // Get initial state
       const initialState = await liveModeToggle.isChecked()
@@ -65,12 +65,12 @@ test.describe('Live Mode', () => {
 
     test('should show toast notification when toggling live mode', async ({ page }) => {
       // Open settings
-      await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+      await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
       await page.waitForTimeout(300)
       await page.locator('button[data-tab="settings"]').click()
       await page.waitForTimeout(300)
 
-      const liveModeToggle = page.locator('[data-maps-v2-realtime-target="liveModeToggle"]')
+      const liveModeToggle = page.locator('[data-maps--maplibre-realtime-target="liveModeToggle"]')
       const initialState = await liveModeToggle.isChecked()
 
       // Toggle and watch for toast
@@ -86,20 +86,20 @@ test.describe('Live Mode', () => {
   test.describe('Realtime Controller', () => {
     test('should initialize realtime controller when enabled', async ({ page }) => {
       const realtimeControllerExists = await page.evaluate(() => {
-        const element = document.querySelector('[data-controller*="maps-v2-realtime"]')
+        const element = document.querySelector('[data-controller*="maps--maplibre-realtime"]')
         const app = window.Stimulus || window.Application
-        const controller = app?.getControllerForElementAndIdentifier(element, 'maps-v2-realtime')
+        const controller = app?.getControllerForElementAndIdentifier(element, 'maps--maplibre-realtime')
         return controller !== undefined
       })
 
       expect(realtimeControllerExists).toBe(true)
     })
 
-    test('should have access to maps-v2 controller', async ({ page }) => {
+    test('should have access to maps--maplibre controller', async ({ page }) => {
       const hasMapsController = await page.evaluate(() => {
-        const element = document.querySelector('[data-controller*="maps-v2-realtime"]')
+        const element = document.querySelector('[data-controller*="maps--maplibre-realtime"]')
         const app = window.Stimulus || window.Application
-        const realtimeController = app?.getControllerForElementAndIdentifier(element, 'maps-v2-realtime')
+        const realtimeController = app?.getControllerForElementAndIdentifier(element, 'maps--maplibre-realtime')
         const mapsController = realtimeController?.mapsV2Controller
         return mapsController !== undefined && mapsController.map !== undefined
       })
@@ -112,9 +112,9 @@ test.describe('Live Mode', () => {
       await page.waitForTimeout(2000)
 
       const channelsInitialized = await page.evaluate(() => {
-        const element = document.querySelector('[data-controller*="maps-v2-realtime"]')
+        const element = document.querySelector('[data-controller*="maps--maplibre-realtime"]')
         const app = window.Stimulus || window.Application
-        const controller = app?.getControllerForElementAndIdentifier(element, 'maps-v2-realtime')
+        const controller = app?.getControllerForElementAndIdentifier(element, 'maps--maplibre-realtime')
         return controller?.channels !== undefined
       })
 
@@ -181,9 +181,9 @@ test.describe('Live Mode', () => {
   test.describe('Point Handling', () => {
     test('should have handleNewPoint method', async ({ page }) => {
       const hasMethod = await page.evaluate(() => {
-        const element = document.querySelector('[data-controller*="maps-v2-realtime"]')
+        const element = document.querySelector('[data-controller*="maps--maplibre-realtime"]')
         const app = window.Stimulus || window.Application
-        const controller = app?.getControllerForElementAndIdentifier(element, 'maps-v2-realtime')
+        const controller = app?.getControllerForElementAndIdentifier(element, 'maps--maplibre-realtime')
         return typeof controller?.handleNewPoint === 'function'
       })
 
@@ -192,9 +192,9 @@ test.describe('Live Mode', () => {
 
     test('should have zoomToPoint method', async ({ page }) => {
       const hasMethod = await page.evaluate(() => {
-        const element = document.querySelector('[data-controller*="maps-v2-realtime"]')
+        const element = document.querySelector('[data-controller*="maps--maplibre-realtime"]')
         const app = window.Stimulus || window.Application
-        const controller = app?.getControllerForElementAndIdentifier(element, 'maps-v2-realtime')
+        const controller = app?.getControllerForElementAndIdentifier(element, 'maps--maplibre-realtime')
         return typeof controller?.zoomToPoint === 'function'
       })
 
@@ -207,9 +207,9 @@ test.describe('Live Mode', () => {
 
       // Get initial point count
       const initialCount = await page.evaluate(() => {
-        const element = document.querySelector('[data-controller*="maps-v2"]')
+        const element = document.querySelector('[data-controller*="maps--maplibre"]')
         const app = window.Stimulus || window.Application
-        const controller = app?.getControllerForElementAndIdentifier(element, 'maps-v2')
+        const controller = app?.getControllerForElementAndIdentifier(element, 'maps--maplibre')
         const pointsLayer = controller?.layerManager?.getLayer('points')
         return pointsLayer?.data?.features?.length || 0
       })
@@ -238,12 +238,12 @@ test.describe('Live Mode', () => {
   test.describe('Live Mode State Persistence', () => {
     test('should maintain live mode state after toggling', async ({ page }) => {
       // Open settings
-      await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+      await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
       await page.waitForTimeout(300)
       await page.locator('button[data-tab="settings"]').click()
       await page.waitForTimeout(300)
 
-      const liveModeToggle = page.locator('[data-maps-v2-realtime-target="liveModeToggle"]')
+      const liveModeToggle = page.locator('[data-maps--maplibre-realtime-target="liveModeToggle"]')
 
       // Enable live mode
       if (!await liveModeToggle.isChecked()) {
@@ -255,9 +255,9 @@ test.describe('Live Mode', () => {
       expect(await liveModeToggle.isChecked()).toBe(true)
 
       // Close and reopen settings
-      await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+      await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
       await page.waitForTimeout(300)
-      await page.locator('[data-action="click->maps-v2#toggleSettings"]').first().click()
+      await page.locator('[data-action="click->maps--maplibre#toggleSettings"]').first().click()
       await page.waitForTimeout(300)
       await page.locator('button[data-tab="settings"]').click()
       await page.waitForTimeout(300)
@@ -271,9 +271,9 @@ test.describe('Live Mode', () => {
     test('should handle missing maps controller gracefully', async ({ page }) => {
       // This is tested by the controller's defensive checks
       const hasDefensiveChecks = await page.evaluate(() => {
-        const element = document.querySelector('[data-controller*="maps-v2-realtime"]')
+        const element = document.querySelector('[data-controller*="maps--maplibre-realtime"]')
         const app = window.Stimulus || window.Application
-        const controller = app?.getControllerForElementAndIdentifier(element, 'maps-v2-realtime')
+        const controller = app?.getControllerForElementAndIdentifier(element, 'maps--maplibre-realtime')
 
         // The controller should have the mapsV2Controller getter
         return typeof controller?.mapsV2Controller !== 'undefined'
diff --git a/public/maps_v2/styles/black.json b/public/maps_maplibre/styles/black.json
similarity index 100%
rename from public/maps_v2/styles/black.json
rename to public/maps_maplibre/styles/black.json
diff --git a/public/maps_v2/styles/dark.json b/public/maps_maplibre/styles/dark.json
similarity index 100%
rename from public/maps_v2/styles/dark.json
rename to public/maps_maplibre/styles/dark.json
diff --git a/public/maps_v2/styles/grayscale.json b/public/maps_maplibre/styles/grayscale.json
similarity index 100%
rename from public/maps_v2/styles/grayscale.json
rename to public/maps_maplibre/styles/grayscale.json
diff --git a/public/maps_v2/styles/light.json b/public/maps_maplibre/styles/light.json
similarity index 100%
rename from public/maps_v2/styles/light.json
rename to public/maps_maplibre/styles/light.json
diff --git a/public/maps_v2/styles/white.json b/public/maps_maplibre/styles/white.json
similarity index 100%
rename from public/maps_v2/styles/white.json
rename to public/maps_maplibre/styles/white.json