+
+ `
+
+ this.controller.selectedVisitsContainerTarget.classList.remove('hidden')
+ this.attachVisitCardListeners()
+
+ requestAnimationFrame(() => {
+ this.updateBulkActions()
+ })
+ }
+
+ /**
+ * Attach event listeners to visit cards
+ */
+ attachVisitCardListeners() {
+ this.controller.element.querySelectorAll('[data-visit-select]').forEach(checkbox => {
+ checkbox.addEventListener('change', (e) => {
+ const visitId = parseInt(e.target.dataset.visitSelect)
+ if (e.target.checked) {
+ this.selectedVisitIds.add(visitId)
+ } else {
+ this.selectedVisitIds.delete(visitId)
+ }
+ this.updateBulkActions()
+ })
+ })
+
+ this.controller.element.querySelectorAll('[data-visit-confirm]').forEach(btn => {
+ btn.addEventListener('click', async (e) => {
+ const visitId = parseInt(e.currentTarget.dataset.visitConfirm)
+ await this.confirmVisit(visitId)
+ })
+ })
+
+ this.controller.element.querySelectorAll('[data-visit-decline]').forEach(btn => {
+ btn.addEventListener('click', async (e) => {
+ const visitId = parseInt(e.currentTarget.dataset.visitDecline)
+ await this.declineVisit(visitId)
+ })
+ })
+ }
+
+ /**
+ * Update bulk action buttons visibility and attach listeners
+ */
+ updateBulkActions() {
+ const selectedCount = this.selectedVisitIds.size
+
+ const existingBulkActions = this.controller.element.querySelectorAll('.bulk-actions-inline')
+ existingBulkActions.forEach(el => el.remove())
+
+ if (selectedCount >= 2) {
+ const selectedVisitCards = Array.from(this.controller.element.querySelectorAll('.visit-card'))
+ .filter(card => {
+ const visitId = parseInt(card.dataset.visitId)
+ return this.selectedVisitIds.has(visitId)
+ })
+
+ if (selectedVisitCards.length > 0) {
+ const lastSelectedCard = selectedVisitCards[selectedVisitCards.length - 1]
+
+ const bulkActionsDiv = document.createElement('div')
+ bulkActionsDiv.className = 'bulk-actions-inline mb-2'
+ bulkActionsDiv.innerHTML = `
+
+
+
+ ${cardsHTML}
+ Visits in Area (${visits.length})
+
+
+ `
+
+ lastSelectedCard.insertAdjacentElement('afterend', bulkActionsDiv)
+
+ const mergeBtn = bulkActionsDiv.querySelector('[data-bulk-merge]')
+ const confirmBtn = bulkActionsDiv.querySelector('[data-bulk-confirm]')
+ const declineBtn = bulkActionsDiv.querySelector('[data-bulk-decline]')
+
+ if (mergeBtn) mergeBtn.addEventListener('click', () => this.bulkMergeVisits())
+ if (confirmBtn) confirmBtn.addEventListener('click', () => this.bulkConfirmVisits())
+ if (declineBtn) declineBtn.addEventListener('click', () => this.bulkDeclineVisits())
+ }
+ }
+ }
+
+ /**
+ * Confirm a single visit
+ */
+ async confirmVisit(visitId) {
+ try {
+ await this.api.updateVisitStatus(visitId, 'confirmed')
+ Toast.success('Visit confirmed')
+ await this.refreshSelectedVisits()
+ } catch (error) {
+ console.error('[Maps V2] Failed to confirm visit:', error)
+ Toast.error('Failed to confirm visit')
+ }
+ }
+
+ /**
+ * Decline a single visit
+ */
+ async declineVisit(visitId) {
+ try {
+ await this.api.updateVisitStatus(visitId, 'declined')
+ Toast.success('Visit declined')
+ await this.refreshSelectedVisits()
+ } catch (error) {
+ console.error('[Maps V2] Failed to decline visit:', error)
+ Toast.error('Failed to decline visit')
+ }
+ }
+
+ /**
+ * Bulk merge selected visits
+ */
+ async bulkMergeVisits() {
+ const visitIds = Array.from(this.selectedVisitIds)
+
+ if (visitIds.length < 2) {
+ Toast.error('Select at least 2 visits to merge')
+ return
+ }
+
+ if (!confirm(`Merge ${visitIds.length} visits into one?`)) {
+ return
+ }
+
+ try {
+ Toast.info('Merging visits...')
+ const mergedVisit = await this.api.mergeVisits(visitIds)
+ Toast.success('Visits merged successfully')
+
+ this.selectedVisitIds.clear()
+ this.replaceVisitsWithMerged(visitIds, mergedVisit)
+ this.updateBulkActions()
+ } catch (error) {
+ console.error('[Maps V2] Failed to merge visits:', error)
+ Toast.error('Failed to merge visits')
+ }
+ }
+
+ /**
+ * Bulk confirm selected visits
+ */
+ async bulkConfirmVisits() {
+ const visitIds = Array.from(this.selectedVisitIds)
+
+ try {
+ Toast.info('Confirming visits...')
+ await this.api.bulkUpdateVisits(visitIds, 'confirmed')
+ Toast.success(`Confirmed ${visitIds.length} visits`)
+
+ this.selectedVisitIds.clear()
+ await this.refreshSelectedVisits()
+ } catch (error) {
+ console.error('[Maps V2] Failed to confirm visits:', error)
+ Toast.error('Failed to confirm visits')
+ }
+ }
+
+ /**
+ * Bulk decline selected visits
+ */
+ async bulkDeclineVisits() {
+ const visitIds = Array.from(this.selectedVisitIds)
+
+ if (!confirm(`Decline ${visitIds.length} visits?`)) {
+ return
+ }
+
+ try {
+ Toast.info('Declining visits...')
+ await this.api.bulkUpdateVisits(visitIds, 'declined')
+ Toast.success(`Declined ${visitIds.length} visits`)
+
+ this.selectedVisitIds.clear()
+ await this.refreshSelectedVisits()
+ } catch (error) {
+ console.error('[Maps V2] Failed to decline visits:', error)
+ Toast.error('Failed to decline visits')
+ }
+ }
+
+ /**
+ * Replace merged visit cards with the new merged visit
+ */
+ replaceVisitsWithMerged(oldVisitIds, mergedVisit) {
+ const container = this.controller.element.querySelector('.selected-visits-list')
+ if (!container) return
+
+ const mergedStartTime = new Date(mergedVisit.started_at).getTime()
+ const allCards = Array.from(container.querySelectorAll('.visit-card'))
+
+ let insertBeforeCard = null
+ for (const card of allCards) {
+ const cardId = parseInt(card.dataset.visitId)
+ if (oldVisitIds.includes(cardId)) continue
+
+ const cardVisit = this.selectedVisits.find(v => v.id === cardId)
+ if (cardVisit) {
+ const cardStartTime = new Date(cardVisit.started_at).getTime()
+ if (cardStartTime > mergedStartTime) {
+ insertBeforeCard = card
+ break
+ }
+ }
+ }
+
+ oldVisitIds.forEach(id => {
+ const card = this.controller.element.querySelector(`.visit-card[data-visit-id="${id}"]`)
+ if (card) card.remove()
+ })
+
+ this.selectedVisits = this.selectedVisits.filter(v => !oldVisitIds.includes(v.id))
+ this.selectedVisits.push(mergedVisit)
+ this.selectedVisits.sort((a, b) => new Date(a.started_at) - new Date(b.started_at))
+
+ const newCardHTML = VisitCard.create(mergedVisit, { isSelected: false })
+
+ if (insertBeforeCard) {
+ insertBeforeCard.insertAdjacentHTML('beforebegin', newCardHTML)
+ } else {
+ container.insertAdjacentHTML('beforeend', newCardHTML)
+ }
+
+ const header = container.querySelector('h3')
+ if (header) {
+ header.textContent = `Visits in Area (${this.selectedVisits.length})`
+ }
+
+ this.attachVisitCardListeners()
+ }
+
+ /**
+ * Refresh selected visits after changes
+ */
+ async refreshSelectedVisits() {
+ const bounds = this.selectionLayer.currentRect
+ if (!bounds) return
+
+ try {
+ const visits = await this.api.fetchVisitsInArea({
+ start_at: this.controller.startDateValue,
+ end_at: this.controller.endDateValue,
+ sw_lat: bounds.start.lat < bounds.end.lat ? bounds.start.lat : bounds.end.lat,
+ sw_lng: bounds.start.lng < bounds.end.lng ? bounds.start.lng : bounds.end.lng,
+ ne_lat: bounds.start.lat > bounds.end.lat ? bounds.start.lat : bounds.end.lat,
+ ne_lng: bounds.start.lng > bounds.end.lng ? bounds.start.lng : bounds.end.lng
+ })
+
+ this.displaySelectedVisits(visits)
+ } catch (error) {
+ console.error('[Maps V2] Failed to refresh visits:', error)
+ }
+ }
+
+ /**
+ * Cancel area selection
+ */
+ cancelAreaSelection() {
+ console.log('[Maps V2] Cancelling area selection')
+
+ if (this.selectionLayer) {
+ this.selectionLayer.disableSelectionMode()
+ this.selectionLayer.clearSelection()
+ }
+
+ if (this.selectedPointsLayer) {
+ this.selectedPointsLayer.clearSelection()
+ }
+
+ if (this.controller.hasSelectedVisitsContainerTarget) {
+ this.controller.selectedVisitsContainerTarget.classList.add('hidden')
+ this.controller.selectedVisitsContainerTarget.innerHTML = ''
+ }
+
+ if (this.controller.hasSelectedVisitsBulkActionsTarget) {
+ this.controller.selectedVisitsBulkActionsTarget.classList.add('hidden')
+ }
+
+ this.selectedVisits = []
+ this.selectedVisitIds = new Set()
+
+ if (this.controller.hasSelectAreaButtonTarget) {
+ this.controller.selectAreaButtonTarget.innerHTML = `
+
+ Select Area
+ `
+ this.controller.selectAreaButtonTarget.classList.remove('btn-error')
+ this.controller.selectAreaButtonTarget.classList.add('btn', 'btn-outline')
+ this.controller.selectAreaButtonTarget.dataset.action = 'click->maps--maplibre#startSelectArea'
+ }
+
+ if (this.controller.hasSelectionActionsTarget) {
+ this.controller.selectionActionsTarget.classList.add('hidden')
+ }
+
+ Toast.info('Selection cancelled')
+ }
+
+ /**
+ * Delete selected points
+ */
+ async deleteSelectedPoints() {
+ const pointCount = this.selectedPointsLayer.getCount()
+ const pointIds = this.selectedPointsLayer.getSelectedPointIds()
+
+ if (pointIds.length === 0) {
+ Toast.error('No points selected')
+ return
+ }
+
+ const confirmed = confirm(
+ `Are you sure you want to delete ${pointCount} point${pointCount === 1 ? '' : 's'}? This action cannot be undone.`
+ )
+
+ if (!confirmed) return
+
+ console.log('[Maps V2] Deleting', pointIds.length, 'points')
+
+ try {
+ Toast.info('Deleting points...')
+ const result = await this.api.bulkDeletePoints(pointIds)
+
+ console.log('[Maps V2] Deleted', result.count, 'points')
+
+ this.cancelAreaSelection()
+
+ await this.controller.loadMapData({
+ showLoading: false,
+ fitBounds: false,
+ showToast: false
+ })
+
+ Toast.success(`Deleted ${result.count} point${result.count === 1 ? '' : 's'}`)
+ } catch (error) {
+ console.error('[Maps V2] Failed to delete points:', error)
+ Toast.error('Failed to delete points. Please try again.')
+ }
+ }
+}
diff --git a/app/javascript/controllers/maps/maplibre/data_loader.js b/app/javascript/controllers/maps/maplibre/data_loader.js
new file mode 100644
index 00000000..8b583cc0
--- /dev/null
+++ b/app/javascript/controllers/maps/maplibre/data_loader.js
@@ -0,0 +1,225 @@
+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
+ */
+export class DataLoader {
+ constructor(api, apiKey) {
+ this.api = api
+ this.apiKey = apiKey
+ }
+
+ /**
+ * Fetch all map data (points, visits, photos, areas, tracks)
+ */
+ async fetchMapData(startDate, endDate, onProgress) {
+ const data = {}
+
+ // Fetch points
+ performanceMonitor.mark('fetch-points')
+ data.points = await this.api.fetchAllPoints({
+ start_at: startDate,
+ end_at: endDate,
+ onProgress: onProgress
+ })
+ performanceMonitor.measure('fetch-points')
+
+ // Transform points to GeoJSON
+ performanceMonitor.mark('transform-geojson')
+ data.pointsGeoJSON = pointsToGeoJSON(data.points)
+ data.routesGeoJSON = RoutesLayer.pointsToRoutes(data.points)
+ performanceMonitor.measure('transform-geojson')
+
+ // Fetch visits
+ try {
+ data.visits = await this.api.fetchVisits({
+ start_at: startDate,
+ end_at: endDate
+ })
+ } catch (error) {
+ console.warn('Failed to fetch visits:', error)
+ data.visits = []
+ }
+ data.visitsGeoJSON = this.visitsToGeoJSON(data.visits)
+
+ // Fetch photos
+ try {
+ console.log('[Photos] Fetching photos from:', startDate, 'to', endDate)
+ data.photos = await this.api.fetchPhotos({
+ start_at: startDate,
+ end_at: endDate
+ })
+ console.log('[Photos] Fetched photos:', data.photos.length, 'photos')
+ console.log('[Photos] Sample photo:', data.photos[0])
+ } catch (error) {
+ console.error('[Photos] Failed to fetch photos:', error)
+ data.photos = []
+ }
+ data.photosGeoJSON = this.photosToGeoJSON(data.photos)
+ console.log('[Photos] Converted to GeoJSON:', data.photosGeoJSON.features.length, 'features')
+ console.log('[Photos] Sample feature:', data.photosGeoJSON.features[0])
+
+ // Fetch areas
+ try {
+ data.areas = await this.api.fetchAreas()
+ } catch (error) {
+ console.warn('Failed to fetch areas:', error)
+ data.areas = []
+ }
+ data.areasGeoJSON = this.areasToGeoJSON(data.areas)
+
+ // Fetch places (no date filtering)
+ try {
+ data.places = await this.api.fetchPlaces()
+ } catch (error) {
+ console.warn('Failed to fetch places:', error)
+ data.places = []
+ }
+ data.placesGeoJSON = this.placesToGeoJSON(data.places)
+
+ // Tracks - DISABLED: Backend API not yet implemented
+ // TODO: Re-enable when /api/v1/tracks endpoint is created
+ data.tracks = []
+ data.tracksGeoJSON = this.tracksToGeoJSON(data.tracks)
+
+ return data
+ }
+
+ /**
+ * Convert visits to GeoJSON
+ */
+ visitsToGeoJSON(visits) {
+ return {
+ type: 'FeatureCollection',
+ features: visits.map(visit => ({
+ type: 'Feature',
+ geometry: {
+ type: 'Point',
+ coordinates: [visit.place.longitude, visit.place.latitude]
+ },
+ properties: {
+ id: visit.id,
+ name: visit.name,
+ place_name: visit.place?.name,
+ status: visit.status,
+ started_at: visit.started_at,
+ ended_at: visit.ended_at,
+ duration: visit.duration
+ }
+ }))
+ }
+ }
+
+ /**
+ * Convert photos to GeoJSON
+ */
+ photosToGeoJSON(photos) {
+ return {
+ type: 'FeatureCollection',
+ features: photos.map(photo => {
+ // Construct thumbnail URL
+ const thumbnailUrl = `/api/v1/photos/${photo.id}/thumbnail.jpg?api_key=${this.apiKey}&source=${photo.source}`
+
+ return {
+ type: 'Feature',
+ geometry: {
+ type: 'Point',
+ coordinates: [photo.longitude, photo.latitude]
+ },
+ properties: {
+ id: photo.id,
+ thumbnail_url: thumbnailUrl,
+ taken_at: photo.localDateTime,
+ filename: photo.originalFileName,
+ city: photo.city,
+ state: photo.state,
+ country: photo.country,
+ type: photo.type,
+ source: photo.source
+ }
+ }
+ })
+ }
+ }
+
+ /**
+ * Convert places to GeoJSON
+ */
+ placesToGeoJSON(places) {
+ return {
+ type: 'FeatureCollection',
+ features: places.map(place => ({
+ type: 'Feature',
+ geometry: {
+ type: 'Point',
+ coordinates: [place.longitude, place.latitude]
+ },
+ properties: {
+ id: place.id,
+ name: place.name,
+ latitude: place.latitude,
+ longitude: place.longitude,
+ note: place.note,
+ // Stringify tags for MapLibre GL JS compatibility
+ tags: JSON.stringify(place.tags || []),
+ // Use first tag's color if available
+ color: place.tags?.[0]?.color || '#6366f1'
+ }
+ }))
+ }
+ }
+
+ /**
+ * Convert areas to GeoJSON
+ * Backend returns circular areas with latitude, longitude, radius
+ */
+ areasToGeoJSON(areas) {
+ return {
+ type: 'FeatureCollection',
+ features: areas.map(area => {
+ // Create circle polygon from center and radius
+ // Parse as floats since API returns strings
+ const center = [parseFloat(area.longitude), parseFloat(area.latitude)]
+ const coordinates = createCircle(center, area.radius)
+
+ return {
+ type: 'Feature',
+ geometry: {
+ type: 'Polygon',
+ coordinates: [coordinates]
+ },
+ properties: {
+ id: area.id,
+ name: area.name,
+ color: area.color || '#ef4444',
+ radius: area.radius
+ }
+ }
+ })
+ }
+ }
+
+ /**
+ * Convert tracks to GeoJSON
+ */
+ tracksToGeoJSON(tracks) {
+ return {
+ type: 'FeatureCollection',
+ features: tracks.map(track => ({
+ type: 'Feature',
+ geometry: {
+ type: 'LineString',
+ coordinates: track.coordinates
+ },
+ properties: {
+ id: track.id,
+ name: track.name,
+ color: track.color || '#8b5cf6'
+ }
+ }))
+ }
+ }
+}
diff --git a/app/javascript/controllers/maps/maplibre/date_manager.js b/app/javascript/controllers/maps/maplibre/date_manager.js
new file mode 100644
index 00000000..2aac97b8
--- /dev/null
+++ b/app/javascript/controllers/maps/maplibre/date_manager.js
@@ -0,0 +1,35 @@
+/**
+ * Manages date formatting and range calculations
+ */
+export class DateManager {
+ /**
+ * Format date for API requests (matching V1 format)
+ * Format: "YYYY-MM-DDTHH:MM" (e.g., "2025-10-15T00:00", "2025-10-15T23:59")
+ */
+ static formatDateForAPI(date) {
+ const pad = (n) => String(n).padStart(2, '0')
+ const year = date.getFullYear()
+ const month = pad(date.getMonth() + 1)
+ const day = pad(date.getDate())
+ const hours = pad(date.getHours())
+ const minutes = pad(date.getMinutes())
+
+ return `${year}-${month}-${day}T${hours}:${minutes}`
+ }
+
+ /**
+ * Parse month selector value to date range
+ */
+ static parseMonthSelector(value) {
+ const [year, month] = value.split('-')
+
+ const startDate = new Date(year, month - 1, 1, 0, 0, 0)
+ const lastDay = new Date(year, month, 0).getDate()
+ const endDate = new Date(year, month - 1, lastDay, 23, 59, 0)
+
+ return {
+ startDate: this.formatDateForAPI(startDate),
+ endDate: this.formatDateForAPI(endDate)
+ }
+ }
+}
diff --git a/app/javascript/controllers/maps/maplibre/event_handlers.js b/app/javascript/controllers/maps/maplibre/event_handlers.js
new file mode 100644
index 00000000..812635d6
--- /dev/null
+++ b/app/javascript/controllers/maps/maplibre/event_handlers.js
@@ -0,0 +1,129 @@
+import { formatTimestamp } from 'maps_maplibre/utils/geojson_transformers'
+
+/**
+ * Handles map interaction events (clicks, info display)
+ */
+export class EventHandlers {
+ constructor(map, controller) {
+ this.map = map
+ this.controller = controller
+ }
+
+ /**
+ * Handle point click
+ */
+ handlePointClick(e) {
+ const feature = e.features[0]
+ const properties = feature.properties
+
+ const content = `
+
+
+ ${selectedCount} visit${selectedCount === 1 ? '' : 's'} selected
+
+
+
+
+
+
+
+
+ `
+
+ this.controller.showInfo('Location Point', content)
+ }
+
+ /**
+ * Handle visit click
+ */
+ handleVisitClick(e) {
+ const feature = e.features[0]
+ const properties = feature.properties
+
+ const startTime = formatTimestamp(properties.started_at)
+ const endTime = formatTimestamp(properties.ended_at)
+ const durationHours = Math.round(properties.duration / 3600)
+ const durationDisplay = durationHours >= 1 ? `${durationHours}h` : `${Math.round(properties.duration / 60)}m`
+
+ const content = `
+ Time: ${formatTimestamp(properties.timestamp)}
+ ${properties.battery ? `Battery: ${properties.battery}%
` : ''}
+ ${properties.altitude ? `Altitude: ${Math.round(properties.altitude)}m
` : ''}
+ ${properties.velocity ? `Speed: ${Math.round(properties.velocity)} km/h
` : ''}
+
+
+ `
+
+ const actions = [{
+ type: 'button',
+ handler: 'handleEdit',
+ id: properties.id,
+ entityType: 'visit',
+ label: 'Edit'
+ }]
+
+ this.controller.showInfo(properties.name || properties.place_name || 'Visit', content, actions)
+ }
+
+ /**
+ * Handle photo click
+ */
+ handlePhotoClick(e) {
+ const feature = e.features[0]
+ const properties = feature.properties
+
+ const content = `
+ ${properties.status}
+ Arrived: ${startTime}
+ Left: ${endTime}
+ Duration: ${durationDisplay}
+
+ ${properties.photo_url ? `
` : ''}
+ ${properties.taken_at ? `
+ `
+
+ this.controller.showInfo('Photo', content)
+ }
+
+ /**
+ * Handle place click
+ */
+ handlePlaceClick(e) {
+ const feature = e.features[0]
+ const properties = feature.properties
+
+ const content = `
+ Taken: ${formatTimestamp(properties.taken_at)}
` : ''}
+
+ ${properties.tag ? `
+ `
+
+ const actions = properties.id ? [{
+ type: 'button',
+ handler: 'handleEdit',
+ id: properties.id,
+ entityType: 'place',
+ label: 'Edit'
+ }] : []
+
+ this.controller.showInfo(properties.name || 'Place', content, actions)
+ }
+
+ /**
+ * Handle area click
+ */
+ handleAreaClick(e) {
+ const feature = e.features[0]
+ const properties = feature.properties
+
+ const content = `
+ ${properties.tag}
` : ''}
+ ${properties.description ? `${properties.description}
` : ''}
+
+ ${properties.radius ? `
+ `
+
+ const actions = properties.id ? [{
+ type: 'button',
+ handler: 'handleDelete',
+ id: properties.id,
+ entityType: 'area',
+ label: 'Delete'
+ }] : []
+
+ this.controller.showInfo(properties.name || 'Area', content, actions)
+ }
+}
diff --git a/app/javascript/controllers/maps/maplibre/filter_manager.js b/app/javascript/controllers/maps/maplibre/filter_manager.js
new file mode 100644
index 00000000..70e9afc3
--- /dev/null
+++ b/app/javascript/controllers/maps/maplibre/filter_manager.js
@@ -0,0 +1,53 @@
+/**
+ * Manages filtering and searching of map data
+ */
+export class FilterManager {
+ constructor(dataLoader) {
+ this.dataLoader = dataLoader
+ this.currentVisitFilter = 'all'
+ this.allVisits = []
+ }
+
+ /**
+ * Store all visits for filtering
+ */
+ setAllVisits(visits) {
+ this.allVisits = visits
+ }
+
+ /**
+ * Filter and update visits display
+ */
+ filterAndUpdateVisits(searchTerm, statusFilter, visitsLayer) {
+ if (!this.allVisits || !visitsLayer) return
+
+ const filtered = this.allVisits.filter(visit => {
+ // Apply search
+ const matchesSearch = !searchTerm ||
+ visit.name?.toLowerCase().includes(searchTerm) ||
+ visit.place?.name?.toLowerCase().includes(searchTerm)
+
+ // Apply status filter
+ const matchesStatus = statusFilter === 'all' || visit.status === statusFilter
+
+ return matchesSearch && matchesStatus
+ })
+
+ const geojson = this.dataLoader.visitsToGeoJSON(filtered)
+ visitsLayer.update(geojson)
+ }
+
+ /**
+ * Get current visit filter
+ */
+ getCurrentVisitFilter() {
+ return this.currentVisitFilter
+ }
+
+ /**
+ * Set current visit filter
+ */
+ setCurrentVisitFilter(filter) {
+ this.currentVisitFilter = filter
+ }
+}
diff --git a/app/javascript/controllers/maps/maplibre/layer_manager.js b/app/javascript/controllers/maps/maplibre/layer_manager.js
new file mode 100644
index 00000000..36105e95
--- /dev/null
+++ b/app/javascript/controllers/maps/maplibre/layer_manager.js
@@ -0,0 +1,279 @@
+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 { RecentPointLayer } from 'maps_maplibre/layers/recent_point_layer'
+import { lazyLoader } from 'maps_maplibre/utils/lazy_loader'
+import { performanceMonitor } from 'maps_maplibre/utils/performance_monitor'
+
+/**
+ * Manages all map layers lifecycle and visibility
+ */
+export class LayerManager {
+ constructor(map, settings, api) {
+ this.map = map
+ this.settings = settings
+ this.api = api
+ this.layers = {}
+ }
+
+ /**
+ * Add or update all layers with provided data
+ */
+ async addAllLayers(pointsGeoJSON, routesGeoJSON, visitsGeoJSON, photosGeoJSON, areasGeoJSON, tracksGeoJSON, placesGeoJSON) {
+ performanceMonitor.mark('add-layers')
+
+ // Layer order matters - layers added first render below layers added later
+ // Order: scratch (bottom) -> heatmap -> areas -> tracks -> routes -> visits -> places -> photos -> family -> points -> recent-point (top) -> fog (canvas overlay)
+
+ await this._addScratchLayer(pointsGeoJSON)
+ this._addHeatmapLayer(pointsGeoJSON)
+ this._addAreasLayer(areasGeoJSON)
+ this._addTracksLayer(tracksGeoJSON)
+ this._addRoutesLayer(routesGeoJSON)
+ this._addVisitsLayer(visitsGeoJSON)
+ this._addPlacesLayer(placesGeoJSON)
+
+ // Add photos layer with error handling (async, might fail loading images)
+ try {
+ await this._addPhotosLayer(photosGeoJSON)
+ } catch (error) {
+ console.warn('Failed to add photos layer:', error)
+ }
+
+ this._addFamilyLayer()
+ this._addPointsLayer(pointsGeoJSON)
+ this._addRecentPointLayer()
+ this._addFogLayer(pointsGeoJSON)
+
+ performanceMonitor.measure('add-layers')
+ }
+
+ /**
+ * Setup event handlers for layer interactions
+ */
+ setupLayerEventHandlers(handlers) {
+ // Click handlers
+ this.map.on('click', 'points', handlers.handlePointClick)
+ this.map.on('click', 'visits', handlers.handleVisitClick)
+ this.map.on('click', 'photos', handlers.handlePhotoClick)
+ this.map.on('click', 'places', handlers.handlePlaceClick)
+ // Areas have multiple layers (fill, outline, labels)
+ this.map.on('click', 'areas-fill', handlers.handleAreaClick)
+ this.map.on('click', 'areas-outline', handlers.handleAreaClick)
+ this.map.on('click', 'areas-labels', handlers.handleAreaClick)
+
+ // Cursor change on hover
+ this.map.on('mouseenter', 'points', () => {
+ this.map.getCanvas().style.cursor = 'pointer'
+ })
+ this.map.on('mouseleave', 'points', () => {
+ this.map.getCanvas().style.cursor = ''
+ })
+ this.map.on('mouseenter', 'visits', () => {
+ this.map.getCanvas().style.cursor = 'pointer'
+ })
+ this.map.on('mouseleave', 'visits', () => {
+ this.map.getCanvas().style.cursor = ''
+ })
+ this.map.on('mouseenter', 'photos', () => {
+ this.map.getCanvas().style.cursor = 'pointer'
+ })
+ this.map.on('mouseleave', 'photos', () => {
+ this.map.getCanvas().style.cursor = ''
+ })
+ this.map.on('mouseenter', 'places', () => {
+ this.map.getCanvas().style.cursor = 'pointer'
+ })
+ this.map.on('mouseleave', 'places', () => {
+ this.map.getCanvas().style.cursor = ''
+ })
+ // Areas hover handlers for all sub-layers
+ const areaLayers = ['areas-fill', 'areas-outline', 'areas-labels']
+ areaLayers.forEach(layerId => {
+ // Only add handlers if layer exists
+ if (this.map.getLayer(layerId)) {
+ this.map.on('mouseenter', layerId, () => {
+ this.map.getCanvas().style.cursor = 'pointer'
+ })
+ this.map.on('mouseleave', layerId, () => {
+ this.map.getCanvas().style.cursor = ''
+ })
+ }
+ })
+ }
+
+ /**
+ * Toggle layer visibility
+ */
+ toggleLayer(layerName) {
+ const layer = this.layers[`${layerName}Layer`]
+ if (!layer) return null
+
+ layer.toggle()
+ return layer.visible
+ }
+
+ /**
+ * Get layer instance
+ */
+ getLayer(layerName) {
+ return this.layers[`${layerName}Layer`]
+ }
+
+ /**
+ * Clear all layer references (for style changes)
+ */
+ clearLayerReferences() {
+ this.layers = {}
+ }
+
+ // Private methods for individual layer management
+
+ async _addScratchLayer(pointsGeoJSON) {
+ try {
+ if (!this.layers.scratchLayer && this.settings.scratchEnabled) {
+ const ScratchLayer = await lazyLoader.loadLayer('scratch')
+ this.layers.scratchLayer = new ScratchLayer(this.map, {
+ visible: true,
+ apiClient: this.api
+ })
+ await this.layers.scratchLayer.add(pointsGeoJSON)
+ } else if (this.layers.scratchLayer) {
+ await this.layers.scratchLayer.update(pointsGeoJSON)
+ }
+ } catch (error) {
+ console.warn('Failed to load scratch layer:', error)
+ }
+ }
+
+ _addHeatmapLayer(pointsGeoJSON) {
+ if (!this.layers.heatmapLayer) {
+ this.layers.heatmapLayer = new HeatmapLayer(this.map, {
+ visible: this.settings.heatmapEnabled
+ })
+ this.layers.heatmapLayer.add(pointsGeoJSON)
+ } else {
+ this.layers.heatmapLayer.update(pointsGeoJSON)
+ }
+ }
+
+ _addAreasLayer(areasGeoJSON) {
+ if (!this.layers.areasLayer) {
+ this.layers.areasLayer = new AreasLayer(this.map, {
+ visible: this.settings.areasEnabled || false
+ })
+ this.layers.areasLayer.add(areasGeoJSON)
+ } else {
+ this.layers.areasLayer.update(areasGeoJSON)
+ }
+ }
+
+ _addTracksLayer(tracksGeoJSON) {
+ if (!this.layers.tracksLayer) {
+ this.layers.tracksLayer = new TracksLayer(this.map, {
+ visible: this.settings.tracksEnabled || false
+ })
+ this.layers.tracksLayer.add(tracksGeoJSON)
+ } else {
+ this.layers.tracksLayer.update(tracksGeoJSON)
+ }
+ }
+
+ _addRoutesLayer(routesGeoJSON) {
+ if (!this.layers.routesLayer) {
+ this.layers.routesLayer = new RoutesLayer(this.map, {
+ visible: this.settings.routesVisible !== false // Default true unless explicitly false
+ })
+ this.layers.routesLayer.add(routesGeoJSON)
+ } else {
+ this.layers.routesLayer.update(routesGeoJSON)
+ }
+ }
+
+ _addVisitsLayer(visitsGeoJSON) {
+ if (!this.layers.visitsLayer) {
+ this.layers.visitsLayer = new VisitsLayer(this.map, {
+ visible: this.settings.visitsEnabled || false
+ })
+ this.layers.visitsLayer.add(visitsGeoJSON)
+ } else {
+ this.layers.visitsLayer.update(visitsGeoJSON)
+ }
+ }
+
+ _addPlacesLayer(placesGeoJSON) {
+ if (!this.layers.placesLayer) {
+ this.layers.placesLayer = new PlacesLayer(this.map, {
+ visible: this.settings.placesEnabled || false
+ })
+ this.layers.placesLayer.add(placesGeoJSON)
+ } else {
+ this.layers.placesLayer.update(placesGeoJSON)
+ }
+ }
+
+ async _addPhotosLayer(photosGeoJSON) {
+ console.log('[Photos] Adding photos layer, visible:', this.settings.photosEnabled)
+ if (!this.layers.photosLayer) {
+ this.layers.photosLayer = new PhotosLayer(this.map, {
+ visible: this.settings.photosEnabled || false
+ })
+ console.log('[Photos] Created new PhotosLayer instance')
+ await this.layers.photosLayer.add(photosGeoJSON)
+ console.log('[Photos] Added photos to layer')
+ } else {
+ console.log('[Photos] Updating existing PhotosLayer')
+ await this.layers.photosLayer.update(photosGeoJSON)
+ console.log('[Photos] Updated photos layer')
+ }
+ }
+
+ _addFamilyLayer() {
+ if (!this.layers.familyLayer) {
+ this.layers.familyLayer = new FamilyLayer(this.map, {
+ visible: false // Initially hidden, shown when family locations arrive via ActionCable
+ })
+ this.layers.familyLayer.add({ type: 'FeatureCollection', features: [] })
+ }
+ }
+
+ _addPointsLayer(pointsGeoJSON) {
+ if (!this.layers.pointsLayer) {
+ this.layers.pointsLayer = new PointsLayer(this.map, {
+ visible: this.settings.pointsVisible !== false // Default true unless explicitly false
+ })
+ this.layers.pointsLayer.add(pointsGeoJSON)
+ } else {
+ this.layers.pointsLayer.update(pointsGeoJSON)
+ }
+ }
+
+ _addRecentPointLayer() {
+ if (!this.layers.recentPointLayer) {
+ this.layers.recentPointLayer = new RecentPointLayer(this.map, {
+ visible: false // Initially hidden, shown only when live mode is enabled
+ })
+ this.layers.recentPointLayer.add({ type: 'FeatureCollection', features: [] })
+ }
+ }
+
+ _addFogLayer(pointsGeoJSON) {
+ // Always create fog layer for backward compatibility
+ if (!this.layers.fogLayer) {
+ this.layers.fogLayer = new FogLayer(this.map, {
+ clearRadius: 1000,
+ visible: this.settings.fogEnabled || false
+ })
+ this.layers.fogLayer.add(pointsGeoJSON)
+ } else {
+ this.layers.fogLayer.update(pointsGeoJSON)
+ }
+ }
+}
diff --git a/app/javascript/controllers/maps/maplibre/map_data_manager.js b/app/javascript/controllers/maps/maplibre/map_data_manager.js
new file mode 100644
index 00000000..88d13462
--- /dev/null
+++ b/app/javascript/controllers/maps/maplibre/map_data_manager.js
@@ -0,0 +1,131 @@
+import maplibregl from 'maplibre-gl'
+import { Toast } from 'maps_maplibre/components/toast'
+import { performanceMonitor } from 'maps_maplibre/utils/performance_monitor'
+
+/**
+ * Manages data loading and layer setup for the map
+ */
+export class MapDataManager {
+ constructor(controller) {
+ this.controller = controller
+ this.map = controller.map
+ this.dataLoader = controller.dataLoader
+ this.layerManager = controller.layerManager
+ this.filterManager = controller.filterManager
+ this.eventHandlers = controller.eventHandlers
+ }
+
+ /**
+ * Load map data from API and setup layers
+ * @param {string} startDate - Start date for data range
+ * @param {string} endDate - End date for data range
+ * @param {Object} options - Loading options
+ */
+ async loadMapData(startDate, endDate, options = {}) {
+ const {
+ showLoading = true,
+ fitBounds = true,
+ showToast = true,
+ onProgress = null
+ } = options
+
+ performanceMonitor.mark('load-map-data')
+
+ if (showLoading) {
+ this.controller.showLoading()
+ }
+
+ try {
+ // Fetch data from API
+ const data = await this.dataLoader.fetchMapData(
+ startDate,
+ endDate,
+ showLoading ? onProgress : null
+ )
+
+ // Store visits for filtering
+ this.filterManager.setAllVisits(data.visits)
+
+ // Setup layers
+ await this._setupLayers(data)
+
+ // Fit bounds if requested
+ if (fitBounds && data.points.length > 0) {
+ this._fitMapToBounds(data.pointsGeoJSON)
+ }
+
+ // Show success message
+ if (showToast) {
+ const pointText = data.points.length === 1 ? 'point' : 'points'
+ Toast.success(`Loaded ${data.points.length} location ${pointText}`)
+ }
+
+ return data
+ } catch (error) {
+ console.error('[MapDataManager] Failed to load map data:', error)
+ Toast.error('Failed to load location data. Please try again.')
+ throw error
+ } finally {
+ if (showLoading) {
+ this.controller.hideLoading()
+ }
+ const duration = performanceMonitor.measure('load-map-data')
+ console.log(`[Performance] Map data loaded in ${duration}ms`)
+ }
+ }
+
+ /**
+ * Setup all map layers with loaded data
+ * @private
+ */
+ async _setupLayers(data) {
+ const addAllLayers = async () => {
+ await this.layerManager.addAllLayers(
+ data.pointsGeoJSON,
+ data.routesGeoJSON,
+ data.visitsGeoJSON,
+ data.photosGeoJSON,
+ data.areasGeoJSON,
+ data.tracksGeoJSON,
+ data.placesGeoJSON
+ )
+
+ this.layerManager.setupLayerEventHandlers({
+ handlePointClick: this.eventHandlers.handlePointClick.bind(this.eventHandlers),
+ handleVisitClick: this.eventHandlers.handleVisitClick.bind(this.eventHandlers),
+ handlePhotoClick: this.eventHandlers.handlePhotoClick.bind(this.eventHandlers),
+ handlePlaceClick: this.eventHandlers.handlePlaceClick.bind(this.eventHandlers),
+ handleAreaClick: this.eventHandlers.handleAreaClick.bind(this.eventHandlers)
+ })
+ }
+
+ if (this.map.loaded()) {
+ await addAllLayers()
+ } else {
+ this.map.once('load', async () => {
+ await addAllLayers()
+ })
+ }
+ }
+
+ /**
+ * Fit map to data bounds
+ * @private
+ */
+ _fitMapToBounds(geojson) {
+ if (!geojson?.features?.length) {
+ return
+ }
+
+ const coordinates = geojson.features.map(f => f.geometry.coordinates)
+
+ const bounds = coordinates.reduce((bounds, coord) => {
+ return bounds.extend(coord)
+ }, new maplibregl.LngLatBounds(coordinates[0], coordinates[0]))
+
+ this.map.fitBounds(bounds, {
+ padding: 50,
+ maxZoom: 15
+ })
+ }
+}
diff --git a/app/javascript/controllers/maps/maplibre/map_initializer.js b/app/javascript/controllers/maps/maplibre/map_initializer.js
new file mode 100644
index 00000000..b253135e
--- /dev/null
+++ b/app/javascript/controllers/maps/maplibre/map_initializer.js
@@ -0,0 +1,66 @@
+import maplibregl from 'maplibre-gl'
+import { getMapStyle } from 'maps_maplibre/utils/style_manager'
+
+/**
+ * Handles map initialization for Maps V2
+ */
+export class MapInitializer {
+ /**
+ * Initialize MapLibre map instance
+ * @param {HTMLElement} container - The container element for the map
+ * @param {Object} settings - Map settings (style, center, zoom)
+ * @returns {PromiseRadius: ${Math.round(properties.radius)}m
` : ''}
+ ${properties.latitude && properties.longitude ? `Center: ${properties.latitude.toFixed(6)}, ${properties.longitude.toFixed(6)}
` : ''}
+
+
+ `
+
+ return modal
+ }
+
+ /**
+ * Handle speed color save event from editor
+ */
+ handleSpeedColorSave(event) {
+ const newScale = event.detail.colorStops
+
+ this.controller.speedColorScaleInputTarget.value = newScale
+ SettingsManager.updateSetting('speedColorScale', newScale)
+
+ if (this.controller.speedColoredToggleTarget.checked) {
+ this.reloadRoutes()
+ }
+ }
+
+ /**
+ * Reload routes layer
+ */
+ async reloadRoutes() {
+ this.controller.showLoading('Reloading routes...')
+
+ try {
+ const pointsLayer = this.layerManager.getLayer('points')
+ const points = pointsLayer?.data?.features?.map(f => ({
+ latitude: f.geometry.coordinates[1],
+ longitude: f.geometry.coordinates[0],
+ timestamp: f.properties.timestamp
+ })) || []
+
+ const distanceThresholdMeters = this.settings.metersBetweenRoutes || 500
+ const timeThresholdMinutes = this.settings.minutesBetweenRoutes || 60
+
+ const { calculateSpeed, getSpeedColor } = await import('maps_maplibre/utils/speed_colors')
+
+ const routesGeoJSON = await this.generateRoutesWithSpeedColors(
+ points,
+ { distanceThresholdMeters, timeThresholdMinutes },
+ calculateSpeed,
+ getSpeedColor
+ )
+
+ this.layerManager.updateLayer('routes', routesGeoJSON)
+
+ } catch (error) {
+ console.error('Failed to reload routes:', error)
+ Toast.error('Failed to reload routes')
+ } finally {
+ this.controller.hideLoading()
+ }
+ }
+
+ /**
+ * Generate routes with speed coloring
+ */
+ async generateRoutesWithSpeedColors(points, options, calculateSpeed, getSpeedColor) {
+ 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'
+
+ const routesGeoJSON = RoutesLayer.pointsToRoutes(points, options)
+
+ if (!useSpeedColors) {
+ return routesGeoJSON
+ }
+
+ routesGeoJSON.features = routesGeoJSON.features.map((feature, index) => {
+ const segment = points.slice(
+ points.findIndex(p => p.timestamp === feature.properties.startTime),
+ points.findIndex(p => p.timestamp === feature.properties.endTime) + 1
+ )
+
+ if (segment.length >= 2) {
+ const speed = calculateSpeed(segment[0], segment[segment.length - 1])
+ const color = getSpeedColor(speed, useSpeedColors, speedColorScale)
+ feature.properties.speed = speed
+ feature.properties.color = color
+ }
+
+ return feature
+ })
+
+ return routesGeoJSON
+ }
+
+ /**
+ * Toggle heatmap visibility
+ */
+ toggleHeatmap(event) {
+ const enabled = event.target.checked
+ SettingsManager.updateSetting('heatmapEnabled', enabled)
+
+ const heatmapLayer = this.layerManager.getLayer('heatmap')
+ if (heatmapLayer) {
+ if (enabled) {
+ heatmapLayer.show()
+ } else {
+ heatmapLayer.hide()
+ }
+ }
+ }
+
+ /**
+ * Toggle fog of war layer
+ */
+ toggleFog(event) {
+ const enabled = event.target.checked
+ SettingsManager.updateSetting('fogEnabled', enabled)
+
+ const fogLayer = this.layerManager.getLayer('fog')
+ if (fogLayer) {
+ fogLayer.toggle(enabled)
+ } else {
+ console.warn('Fog layer not yet initialized')
+ }
+ }
+
+ /**
+ * Toggle scratch map layer
+ */
+ async toggleScratch(event) {
+ const enabled = event.target.checked
+ SettingsManager.updateSetting('scratchEnabled', enabled)
+
+ try {
+ const scratchLayer = this.layerManager.getLayer('scratch')
+ if (!scratchLayer && enabled) {
+ const ScratchLayer = await lazyLoader.loadLayer('scratch')
+ const newScratchLayer = new ScratchLayer(this.map, {
+ visible: true,
+ apiClient: this.controller.api
+ })
+ const pointsLayer = this.layerManager.getLayer('points')
+ const pointsData = pointsLayer?.data || { type: 'FeatureCollection', features: [] }
+ await newScratchLayer.add(pointsData)
+ this.layerManager.layers.scratchLayer = newScratchLayer
+ } else if (scratchLayer) {
+ if (enabled) {
+ scratchLayer.show()
+ } else {
+ scratchLayer.hide()
+ }
+ }
+ } catch (error) {
+ console.error('Failed to toggle scratch layer:', error)
+ Toast.error('Failed to load scratch layer')
+ }
+ }
+
+ /**
+ * Toggle photos layer
+ */
+ togglePhotos(event) {
+ const enabled = event.target.checked
+ SettingsManager.updateSetting('photosEnabled', enabled)
+
+ const photosLayer = this.layerManager.getLayer('photos')
+ if (photosLayer) {
+ if (enabled) {
+ photosLayer.show()
+ } else {
+ photosLayer.hide()
+ }
+ }
+ }
+
+ /**
+ * Toggle areas layer
+ */
+ toggleAreas(event) {
+ const enabled = event.target.checked
+ SettingsManager.updateSetting('areasEnabled', enabled)
+
+ const areasLayer = this.layerManager.getLayer('areas')
+ if (areasLayer) {
+ if (enabled) {
+ areasLayer.show()
+ } else {
+ areasLayer.hide()
+ }
+ }
+ }
+
+ /**
+ * Toggle tracks layer
+ */
+ toggleTracks(event) {
+ const enabled = event.target.checked
+ SettingsManager.updateSetting('tracksEnabled', enabled)
+
+ const tracksLayer = this.layerManager.getLayer('tracks')
+ if (tracksLayer) {
+ if (enabled) {
+ tracksLayer.show()
+ } else {
+ tracksLayer.hide()
+ }
+ }
+ }
+
+ /**
+ * Toggle points layer visibility
+ */
+ togglePoints(event) {
+ const element = event.currentTarget
+ const visible = element.checked
+
+ const pointsLayer = this.layerManager.getLayer('points')
+ if (pointsLayer) {
+ pointsLayer.toggle(visible)
+ }
+
+ SettingsManager.updateSetting('pointsVisible', visible)
+ }
+}
diff --git a/app/javascript/controllers/maps/maplibre/settings_manager.js b/app/javascript/controllers/maps/maplibre/settings_manager.js
new file mode 100644
index 00000000..d3b70b27
--- /dev/null
+++ b/app/javascript/controllers/maps/maplibre/settings_manager.js
@@ -0,0 +1,271 @@
+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
+ * Including toggles, advanced settings, and UI synchronization
+ */
+export class SettingsController {
+ constructor(controller) {
+ this.controller = controller
+ this.settings = controller.settings
+ }
+
+ // Lazy getters for properties that may not be initialized yet
+ get map() {
+ return this.controller.map
+ }
+
+ get layerManager() {
+ return this.controller.layerManager
+ }
+
+ /**
+ * Load settings (sync from backend and localStorage)
+ */
+ async loadSettings() {
+ this.settings = await SettingsManager.sync()
+ this.controller.settings = this.settings
+ console.log('[Maps V2] Settings loaded:', this.settings)
+ return this.settings
+ }
+
+ /**
+ * Sync UI controls with loaded settings
+ */
+ syncToggleStates() {
+ const controller = this.controller
+
+ // Sync layer toggles
+ const toggleMap = {
+ pointsToggle: 'pointsVisible',
+ routesToggle: 'routesVisible',
+ heatmapToggle: 'heatmapEnabled',
+ visitsToggle: 'visitsEnabled',
+ photosToggle: 'photosEnabled',
+ areasToggle: 'areasEnabled',
+ placesToggle: 'placesEnabled',
+ fogToggle: 'fogEnabled',
+ scratchToggle: 'scratchEnabled',
+ speedColoredToggle: 'speedColoredRoutesEnabled'
+ }
+
+ Object.entries(toggleMap).forEach(([targetName, settingKey]) => {
+ const target = `${targetName}Target`
+ if (controller[target]) {
+ controller[target].checked = this.settings[settingKey]
+ }
+ })
+
+ // Show/hide visits search based on initial toggle state
+ if (controller.hasVisitsToggleTarget && controller.hasVisitsSearchTarget) {
+ controller.visitsSearchTarget.style.display = controller.visitsToggleTarget.checked ? 'block' : 'none'
+ }
+
+ // Show/hide places filters based on initial toggle state
+ if (controller.hasPlacesToggleTarget && controller.hasPlacesFiltersTarget) {
+ controller.placesFiltersTarget.style.display = controller.placesToggleTarget.checked ? 'block' : 'none'
+ }
+
+ // Sync route opacity slider
+ if (controller.hasRouteOpacityRangeTarget) {
+ controller.routeOpacityRangeTarget.value = (this.settings.routeOpacity || 1.0) * 100
+ }
+
+ // Sync map style dropdown
+ const mapStyleSelect = controller.element.querySelector('select[name="mapStyle"]')
+ if (mapStyleSelect) {
+ mapStyleSelect.value = this.settings.mapStyle || 'light'
+ }
+
+ // Sync fog of war settings
+ const fogRadiusInput = controller.element.querySelector('input[name="fogOfWarRadius"]')
+ if (fogRadiusInput) {
+ fogRadiusInput.value = this.settings.fogOfWarRadius || 1000
+ if (controller.hasFogRadiusValueTarget) {
+ controller.fogRadiusValueTarget.textContent = `${fogRadiusInput.value}m`
+ }
+ }
+
+ const fogThresholdInput = controller.element.querySelector('input[name="fogOfWarThreshold"]')
+ if (fogThresholdInput) {
+ fogThresholdInput.value = this.settings.fogOfWarThreshold || 1
+ if (controller.hasFogThresholdValueTarget) {
+ controller.fogThresholdValueTarget.textContent = fogThresholdInput.value
+ }
+ }
+
+ // Sync route generation settings
+ const metersBetweenInput = controller.element.querySelector('input[name="metersBetweenRoutes"]')
+ if (metersBetweenInput) {
+ metersBetweenInput.value = this.settings.metersBetweenRoutes || 500
+ if (controller.hasMetersBetweenValueTarget) {
+ controller.metersBetweenValueTarget.textContent = `${metersBetweenInput.value}m`
+ }
+ }
+
+ const minutesBetweenInput = controller.element.querySelector('input[name="minutesBetweenRoutes"]')
+ if (minutesBetweenInput) {
+ minutesBetweenInput.value = this.settings.minutesBetweenRoutes || 60
+ if (controller.hasMinutesBetweenValueTarget) {
+ controller.minutesBetweenValueTarget.textContent = `${minutesBetweenInput.value}min`
+ }
+ }
+
+ // Sync speed-colored routes settings
+ if (controller.hasSpeedColorScaleInputTarget) {
+ const colorScale = this.settings.speedColorScale || '0:#00ff00|15:#00ffff|30:#ff00ff|50:#ffff00|100:#ff3300'
+ controller.speedColorScaleInputTarget.value = colorScale
+ }
+ if (controller.hasSpeedColorScaleContainerTarget && controller.hasSpeedColoredToggleTarget) {
+ const isEnabled = controller.speedColoredToggleTarget.checked
+ controller.speedColorScaleContainerTarget.classList.toggle('hidden', !isEnabled)
+ }
+
+ // Sync points rendering mode radio buttons
+ const pointsRenderingRadios = controller.element.querySelectorAll('input[name="pointsRenderingMode"]')
+ pointsRenderingRadios.forEach(radio => {
+ radio.checked = radio.value === (this.settings.pointsRenderingMode || 'raw')
+ })
+
+ // Sync speed-colored routes toggle
+ const speedColoredRoutesToggle = controller.element.querySelector('input[name="speedColoredRoutes"]')
+ if (speedColoredRoutesToggle) {
+ speedColoredRoutesToggle.checked = this.settings.speedColoredRoutes || false
+ }
+
+ console.log('[Maps V2] UI controls synced with settings')
+ }
+
+ /**
+ * Update map style from settings
+ */
+ async updateMapStyle(event) {
+ const styleName = event.target.value
+ SettingsManager.updateSetting('mapStyle', styleName)
+
+ const style = await getMapStyle(styleName)
+
+ // Clear layer references
+ this.layerManager.clearLayerReferences()
+
+ this.map.setStyle(style)
+
+ // Reload layers after style change
+ this.map.once('style.load', () => {
+ console.log('Style loaded, reloading map data')
+ this.controller.loadMapData()
+ })
+ }
+
+ /**
+ * Reset settings to defaults
+ */
+ resetSettings() {
+ if (confirm('Reset all settings to defaults? This will reload the page.')) {
+ SettingsManager.resetToDefaults()
+ window.location.reload()
+ }
+ }
+
+ /**
+ * Update route opacity in real-time
+ */
+ updateRouteOpacity(event) {
+ const opacity = parseInt(event.target.value) / 100
+
+ const routesLayer = this.layerManager.getLayer('routes')
+ if (routesLayer && this.map.getLayer('routes')) {
+ this.map.setPaintProperty('routes', 'line-opacity', opacity)
+ }
+
+ SettingsManager.updateSetting('routeOpacity', opacity)
+ }
+
+ /**
+ * Update advanced settings from form submission
+ */
+ async updateAdvancedSettings(event) {
+ event.preventDefault()
+
+ const formData = new FormData(event.target)
+ const settings = {
+ routeOpacity: parseFloat(formData.get('routeOpacity')) / 100,
+ fogOfWarRadius: parseInt(formData.get('fogOfWarRadius')),
+ fogOfWarThreshold: parseInt(formData.get('fogOfWarThreshold')),
+ metersBetweenRoutes: parseInt(formData.get('metersBetweenRoutes')),
+ minutesBetweenRoutes: parseInt(formData.get('minutesBetweenRoutes')),
+ pointsRenderingMode: formData.get('pointsRenderingMode'),
+ speedColoredRoutes: formData.get('speedColoredRoutes') === 'on'
+ }
+
+ // Apply settings to current map
+ await this.applySettingsToMap(settings)
+
+ // Save to backend and localStorage
+ for (const [key, value] of Object.entries(settings)) {
+ await SettingsManager.updateSetting(key, value)
+ }
+
+ Toast.success('Settings updated successfully')
+ }
+
+ /**
+ * Apply settings to map without reload
+ */
+ async applySettingsToMap(settings) {
+ // Update route opacity
+ if (settings.routeOpacity !== undefined) {
+ const routesLayer = this.layerManager.getLayer('routes')
+ if (routesLayer && this.map.getLayer('routes')) {
+ this.map.setPaintProperty('routes', 'line-opacity', settings.routeOpacity)
+ }
+ }
+
+ // Update fog of war settings
+ if (settings.fogOfWarRadius !== undefined || settings.fogOfWarThreshold !== undefined) {
+ const fogLayer = this.layerManager.getLayer('fog')
+ if (fogLayer) {
+ if (settings.fogOfWarRadius) {
+ fogLayer.clearRadius = settings.fogOfWarRadius
+ }
+ // Redraw fog layer
+ if (fogLayer.visible) {
+ await fogLayer.update(fogLayer.data)
+ }
+ }
+ }
+
+ // For settings that require data reload
+ if (settings.pointsRenderingMode || settings.speedColoredRoutes !== undefined) {
+ Toast.info('Reloading map data with new settings...')
+ await this.controller.loadMapData()
+ }
+ }
+
+ // Display value update methods
+ updateFogRadiusDisplay(event) {
+ if (this.controller.hasFogRadiusValueTarget) {
+ this.controller.fogRadiusValueTarget.textContent = `${event.target.value}m`
+ }
+ }
+
+ updateFogThresholdDisplay(event) {
+ if (this.controller.hasFogThresholdValueTarget) {
+ this.controller.fogThresholdValueTarget.textContent = event.target.value
+ }
+ }
+
+ updateMetersBetweenDisplay(event) {
+ if (this.controller.hasMetersBetweenValueTarget) {
+ this.controller.metersBetweenValueTarget.textContent = `${event.target.value}m`
+ }
+ }
+
+ updateMinutesBetweenDisplay(event) {
+ if (this.controller.hasMinutesBetweenValueTarget) {
+ this.controller.minutesBetweenValueTarget.textContent = `${event.target.value}min`
+ }
+ }
+}
diff --git a/app/javascript/controllers/maps/maplibre/visits_manager.js b/app/javascript/controllers/maps/maplibre/visits_manager.js
new file mode 100644
index 00000000..82120584
--- /dev/null
+++ b/app/javascript/controllers/maps/maplibre/visits_manager.js
@@ -0,0 +1,153 @@
+import { SettingsManager } from 'maps_maplibre/utils/settings_manager'
+import { Toast } from 'maps_maplibre/components/toast'
+
+/**
+ * Manages visits-related operations for Maps V2
+ * Including visit creation, filtering, and layer management
+ */
+export class VisitsManager {
+ constructor(controller) {
+ this.controller = controller
+ this.layerManager = controller.layerManager
+ this.filterManager = controller.filterManager
+ this.api = controller.api
+ this.dataLoader = controller.dataLoader
+ }
+
+ /**
+ * Toggle visits layer
+ */
+ toggleVisits(event) {
+ const enabled = event.target.checked
+ SettingsManager.updateSetting('visitsEnabled', enabled)
+
+ const visitsLayer = this.layerManager.getLayer('visits')
+ if (visitsLayer) {
+ if (enabled) {
+ visitsLayer.show()
+ if (this.controller.hasVisitsSearchTarget) {
+ this.controller.visitsSearchTarget.style.display = 'block'
+ }
+ } else {
+ visitsLayer.hide()
+ if (this.controller.hasVisitsSearchTarget) {
+ this.controller.visitsSearchTarget.style.display = 'none'
+ }
+ }
+ }
+ }
+
+ /**
+ * Search visits
+ */
+ searchVisits(event) {
+ const searchTerm = event.target.value.toLowerCase()
+ const visitsLayer = this.layerManager.getLayer('visits')
+ this.filterManager.filterAndUpdateVisits(
+ searchTerm,
+ this.filterManager.getCurrentVisitFilter(),
+ visitsLayer
+ )
+ }
+
+ /**
+ * Filter visits by status
+ */
+ filterVisits(event) {
+ const filter = event.target.value
+ this.filterManager.setCurrentVisitFilter(filter)
+ const searchTerm = document.getElementById('visits-search')?.value.toLowerCase() || ''
+ const visitsLayer = this.layerManager.getLayer('visits')
+ this.filterManager.filterAndUpdateVisits(searchTerm, filter, visitsLayer)
+ }
+
+ /**
+ * Start create visit mode
+ */
+ startCreateVisit() {
+ console.log('[Maps V2] Starting create visit mode')
+
+ if (this.controller.hasSettingsPanelTarget && this.controller.settingsPanelTarget.classList.contains('open')) {
+ this.controller.toggleSettings()
+ }
+
+ this.controller.map.getCanvas().style.cursor = 'crosshair'
+ Toast.info('Click on the map to place a visit')
+
+ this.handleCreateVisitClick = (e) => {
+ const { lng, lat } = e.lngLat
+ this.openVisitCreationModal(lat, lng)
+ this.controller.map.getCanvas().style.cursor = ''
+ }
+
+ this.controller.map.once('click', this.handleCreateVisitClick)
+ }
+
+ /**
+ * Open visit creation modal
+ */
+ openVisitCreationModal(lat, lng) {
+ console.log('[Maps V2] Opening visit creation modal', { lat, lng })
+
+ const modalElement = document.querySelector('[data-controller="visit-creation-v2"]')
+
+ if (!modalElement) {
+ console.error('[Maps V2] Visit creation modal not found')
+ Toast.error('Visit creation modal not available')
+ return
+ }
+
+ const controller = this.controller.application.getControllerForElementAndIdentifier(
+ modalElement,
+ 'visit-creation-v2'
+ )
+
+ if (controller) {
+ controller.open(lat, lng, this.controller)
+ } else {
+ console.error('[Maps V2] Visit creation controller not found')
+ Toast.error('Visit creation controller not available')
+ }
+ }
+
+ /**
+ * Handle visit creation event - reload visits and update layer
+ */
+ async handleVisitCreated(event) {
+ console.log('[Maps V2] Visit created, reloading visits...', event.detail)
+
+ try {
+ const visits = await this.api.fetchVisits({
+ start_at: this.controller.startDateValue,
+ end_at: this.controller.endDateValue
+ })
+
+ console.log('[Maps V2] Fetched visits:', visits.length)
+
+ this.filterManager.setAllVisits(visits)
+ const visitsGeoJSON = this.dataLoader.visitsToGeoJSON(visits)
+
+ console.log('[Maps V2] Converted to GeoJSON:', visitsGeoJSON.features.length, 'features')
+
+ const visitsLayer = this.layerManager.getLayer('visits')
+ if (visitsLayer) {
+ visitsLayer.update(visitsGeoJSON)
+ console.log('[Maps V2] Visits layer updated successfully')
+ } else {
+ console.warn('[Maps V2] Visits layer not found, cannot update')
+ }
+ } catch (error) {
+ console.error('[Maps V2] Failed to reload visits:', error)
+ }
+ }
+
+ /**
+ * Handle visit update event - reload visits and update layer
+ */
+ async handleVisitUpdated(event) {
+ console.log('[Maps V2] Visit updated, reloading visits...', event.detail)
+
+ // Reuse the same logic as creation
+ await this.handleVisitCreated(event)
+ }
+}
diff --git a/app/javascript/controllers/maps/maplibre_controller.js b/app/javascript/controllers/maps/maplibre_controller.js
new file mode 100644
index 00000000..5e416623
--- /dev/null
+++ b/app/javascript/controllers/maps/maplibre_controller.js
@@ -0,0 +1,543 @@
+import { Controller } from '@hotwired/stimulus'
+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
+ * Coordinates between different managers and handles UI interactions
+ */
+export default class extends Controller {
+ static values = {
+ apiKey: String,
+ startDate: String,
+ endDate: String
+ }
+
+ static targets = [
+ 'container',
+ 'loading',
+ 'loadingText',
+ 'monthSelect',
+ 'clusterToggle',
+ 'settingsPanel',
+ 'visitsSearch',
+ 'routeOpacityRange',
+ 'placesFilters',
+ 'enableAllPlaceTagsToggle',
+ 'fogRadiusValue',
+ 'fogThresholdValue',
+ 'metersBetweenValue',
+ 'minutesBetweenValue',
+ // Search
+ 'searchInput',
+ 'searchResults',
+ // Layer toggles
+ 'pointsToggle',
+ 'routesToggle',
+ 'heatmapToggle',
+ 'visitsToggle',
+ 'photosToggle',
+ 'areasToggle',
+ 'placesToggle',
+ 'fogToggle',
+ 'scratchToggle',
+ // Speed-colored routes
+ 'routesOptions',
+ 'speedColoredToggle',
+ 'speedColorScaleContainer',
+ 'speedColorScaleInput',
+ // Area selection
+ 'selectAreaButton',
+ 'selectionActions',
+ 'deleteButtonText',
+ 'selectedVisitsContainer',
+ 'selectedVisitsBulkActions',
+ // Info display
+ 'infoDisplay',
+ 'infoTitle',
+ 'infoContent',
+ 'infoActions'
+ ]
+
+ async connect() {
+ this.cleanup = new CleanupHelper()
+
+ // Initialize API and settings
+ SettingsManager.initialize(this.apiKeyValue)
+ this.settingsController = new SettingsController(this)
+ await this.settingsController.loadSettings()
+ this.settings = this.settingsController.settings
+
+ // Sync toggle states with loaded settings
+ this.settingsController.syncToggleStates()
+
+ await this.initializeMap()
+ this.initializeAPI()
+
+ // Initialize managers
+ this.layerManager = new LayerManager(this.map, this.settings, this.api)
+ this.dataLoader = new DataLoader(this.api, this.apiKeyValue)
+ this.eventHandlers = new EventHandlers(this.map, this)
+ this.filterManager = new FilterManager(this.dataLoader)
+ this.mapDataManager = new MapDataManager(this)
+
+ // Initialize feature managers
+ this.areaSelectionManager = new AreaSelectionManager(this)
+ this.visitsManager = new VisitsManager(this)
+ this.placesManager = new PlacesManager(this)
+ this.routesManager = new RoutesManager(this)
+
+ // Initialize search manager
+ this.initializeSearch()
+
+ // Listen for visit and place creation/update events
+ this.boundHandleVisitCreated = this.visitsManager.handleVisitCreated.bind(this.visitsManager)
+ this.cleanup.addEventListener(document, 'visit:created', this.boundHandleVisitCreated)
+
+ this.boundHandleVisitUpdated = this.visitsManager.handleVisitUpdated.bind(this.visitsManager)
+ this.cleanup.addEventListener(document, 'visit:updated', this.boundHandleVisitUpdated)
+
+ this.boundHandlePlaceCreated = this.placesManager.handlePlaceCreated.bind(this.placesManager)
+ this.cleanup.addEventListener(document, 'place:created', this.boundHandlePlaceCreated)
+
+ this.boundHandlePlaceUpdated = this.placesManager.handlePlaceUpdated.bind(this.placesManager)
+ this.cleanup.addEventListener(document, 'place:updated', this.boundHandlePlaceUpdated)
+
+ this.boundHandleAreaCreated = this.handleAreaCreated.bind(this)
+ this.cleanup.addEventListener(document, 'area:created', this.boundHandleAreaCreated)
+
+ // Format initial dates
+ this.startDateValue = DateManager.formatDateForAPI(new Date(this.startDateValue))
+ this.endDateValue = DateManager.formatDateForAPI(new Date(this.endDateValue))
+ console.log('[Maps V2] Initial dates:', this.startDateValue, 'to', this.endDateValue)
+
+ this.loadMapData()
+ }
+
+ disconnect() {
+ this.searchManager?.destroy()
+ this.cleanup.cleanup()
+ this.map?.remove()
+ performanceMonitor.logReport()
+ }
+
+ /**
+ * Initialize MapLibre map
+ */
+ async initializeMap() {
+ this.map = await MapInitializer.initialize(this.containerTarget, {
+ mapStyle: this.settings.mapStyle
+ })
+ }
+
+ /**
+ * Initialize API client
+ */
+ initializeAPI() {
+ this.api = new ApiClient(this.apiKeyValue)
+ }
+
+ /**
+ * Initialize location search
+ */
+ initializeSearch() {
+ if (!this.hasSearchInputTarget || !this.hasSearchResultsTarget) {
+ console.warn('[Maps V2] Search targets not found, search functionality disabled')
+ return
+ }
+
+ this.searchManager = new SearchManager(this.map, this.apiKeyValue)
+ this.searchManager.initialize(this.searchInputTarget, this.searchResultsTarget)
+
+ console.log('[Maps V2] Search manager initialized')
+ }
+
+ /**
+ * Load map data from API
+ */
+ async loadMapData(options = {}) {
+ return this.mapDataManager.loadMapData(
+ this.startDateValue,
+ this.endDateValue,
+ {
+ ...options,
+ onProgress: this.updateLoadingProgress.bind(this)
+ }
+ )
+ }
+
+ /**
+ * Month selector changed
+ */
+ monthChanged(event) {
+ const { startDate, endDate } = DateManager.parseMonthSelector(event.target.value)
+ this.startDateValue = startDate
+ this.endDateValue = endDate
+
+ console.log('[Maps V2] Date range changed:', this.startDateValue, 'to', this.endDateValue)
+ this.loadMapData()
+ }
+
+ /**
+ * Show loading indicator
+ */
+ showLoading() {
+ this.loadingTarget.classList.remove('hidden')
+ }
+
+ /**
+ * Hide loading indicator
+ */
+ hideLoading() {
+ this.loadingTarget.classList.add('hidden')
+ }
+
+ /**
+ * Update loading progress
+ */
+ updateLoadingProgress({ loaded, totalPages, progress }) {
+ if (this.hasLoadingTextTarget) {
+ const percentage = Math.round(progress * 100)
+ this.loadingTextTarget.textContent = `Loading... ${percentage}%`
+ }
+ }
+
+ /**
+ * Toggle settings panel
+ */
+ toggleSettings() {
+ if (this.hasSettingsPanelTarget) {
+ this.settingsPanelTarget.classList.toggle('open')
+ }
+ }
+
+ // ===== Delegated Methods to Managers =====
+
+ // Settings Controller methods
+ updateMapStyle(event) { return this.settingsController.updateMapStyle(event) }
+ resetSettings() { return this.settingsController.resetSettings() }
+ updateRouteOpacity(event) { return this.settingsController.updateRouteOpacity(event) }
+ updateAdvancedSettings(event) { return this.settingsController.updateAdvancedSettings(event) }
+ updateFogRadiusDisplay(event) { return this.settingsController.updateFogRadiusDisplay(event) }
+ updateFogThresholdDisplay(event) { return this.settingsController.updateFogThresholdDisplay(event) }
+ updateMetersBetweenDisplay(event) { return this.settingsController.updateMetersBetweenDisplay(event) }
+ updateMinutesBetweenDisplay(event) { return this.settingsController.updateMinutesBetweenDisplay(event) }
+
+ // Area Selection Manager methods
+ startSelectArea() { return this.areaSelectionManager.startSelectArea() }
+ cancelAreaSelection() { return this.areaSelectionManager.cancelAreaSelection() }
+ deleteSelectedPoints() { return this.areaSelectionManager.deleteSelectedPoints() }
+
+ // Visits Manager methods
+ toggleVisits(event) { return this.visitsManager.toggleVisits(event) }
+ searchVisits(event) { return this.visitsManager.searchVisits(event) }
+ filterVisits(event) { return this.visitsManager.filterVisits(event) }
+ startCreateVisit() { return this.visitsManager.startCreateVisit() }
+
+ // Places Manager methods
+ togglePlaces(event) { return this.placesManager.togglePlaces(event) }
+ filterPlacesByTags(event) { return this.placesManager.filterPlacesByTags(event) }
+ toggleAllPlaceTags(event) { return this.placesManager.toggleAllPlaceTags(event) }
+ startCreatePlace() { return this.placesManager.startCreatePlace() }
+
+ // Area creation
+ startCreateArea() {
+ console.log('[Maps V2] Starting create area mode')
+
+ if (this.hasSettingsPanelTarget && this.settingsPanelTarget.classList.contains('open')) {
+ this.toggleSettings()
+ }
+
+ // Find area drawer controller on the same element
+ const drawerController = this.application.getControllerForElementAndIdentifier(
+ this.element,
+ 'area-drawer'
+ )
+
+ if (drawerController) {
+ console.log('[Maps V2] Area drawer controller found, starting drawing with map:', this.map)
+ drawerController.startDrawing(this.map)
+ } else {
+ console.error('[Maps V2] Area drawer controller not found')
+ Toast.error('Area drawer controller not available')
+ }
+ }
+
+ async handleAreaCreated(event) {
+ console.log('[Maps V2] Area created:', event.detail.area)
+
+ try {
+ // Fetch all areas from API
+ const areas = await this.api.fetchAreas()
+ console.log('[Maps V2] Fetched areas:', areas.length)
+
+ // Convert to GeoJSON
+ const areasGeoJSON = this.dataLoader.areasToGeoJSON(areas)
+ console.log('[Maps V2] Converted to GeoJSON:', areasGeoJSON.features.length, 'features')
+ if (areasGeoJSON.features.length > 0) {
+ console.log('[Maps V2] First area GeoJSON:', JSON.stringify(areasGeoJSON.features[0], null, 2))
+ }
+
+ // Get or create the areas layer
+ let areasLayer = this.layerManager.getLayer('areas')
+ console.log('[Maps V2] Areas layer exists?', !!areasLayer, 'visible?', areasLayer?.visible)
+
+ if (areasLayer) {
+ // Update existing layer
+ areasLayer.update(areasGeoJSON)
+ console.log('[Maps V2] Areas layer updated')
+ } else {
+ // Create the layer if it doesn't exist yet
+ console.log('[Maps V2] Creating areas layer')
+ this.layerManager._addAreasLayer(areasGeoJSON)
+ areasLayer = this.layerManager.getLayer('areas')
+ console.log('[Maps V2] Areas layer created, visible?', areasLayer?.visible)
+ }
+
+ // Enable the layer if it wasn't already
+ if (areasLayer) {
+ if (!areasLayer.visible) {
+ console.log('[Maps V2] Showing areas layer')
+ areasLayer.show()
+ this.settings.layers.areas = true
+ this.settingsController.saveSetting('layers.areas', true)
+
+ // Update toggle state
+ if (this.hasAreasToggleTarget) {
+ this.areasToggleTarget.checked = true
+ }
+ } else {
+ console.log('[Maps V2] Areas layer already visible')
+ }
+ }
+
+ Toast.success('Area created successfully!')
+ } catch (error) {
+ console.error('[Maps V2] Failed to reload areas:', error)
+ Toast.error('Failed to reload areas')
+ }
+ }
+
+ // Routes Manager methods
+ togglePoints(event) { return this.routesManager.togglePoints(event) }
+ toggleRoutes(event) { return this.routesManager.toggleRoutes(event) }
+ toggleHeatmap(event) { return this.routesManager.toggleHeatmap(event) }
+ toggleFog(event) { return this.routesManager.toggleFog(event) }
+ toggleScratch(event) { return this.routesManager.toggleScratch(event) }
+ togglePhotos(event) { return this.routesManager.togglePhotos(event) }
+ toggleAreas(event) { return this.routesManager.toggleAreas(event) }
+ toggleTracks(event) { return this.routesManager.toggleTracks(event) }
+ toggleSpeedColoredRoutes(event) { return this.routesManager.toggleSpeedColoredRoutes(event) }
+ openSpeedColorEditor() { return this.routesManager.openSpeedColorEditor() }
+ handleSpeedColorSave(event) { return this.routesManager.handleSpeedColorSave(event) }
+
+ // Info Display methods
+ showInfo(title, content, actions = []) {
+ if (!this.hasInfoDisplayTarget) return
+
+ // Set title
+ this.infoTitleTarget.textContent = title
+
+ // Set content
+ this.infoContentTarget.innerHTML = content
+
+ // Set actions
+ if (actions.length > 0) {
+ this.infoActionsTarget.innerHTML = actions.map(action => {
+ if (action.type === 'button') {
+ // For button actions (modals, etc.), create a button with data-action
+ // Use error styling for delete buttons
+ const buttonClass = action.label === 'Delete' ? 'btn btn-sm btn-error' : 'btn btn-sm btn-primary'
+ return ``
+ } else {
+ // For link actions, keep the original behavior
+ return `${action.label}`
+ }
+ }).join('')
+ } else {
+ this.infoActionsTarget.innerHTML = ''
+ }
+
+ // Show info display
+ this.infoDisplayTarget.classList.remove('hidden')
+
+ // Switch to tools tab and open panel
+ this.switchToToolsTab()
+ }
+
+ closeInfo() {
+ if (!this.hasInfoDisplayTarget) return
+ this.infoDisplayTarget.classList.add('hidden')
+ }
+
+ /**
+ * Handle edit action from info display
+ */
+ handleEdit(event) {
+ const button = event.currentTarget
+ const id = button.dataset.id
+ const entityType = button.dataset.entityType
+
+ console.log('[Maps V2] Opening edit for', entityType, id)
+
+ switch (entityType) {
+ case 'visit':
+ this.openVisitModal(id)
+ break
+ case 'place':
+ this.openPlaceEditModal(id)
+ break
+ default:
+ console.warn('[Maps V2] Unknown entity type:', entityType)
+ }
+ }
+
+ /**
+ * Handle delete action from info display
+ */
+ handleDelete(event) {
+ const button = event.currentTarget
+ const id = button.dataset.id
+ const entityType = button.dataset.entityType
+
+ console.log('[Maps V2] Deleting', entityType, id)
+
+ switch (entityType) {
+ case 'area':
+ this.deleteArea(id)
+ break
+ default:
+ console.warn('[Maps V2] Unknown entity type for delete:', entityType)
+ }
+ }
+
+ /**
+ * Open visit edit modal
+ */
+ async openVisitModal(visitId) {
+ try {
+ // Fetch visit details
+ const response = await fetch(`/api/v1/visits/${visitId}`, {
+ headers: {
+ 'Authorization': `Bearer ${this.apiKeyValue}`,
+ 'Content-Type': 'application/json'
+ }
+ })
+
+ if (!response.ok) {
+ throw new Error(`Failed to fetch visit: ${response.status}`)
+ }
+
+ const visit = await response.json()
+
+ // Trigger visit edit event
+ const event = new CustomEvent('visit:edit', {
+ detail: { visit },
+ bubbles: true
+ })
+ document.dispatchEvent(event)
+ } catch (error) {
+ console.error('[Maps V2] Failed to load visit:', error)
+ Toast.error('Failed to load visit details')
+ }
+ }
+
+ /**
+ * Delete area with confirmation
+ */
+ async deleteArea(areaId) {
+ try {
+ // Fetch area details
+ const area = await this.api.fetchArea(areaId)
+
+ // Show delete confirmation
+ const confirmed = confirm(`Delete area "${area.name}"?\n\nThis action cannot be undone.`)
+
+ if (!confirmed) return
+
+ Toast.info('Deleting area...')
+
+ // Delete the area
+ await this.api.deleteArea(areaId)
+
+ // Reload areas
+ const areas = await this.api.fetchAreas()
+ const areasGeoJSON = this.dataLoader.areasToGeoJSON(areas)
+
+ const areasLayer = this.layerManager.getLayer('areas')
+ if (areasLayer) {
+ areasLayer.update(areasGeoJSON)
+ }
+
+ // Close info display
+ this.closeInfo()
+
+ Toast.success('Area deleted successfully')
+ } catch (error) {
+ console.error('[Maps V2] Failed to delete area:', error)
+ Toast.error('Failed to delete area')
+ }
+ }
+
+ /**
+ * Open place edit modal
+ */
+ async openPlaceEditModal(placeId) {
+ try {
+ // Fetch place details
+ const response = await fetch(`/api/v1/places/${placeId}`, {
+ headers: {
+ 'Authorization': `Bearer ${this.apiKeyValue}`,
+ 'Content-Type': 'application/json'
+ }
+ })
+
+ if (!response.ok) {
+ throw new Error(`Failed to fetch place: ${response.status}`)
+ }
+
+ const place = await response.json()
+
+ // Trigger place edit event
+ const event = new CustomEvent('place:edit', {
+ detail: { place },
+ bubbles: true
+ })
+ document.dispatchEvent(event)
+ } catch (error) {
+ console.error('[Maps V2] Failed to load place:', error)
+ Toast.error('Failed to load place details')
+ }
+ }
+
+ switchToToolsTab() {
+ // Open the panel if it's not already open
+ if (!this.settingsPanelTarget.classList.contains('open')) {
+ this.toggleSettings()
+ }
+
+ // Find the map-panel controller and switch to tools tab
+ const panelElement = this.settingsPanelTarget
+ const panelController = this.application.getControllerForElementAndIdentifier(panelElement, 'map-panel')
+
+ if (panelController && panelController.switchToTab) {
+ panelController.switchToTab('tools')
+ }
+ }
+}
diff --git a/app/javascript/controllers/maps/maplibre_realtime_controller.js b/app/javascript/controllers/maps/maplibre_realtime_controller.js
new file mode 100644
index 00000000..84b75c71
--- /dev/null
+++ b/app/javascript/controllers/maps/maplibre_realtime_controller.js
@@ -0,0 +1,323 @@
+import { Controller } from '@hotwired/stimulus'
+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
+ * Manages ActionCable connection and real-time updates
+ */
+export default class extends Controller {
+ static targets = ['liveModeToggle']
+
+ static values = {
+ enabled: { type: Boolean, default: true },
+ liveMode: { type: Boolean, default: false }
+ }
+
+ connect() {
+ console.log('[Realtime Controller] Connecting...')
+
+ if (!this.enabledValue) {
+ console.log('[Realtime Controller] Disabled, skipping setup')
+ return
+ }
+
+ try {
+ this.connectedChannels = new Set()
+ this.liveModeEnabled = false // Start with live mode disabled
+
+ // Delay channel setup to ensure ActionCable is ready
+ // This prevents race condition with page initialization
+ setTimeout(() => {
+ try {
+ this.setupChannels()
+ } catch (error) {
+ console.error('[Realtime Controller] Failed to setup channels in setTimeout:', error)
+ this.updateConnectionIndicator(false)
+ }
+ }, 1000)
+
+ // Initialize toggle state from settings
+ if (this.hasLiveModeToggleTarget) {
+ this.liveModeToggleTarget.checked = this.liveModeEnabled
+ }
+ } catch (error) {
+ console.error('[Realtime Controller] Failed to initialize:', error)
+ // Don't throw - allow page to continue loading
+ }
+ }
+
+ disconnect() {
+ this.channels?.unsubscribeAll()
+ }
+
+ /**
+ * Setup ActionCable channels
+ * Family channel is always enabled when family feature is on
+ * Points channel (live mode) is controlled by user toggle
+ */
+ setupChannels() {
+ try {
+ console.log('[Realtime Controller] Setting up channels...')
+ this.channels = createMapChannel({
+ connected: this.handleConnected.bind(this),
+ disconnected: this.handleDisconnected.bind(this),
+ received: this.handleReceived.bind(this),
+ enableLiveMode: this.liveModeEnabled // Control points channel
+ })
+ console.log('[Realtime Controller] Channels setup complete')
+ } catch (error) {
+ console.error('[Realtime Controller] Failed to setup channels:', error)
+ console.error('[Realtime Controller] Error stack:', error.stack)
+ this.updateConnectionIndicator(false)
+ // Don't throw - page should continue to work
+ }
+ }
+
+ /**
+ * Toggle live mode (new points appearing in real-time)
+ */
+ toggleLiveMode(event) {
+ this.liveModeEnabled = event.target.checked
+
+ // Update recent point layer visibility
+ this.updateRecentPointLayerVisibility()
+
+ // Reconnect channels with new settings
+ if (this.channels) {
+ this.channels.unsubscribeAll()
+ }
+ this.setupChannels()
+
+ const message = this.liveModeEnabled ? 'Live mode enabled' : 'Live mode disabled'
+ Toast.info(message)
+ }
+
+ /**
+ * Update recent point layer visibility based on live mode state
+ */
+ updateRecentPointLayerVisibility() {
+ const mapsController = this.mapsV2Controller
+ if (!mapsController) {
+ return
+ }
+
+ const recentPointLayer = mapsController.layerManager?.getLayer('recentPoint')
+ if (!recentPointLayer) {
+ return
+ }
+
+ if (this.liveModeEnabled) {
+ recentPointLayer.show()
+ } else {
+ recentPointLayer.hide()
+ recentPointLayer.clear()
+ }
+ }
+
+ /**
+ * Handle connection
+ */
+ handleConnected(channelName) {
+ this.connectedChannels.add(channelName)
+
+ // Only show toast when at least one channel is connected
+ if (this.connectedChannels.size === 1) {
+ Toast.success('Connected to real-time updates')
+ this.updateConnectionIndicator(true)
+ }
+ }
+
+ /**
+ * Handle disconnection
+ */
+ handleDisconnected(channelName) {
+ this.connectedChannels.delete(channelName)
+
+ // Show warning only when all channels are disconnected
+ if (this.connectedChannels.size === 0) {
+ Toast.warning('Disconnected from real-time updates')
+ this.updateConnectionIndicator(false)
+ }
+ }
+
+ /**
+ * Handle received data
+ */
+ handleReceived(data) {
+ switch (data.type) {
+ case 'new_point':
+ this.handleNewPoint(data.point)
+ break
+
+ case 'family_location':
+ this.handleFamilyLocation(data.member)
+ break
+
+ case 'notification':
+ this.handleNotification(data.notification)
+ break
+ }
+ }
+
+ /**
+ * Get the maps--maplibre controller (on same element)
+ */
+ get mapsV2Controller() {
+ const element = this.element
+ const app = this.application
+ return app.getControllerForElementAndIdentifier(element, 'maps--maplibre')
+ }
+
+ /**
+ * Handle new point
+ * Point data is broadcast as: [lat, lon, battery, altitude, timestamp, velocity, id, country_name]
+ */
+ handleNewPoint(pointData) {
+ const mapsController = this.mapsV2Controller
+ if (!mapsController) {
+ console.warn('[Realtime Controller] Maps controller not found')
+ return
+ }
+
+ console.log('[Realtime Controller] Received point data:', pointData)
+
+ // Parse point data from array format
+ const [lat, lon, battery, altitude, timestamp, velocity, id, countryName] = pointData
+
+ // Get points layer from layer manager
+ const pointsLayer = mapsController.layerManager?.getLayer('points')
+ if (!pointsLayer) {
+ console.warn('[Realtime Controller] Points layer not found')
+ return
+ }
+
+ // Get current data
+ const currentData = pointsLayer.data || { type: 'FeatureCollection', features: [] }
+ const features = [...(currentData.features || [])]
+
+ // Add new point
+ features.push({
+ type: 'Feature',
+ geometry: {
+ type: 'Point',
+ coordinates: [parseFloat(lon), parseFloat(lat)]
+ },
+ properties: {
+ id: parseInt(id),
+ latitude: parseFloat(lat),
+ longitude: parseFloat(lon),
+ battery: parseFloat(battery) || null,
+ altitude: parseFloat(altitude) || null,
+ timestamp: timestamp,
+ velocity: parseFloat(velocity) || null,
+ country_name: countryName || null
+ }
+ })
+
+ // Update layer with new data
+ pointsLayer.update({
+ type: 'FeatureCollection',
+ features
+ })
+
+ console.log('[Realtime Controller] Added new point to map:', id)
+
+ // Update recent point marker (always visible in live mode)
+ this.updateRecentPoint(parseFloat(lon), parseFloat(lat), {
+ id: parseInt(id),
+ battery: parseFloat(battery) || null,
+ altitude: parseFloat(altitude) || null,
+ timestamp: timestamp,
+ velocity: parseFloat(velocity) || null,
+ country_name: countryName || null
+ })
+
+ // Zoom to the new point
+ this.zoomToPoint(parseFloat(lon), parseFloat(lat))
+
+ Toast.info('New location recorded')
+ }
+
+ /**
+ * Handle family member location update
+ */
+ handleFamilyLocation(member) {
+ const mapsController = this.mapsV2Controller
+ if (!mapsController) return
+
+ const familyLayer = mapsController.familyLayer
+ if (familyLayer) {
+ familyLayer.updateMember(member)
+ }
+ }
+
+ /**
+ * Handle notification
+ */
+ handleNotification(notification) {
+ Toast.info(notification.message || 'New notification')
+ }
+
+ /**
+ * Update the recent point marker
+ * This marker is always visible in live mode, independent of points layer visibility
+ */
+ updateRecentPoint(longitude, latitude, properties = {}) {
+ const mapsController = this.mapsV2Controller
+ if (!mapsController) {
+ console.warn('[Realtime Controller] Maps controller not found')
+ return
+ }
+
+ const recentPointLayer = mapsController.layerManager?.getLayer('recentPoint')
+ if (!recentPointLayer) {
+ console.warn('[Realtime Controller] Recent point layer not found')
+ return
+ }
+
+ // Show the layer if live mode is enabled and update with new point
+ if (this.liveModeEnabled) {
+ recentPointLayer.show()
+ recentPointLayer.updateRecentPoint(longitude, latitude, properties)
+ console.log('[Realtime Controller] Updated recent point marker:', longitude, latitude)
+ }
+ }
+
+ /**
+ * Zoom map to a specific point
+ */
+ zoomToPoint(longitude, latitude) {
+ const mapsController = this.mapsV2Controller
+ if (!mapsController || !mapsController.map) {
+ console.warn('[Realtime Controller] Map not available for zooming')
+ return
+ }
+
+ const map = mapsController.map
+
+ // Fly to the new point with a smooth animation
+ map.flyTo({
+ center: [longitude, latitude],
+ zoom: Math.max(map.getZoom(), 14), // Zoom to at least level 14, or keep current zoom if higher
+ duration: 2000, // 2 second animation
+ essential: true // This animation is considered essential with respect to prefers-reduced-motion
+ })
+
+ console.log('[Realtime Controller] Zoomed to point:', longitude, latitude)
+ }
+
+ /**
+ * Update connection indicator
+ */
+ updateConnectionIndicator(connected) {
+ const indicator = document.querySelector('.connection-indicator')
+ if (indicator) {
+ // Show the indicator when connection is attempted
+ indicator.classList.add('active')
+ indicator.classList.toggle('connected', connected)
+ indicator.classList.toggle('disconnected', !connected)
+ }
+ }
+}
diff --git a/app/javascript/controllers/public_stat_map_controller.js b/app/javascript/controllers/public_stat_map_controller.js
index b0d9918a..c218fd0c 100644
--- a/app/javascript/controllers/public_stat_map_controller.js
+++ b/app/javascript/controllers/public_stat_map_controller.js
@@ -72,9 +72,7 @@ export default class extends BaseController {
}
async loadHexagons() {
- console.log('🎯 loadHexagons started - checking overlay state');
const initialLoadingElement = document.getElementById('map-loading');
- console.log('📊 Initial overlay display:', initialLoadingElement?.style.display || 'default');
try {
// Use server-provided data bounds
@@ -94,9 +92,6 @@ export default class extends BaseController {
// Fallback timeout in case moveend doesn't fire
setTimeout(resolve, 1000);
});
- console.log('✅ Map fitBounds complete - checking overlay state');
- const afterFitBoundsElement = document.getElementById('map-loading');
- console.log('📊 After fitBounds overlay display:', afterFitBoundsElement?.style.display || 'default');
}
// Load hexagons only if they are pre-calculated and data exists
@@ -138,7 +133,6 @@ export default class extends BaseController {
loadingElement.style.display = 'flex';
loadingElement.style.visibility = 'visible';
loadingElement.style.zIndex = '9999';
- console.log('👁️ Loading overlay ENSURED visible - should be visible now');
}
// Disable map interaction during loading
@@ -187,7 +181,6 @@ export default class extends BaseController {
}
const geojsonData = await response.json();
- console.log(`✅ Loaded ${geojsonData.features?.length || 0} hexagons`);
// Add hexagons directly to map as a static layer
if (geojsonData.features && geojsonData.features.length > 0) {
@@ -210,7 +203,6 @@ export default class extends BaseController {
const loadingElement = document.getElementById('map-loading');
if (loadingElement) {
loadingElement.style.display = 'none';
- console.log('🚫 Loading overlay hidden - hexagons are fully loaded');
}
}
}
diff --git a/app/javascript/controllers/speed_color_editor_controller.js b/app/javascript/controllers/speed_color_editor_controller.js
new file mode 100644
index 00000000..5dfc573b
--- /dev/null
+++ b/app/javascript/controllers/speed_color_editor_controller.js
@@ -0,0 +1,184 @@
+import { Controller } from '@hotwired/stimulus'
+
+/**
+ * Speed Color Editor Controller
+ * Manages the gradient editor modal for speed-colored routes
+ */
+export default class extends Controller {
+ static targets = ['modal', 'stopsList', 'preview']
+ static values = {
+ colorStops: String
+ }
+
+ connect() {
+ this.loadColorStops()
+ }
+
+ loadColorStops() {
+ const stopsString = this.colorStopsValue || '0:#00ff00|15:#00ffff|30:#ff00ff|50:#ffff00|100:#ff3300'
+ this.stops = this.parseColorStops(stopsString)
+ this.renderStops()
+ this.updatePreview()
+ }
+
+ parseColorStops(stopsString) {
+ return stopsString.split('|').map(segment => {
+ const [speed, color] = segment.split(':')
+ return { speed: Number(speed), color }
+ })
+ }
+
+ serializeColorStops() {
+ return this.stops.map(stop => `${stop.speed}:${stop.color}`).join('|')
+ }
+
+ renderStops() {
+ if (!this.hasStopsListTarget) return
+
+ this.stopsListTarget.innerHTML = this.stops.map((stop, index) => `
+
+
+
+ Edit Speed Color Gradient
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `).join('')
+ }
+
+ updateSpeed(event) {
+ const index = parseInt(event.target.dataset.index)
+ this.stops[index].speed = Number(event.target.value)
+ this.updatePreview()
+ }
+
+ updateColor(event) {
+ const index = parseInt(event.target.dataset.index)
+ const color = event.target.value
+ this.stops[index].color = color
+
+ // Update text input
+ const textInput = event.target.parentElement.querySelector('input[type="text"]')
+ if (textInput) {
+ textInput.value = color
+ }
+
+ this.updatePreview()
+ }
+
+ updateColorText(event) {
+ const index = parseInt(event.target.dataset.index)
+ const color = event.target.value
+
+ if (/^#[0-9A-Fa-f]{6}$/.test(color)) {
+ this.stops[index].color = color
+
+ // Update color picker
+ const colorInput = event.target.parentElement.querySelector('input[type="color"]')
+ if (colorInput) {
+ colorInput.value = color
+ }
+
+ this.updatePreview()
+ }
+ }
+
+ addStop() {
+ // Find a good speed value between existing stops
+ const lastStop = this.stops[this.stops.length - 1]
+ const newSpeed = lastStop.speed + 10
+
+ this.stops.push({
+ speed: newSpeed,
+ color: '#ff0000'
+ })
+
+ // Sort by speed
+ this.stops.sort((a, b) => a.speed - b.speed)
+
+ this.renderStops()
+ this.updatePreview()
+ }
+
+ removeStop(event) {
+ const index = parseInt(event.target.dataset.index)
+
+ if (this.stops.length > 2) {
+ this.stops.splice(index, 1)
+ this.renderStops()
+ this.updatePreview()
+ }
+ }
+
+ updatePreview() {
+ if (!this.hasPreviewTarget) return
+
+ const gradient = this.stops.map((stop, index) => {
+ const percentage = (index / (this.stops.length - 1)) * 100
+ return `${stop.color} ${percentage}%`
+ }).join(', ')
+
+ this.previewTarget.style.background = `linear-gradient(to right, ${gradient})`
+ }
+
+ save() {
+ const serialized = this.serializeColorStops()
+
+ // Dispatch event with the new color stops
+ this.dispatch('save', {
+ detail: { colorStops: serialized }
+ })
+
+ this.close()
+ }
+
+ close() {
+ if (this.hasModalTarget) {
+ const checkbox = this.modalTarget.querySelector('.modal-toggle')
+ if (checkbox) {
+ checkbox.checked = false
+ }
+ }
+ }
+
+ resetToDefault() {
+ this.colorStopsValue = '0:#00ff00|15:#00ffff|30:#ff00ff|50:#ffff00|100:#ff3300'
+ this.loadColorStops()
+ }
+}
diff --git a/app/javascript/controllers/visit_creation_v2_controller.js b/app/javascript/controllers/visit_creation_v2_controller.js
new file mode 100644
index 00000000..ad53c945
--- /dev/null
+++ b/app/javascript/controllers/visit_creation_v2_controller.js
@@ -0,0 +1,255 @@
+import { Controller } from '@hotwired/stimulus'
+import { Toast } from 'maps_maplibre/components/toast'
+
+/**
+ * Controller for visit creation modal in Maps V2
+ */
+export default class extends Controller {
+ static targets = [
+ 'modal',
+ 'form',
+ 'modalTitle',
+ 'nameInput',
+ 'startTimeInput',
+ 'endTimeInput',
+ 'latitudeInput',
+ 'longitudeInput',
+ 'submitButton'
+ ]
+
+ static values = {
+ apiKey: String
+ }
+
+ connect() {
+ console.log('[Visit Creation V2] Controller connected')
+ this.marker = null
+ this.mapController = null
+ this.editingVisitId = null
+ this.setupEventListeners()
+ }
+
+ setupEventListeners() {
+ document.addEventListener('visit:edit', (e) => {
+ this.openForEdit(e.detail.visit)
+ })
+ }
+
+ disconnect() {
+ this.cleanup()
+ }
+
+ /**
+ * Open the modal with coordinates
+ */
+ open(lat, lng, mapController) {
+ console.log('[Visit Creation V2] Opening modal', { lat, lng })
+
+ this.editingVisitId = null
+ this.mapController = mapController
+ this.latitudeInputTarget.value = lat
+ this.longitudeInputTarget.value = lng
+
+ // Set modal title and button for creation
+ if (this.hasModalTitleTarget) {
+ this.modalTitleTarget.textContent = 'Create New Visit'
+ }
+ if (this.hasSubmitButtonTarget) {
+ this.submitButtonTarget.textContent = 'Create Visit'
+ }
+
+ // Set default times
+ const now = new Date()
+ const oneHourLater = new Date(now.getTime() + (60 * 60 * 1000))
+
+ this.startTimeInputTarget.value = this.formatDateTime(now)
+ this.endTimeInputTarget.value = this.formatDateTime(oneHourLater)
+
+ // Show modal
+ this.modalTarget.classList.add('modal-open')
+
+ // Focus on name input
+ setTimeout(() => this.nameInputTarget.focus(), 100)
+
+ // Add marker to map
+ this.addMarker(lat, lng)
+ }
+
+ /**
+ * Open the modal for editing an existing visit
+ */
+ openForEdit(visit) {
+ console.log('[Visit Creation V2] Opening modal for edit', visit)
+
+ this.editingVisitId = visit.id
+
+ // Set modal title and button for editing
+ if (this.hasModalTitleTarget) {
+ this.modalTitleTarget.textContent = 'Edit Visit'
+ }
+ if (this.hasSubmitButtonTarget) {
+ this.submitButtonTarget.textContent = 'Update Visit'
+ }
+
+ // Fill form with visit data
+ this.nameInputTarget.value = visit.name || ''
+ this.latitudeInputTarget.value = visit.latitude
+ this.longitudeInputTarget.value = visit.longitude
+
+ // Convert timestamps to datetime-local format
+ this.startTimeInputTarget.value = this.formatDateTime(new Date(visit.started_at))
+ this.endTimeInputTarget.value = this.formatDateTime(new Date(visit.ended_at))
+
+ // Show modal
+ this.modalTarget.classList.add('modal-open')
+
+ // Focus on name input
+ setTimeout(() => this.nameInputTarget.focus(), 100)
+
+ // Try to get map controller from the maps--maplibre controller
+ const mapElement = document.querySelector('[data-controller*="maps--maplibre"]')
+ if (mapElement) {
+ const app = window.Stimulus || window.Application
+ this.mapController = app?.getControllerForElementAndIdentifier(mapElement, 'maps--maplibre')
+ }
+
+ // Add marker to map
+ this.addMarker(visit.latitude, visit.longitude)
+ }
+
+ /**
+ * Close the modal
+ */
+ close() {
+ console.log('[Visit Creation V2] Closing modal')
+
+ // Hide modal
+ this.modalTarget.classList.remove('modal-open')
+
+ // Reset form
+ this.formTarget.reset()
+
+ // Reset editing state
+ this.editingVisitId = null
+
+ // Remove marker
+ this.removeMarker()
+ }
+
+ /**
+ * Handle form submission
+ */
+ async submit(event) {
+ event.preventDefault()
+
+ const isEdit = this.editingVisitId !== null
+ console.log(`[Visit Creation V2] Submitting form (${isEdit ? 'edit' : 'create'})`)
+
+ const formData = new FormData(this.formTarget)
+
+ const visitData = {
+ visit: {
+ name: formData.get('name'),
+ started_at: formData.get('started_at'),
+ ended_at: formData.get('ended_at'),
+ latitude: parseFloat(formData.get('latitude')),
+ longitude: parseFloat(formData.get('longitude')),
+ status: 'confirmed'
+ }
+ }
+
+ try {
+ const url = isEdit ? `/api/v1/visits/${this.editingVisitId}` : '/api/v1/visits'
+ const method = isEdit ? 'PATCH' : 'POST'
+
+ const response = await fetch(url, {
+ method: method,
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': `Bearer ${this.apiKeyValue}`,
+ 'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content || ''
+ },
+ body: JSON.stringify(visitData)
+ })
+
+ if (!response.ok) {
+ const errorData = await response.json()
+ throw new Error(errorData.error || `Failed to ${isEdit ? 'update' : 'create'} visit`)
+ }
+
+ const visit = await response.json()
+
+ console.log(`[Visit Creation V2] Visit ${isEdit ? 'updated' : 'created'} successfully`, visit)
+
+ // Show success message
+ this.showToast(`Visit ${isEdit ? 'updated' : 'created'} successfully`, 'success')
+
+ // Close modal
+ this.close()
+
+ // Dispatch event to notify map controller
+ const eventName = isEdit ? 'visit:updated' : 'visit:created'
+ document.dispatchEvent(new CustomEvent(eventName, {
+ detail: { visit }
+ }))
+ } catch (error) {
+ console.error(`[Visit Creation V2] Error ${isEdit ? 'updating' : 'creating'} visit:`, error)
+ this.showToast(error.message || `Failed to ${isEdit ? 'update' : 'create'} visit`, 'error')
+ }
+ }
+
+ /**
+ * Add marker to map
+ */
+ addMarker(lat, lng) {
+ if (!this.mapController) return
+
+ // Remove existing marker if any
+ this.removeMarker()
+
+ // Create marker element
+ const el = document.createElement('div')
+ el.className = 'visit-creation-marker'
+ el.innerHTML = '📍'
+ el.style.fontSize = '30px'
+
+ // Use maplibregl if available (from mapController)
+ const maplibregl = window.maplibregl
+ if (maplibregl) {
+ this.marker = new maplibregl.Marker({ element: el })
+ .setLngLat([lng, lat])
+ .addTo(this.mapController.map)
+ }
+ }
+
+ /**
+ * Remove marker from map
+ */
+ removeMarker() {
+ if (this.marker) {
+ this.marker.remove()
+ this.marker = null
+ }
+ }
+
+ /**
+ * Clean up resources
+ */
+ cleanup() {
+ this.removeMarker()
+ }
+
+ /**
+ * Format date for datetime-local input
+ */
+ formatDateTime(date) {
+ return date.toISOString().slice(0, 16)
+ }
+
+ /**
+ * Show toast notification
+ */
+ showToast(message, type = 'info') {
+ Toast[type](message)
+ }
+}
diff --git a/app/javascript/maps/vector_maps_config.js b/app/javascript/maps/vector_maps_config.js
index 46a3e3d2..11e2cf05 100644
--- a/app/javascript/maps/vector_maps_config.js
+++ b/app/javascript/maps/vector_maps_config.js
@@ -1,32 +1,36 @@
+/**
+ * Vector maps configuration for Maps V1 (legacy)
+ * For Maps V2, use style_manager.js instead
+ */
export const mapsConfig = {
"Light": {
url: "https://tyles.dwri.xyz/planet/{z}/{x}/{y}.mvt",
flavor: "light",
- maxZoom: 16,
+ maxZoom: 14,
attribution: "Protomaps, © OpenStreetMap"
},
"Dark": {
url: "https://tyles.dwri.xyz/planet/{z}/{x}/{y}.mvt",
flavor: "dark",
- maxZoom: 16,
+ maxZoom: 14,
attribution: "Protomaps, © OpenStreetMap"
},
"White": {
url: "https://tyles.dwri.xyz/planet/{z}/{x}/{y}.mvt",
flavor: "white",
- maxZoom: 16,
+ maxZoom: 14,
attribution: "Protomaps, © OpenStreetMap"
},
"Grayscale": {
url: "https://tyles.dwri.xyz/planet/{z}/{x}/{y}.mvt",
flavor: "grayscale",
- maxZoom: 16,
+ maxZoom: 14,
attribution: "Protomaps, © OpenStreetMap"
},
"Black": {
url: "https://tyles.dwri.xyz/planet/{z}/{x}/{y}.mvt",
flavor: "black",
- maxZoom: 16,
+ maxZoom: 14,
attribution: "Protomaps, © OpenStreetMap"
},
};
diff --git a/app/javascript/maps_maplibre/channels/map_channel.js b/app/javascript/maps_maplibre/channels/map_channel.js
new file mode 100644
index 00000000..7a2e9d38
--- /dev/null
+++ b/app/javascript/maps_maplibre/channels/map_channel.js
@@ -0,0 +1,118 @@
+import consumer from '../../channels/consumer'
+
+/**
+ * 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
+ */
+export function createMapChannel(options = {}) {
+ const { enableLiveMode = false, ...callbacks } = options
+ const subscriptions = {
+ family: null,
+ points: null,
+ notifications: null
+ }
+
+ console.log('[MapChannel] Creating channels with enableLiveMode:', enableLiveMode)
+
+ // Defensive check - consumer might not be available
+ if (!consumer) {
+ console.warn('[MapChannel] ActionCable consumer not available')
+ return {
+ subscriptions,
+ unsubscribeAll() {}
+ }
+ }
+
+ // Subscribe to family locations if family feature is enabled
+ try {
+ const familyFeaturesElement = document.querySelector('[data-family-members-features-value]')
+ const features = familyFeaturesElement ? JSON.parse(familyFeaturesElement.dataset.familyMembersFeaturesValue) : {}
+
+ if (features.family) {
+ subscriptions.family = consumer.subscriptions.create('FamilyLocationsChannel', {
+ connected() {
+ console.log('FamilyLocationsChannel connected')
+ callbacks.connected?.('family')
+ },
+
+ disconnected() {
+ console.log('FamilyLocationsChannel disconnected')
+ callbacks.disconnected?.('family')
+ },
+
+ received(data) {
+ console.log('FamilyLocationsChannel received:', data)
+ callbacks.received?.({
+ type: 'family_location',
+ member: data
+ })
+ }
+ })
+ }
+ } catch (error) {
+ console.warn('[MapChannel] Failed to subscribe to family channel:', error)
+ }
+
+ // Subscribe to points channel for real-time point updates (only if live mode is enabled)
+ if (enableLiveMode) {
+ try {
+ subscriptions.points = consumer.subscriptions.create('PointsChannel', {
+ connected() {
+ console.log('PointsChannel connected')
+ callbacks.connected?.('points')
+ },
+
+ disconnected() {
+ console.log('PointsChannel disconnected')
+ callbacks.disconnected?.('points')
+ },
+
+ received(data) {
+ console.log('PointsChannel received:', data)
+ callbacks.received?.({
+ type: 'new_point',
+ point: data
+ })
+ }
+ })
+ } catch (error) {
+ console.warn('[MapChannel] Failed to subscribe to points channel:', error)
+ }
+ } else {
+ console.log('[MapChannel] Live mode disabled, not subscribing to PointsChannel')
+ }
+
+ // Subscribe to notifications channel
+ try {
+ subscriptions.notifications = consumer.subscriptions.create('NotificationsChannel', {
+ connected() {
+ console.log('NotificationsChannel connected')
+ callbacks.connected?.('notifications')
+ },
+
+ disconnected() {
+ console.log('NotificationsChannel disconnected')
+ callbacks.disconnected?.('notifications')
+ },
+
+ received(data) {
+ console.log('NotificationsChannel received:', data)
+ callbacks.received?.({
+ type: 'notification',
+ notification: data
+ })
+ }
+ })
+ } catch (error) {
+ console.warn('[MapChannel] Failed to subscribe to notifications channel:', error)
+ }
+
+ return {
+ subscriptions,
+ unsubscribeAll() {
+ Object.values(subscriptions).forEach(sub => sub?.unsubscribe())
+ }
+ }
+}
diff --git a/app/javascript/maps_maplibre/components/photo_popup.js b/app/javascript/maps_maplibre/components/photo_popup.js
new file mode 100644
index 00000000..d1791b1b
--- /dev/null
+++ b/app/javascript/maps_maplibre/components/photo_popup.js
@@ -0,0 +1,100 @@
+/**
+ * Factory for creating photo popups
+ */
+export class PhotoPopupFactory {
+ /**
+ * Create popup for a photo
+ * @param {Object} properties - Photo properties
+ * @returns {string} HTML for popup
+ */
+ static createPhotoPopup(properties) {
+ const {
+ id,
+ thumbnail_url,
+ taken_at,
+ filename,
+ city,
+ state,
+ country,
+ type,
+ source
+ } = properties
+
+ const takenDate = taken_at ? new Date(taken_at).toLocaleString() : 'Unknown'
+ const location = [city, state, country].filter(Boolean).join(', ') || 'Unknown location'
+ const mediaType = type === 'VIDEO' ? '🎥 Video' : '📷 Photo'
+
+ return `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+ }
+}
diff --git a/app/javascript/maps_maplibre/components/popup_factory.js b/app/javascript/maps_maplibre/components/popup_factory.js
new file mode 100644
index 00000000..4a6e9a47
--- /dev/null
+++ b/app/javascript/maps_maplibre/components/popup_factory.js
@@ -0,0 +1,114 @@
+import { formatTimestamp } from '../utils/geojson_transformers'
+import { getCurrentTheme, getThemeColors } from '../utils/popup_theme'
+
+/**
+ * Factory for creating map popups
+ */
+export class PopupFactory {
+ /**
+ * Create popup for a point
+ * @param {Object} properties - Point properties
+ * @returns {string} HTML for popup
+ */
+ static createPointPopup(properties) {
+ const { id, timestamp, altitude, battery, accuracy, velocity } = properties
+
+ // Get theme colors
+ const theme = getCurrentTheme()
+ const colors = getThemeColors(theme)
+
+ return `
+
+ 
+
+
+
+ ${filename}
+
+ Location: ${location}
+ Source: ${source}
+ ${mediaType}
+
+
+ `
+ }
+
+ /**
+ * Create popup for a place
+ * @param {Object} properties - Place properties
+ * @returns {string} HTML for popup
+ */
+ static createPlacePopup(properties) {
+ const { id, name, latitude, longitude, note, tags } = properties
+
+ // Get theme colors
+ const theme = getCurrentTheme()
+ const colors = getThemeColors(theme)
+
+ // Parse tags if they're stringified
+ let parsedTags = tags
+ if (typeof tags === 'string') {
+ try {
+ parsedTags = JSON.parse(tags)
+ } catch (e) {
+ parsedTags = []
+ }
+ }
+
+ // Format tags as badges
+ const tagsHtml = parsedTags && Array.isArray(parsedTags) && parsedTags.length > 0
+ ? parsedTags.map(tag => `
+
+ ${tag.icon} #${tag.name}
+
+ `).join(' ')
+ : `Untagged`
+
+ return `
+
+ Point #${id}
+
+
+
+
+ Time:
+ ${formatTimestamp(timestamp)}
+
+ ${altitude ? `
+
+ Altitude:
+ ${Math.round(altitude)}m
+
+ ` : ''}
+ ${battery ? `
+
+ Battery:
+ ${battery}%
+
+ ` : ''}
+ ${accuracy ? `
+
+ Accuracy:
+ ${Math.round(accuracy)}m
+
+ ` : ''}
+ ${velocity ? `
+
+ Speed:
+ ${Math.round(velocity * 3.6)} km/h
+
+ ` : ''}
+
+
+ `
+ }
+}
diff --git a/app/javascript/maps_maplibre/components/toast.js b/app/javascript/maps_maplibre/components/toast.js
new file mode 100644
index 00000000..24b5901e
--- /dev/null
+++ b/app/javascript/maps_maplibre/components/toast.js
@@ -0,0 +1,183 @@
+/**
+ * Toast notification system
+ * Displays temporary notifications in the top-right corner
+ */
+export class Toast {
+ static container = null
+
+ /**
+ * Initialize toast container
+ */
+ static init() {
+ if (this.container) return
+
+ this.container = document.createElement('div')
+ this.container.className = 'toast-container'
+ this.container.style.cssText = `
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ z-index: 9999;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ pointer-events: none;
+ `
+ document.body.appendChild(this.container)
+
+ // Add CSS animations
+ this.addStyles()
+ }
+
+ /**
+ * Add CSS animations for toasts
+ */
+ static addStyles() {
+ if (document.getElementById('toast-styles')) return
+
+ const style = document.createElement('style')
+ style.id = 'toast-styles'
+ style.textContent = `
+ @keyframes toast-slide-in {
+ from {
+ transform: translateX(400px);
+ opacity: 0;
+ }
+ to {
+ transform: translateX(0);
+ opacity: 1;
+ }
+ }
+
+ @keyframes toast-slide-out {
+ from {
+ transform: translateX(0);
+ opacity: 1;
+ }
+ to {
+ transform: translateX(400px);
+ opacity: 0;
+ }
+ }
+
+ .toast {
+ pointer-events: auto;
+ animation: toast-slide-in 0.3s ease-out;
+ }
+
+ .toast.removing {
+ animation: toast-slide-out 0.3s ease-out;
+ }
+ `
+ document.head.appendChild(style)
+ }
+
+ /**
+ * Show toast notification
+ * @param {string} message - Message to display
+ * @param {string} type - Toast type: 'success', 'error', 'info', 'warning'
+ * @param {number} duration - Duration in milliseconds (default 3000)
+ */
+ static show(message, type = 'info', duration = 3000) {
+ this.init()
+
+ const toast = document.createElement('div')
+ toast.className = `toast toast-${type}`
+ toast.textContent = message
+
+ toast.style.cssText = `
+ padding: 12px 20px;
+ background: ${this.getBackgroundColor(type)};
+ color: white;
+ border-radius: 8px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ font-size: 14px;
+ font-weight: 500;
+ max-width: 300px;
+ line-height: 1.4;
+ `
+
+ this.container.appendChild(toast)
+
+ // Auto dismiss after duration
+ if (duration > 0) {
+ setTimeout(() => {
+ this.dismiss(toast)
+ }, duration)
+ }
+
+ return toast
+ }
+
+ /**
+ * Dismiss a toast
+ * @param {HTMLElement} toast - Toast element to dismiss
+ */
+ static dismiss(toast) {
+ toast.classList.add('removing')
+ setTimeout(() => {
+ toast.remove()
+ }, 300)
+ }
+
+ /**
+ * Get background color for toast type
+ * @param {string} type - Toast type
+ * @returns {string} CSS color
+ */
+ static getBackgroundColor(type) {
+ const colors = {
+ success: '#22c55e',
+ error: '#ef4444',
+ warning: '#f59e0b',
+ info: '#3b82f6'
+ }
+ return colors[type] || colors.info
+ }
+
+ /**
+ * Show success toast
+ * @param {string} message
+ * @param {number} duration
+ */
+ static success(message, duration = 3000) {
+ return this.show(message, 'success', duration)
+ }
+
+ /**
+ * Show error toast
+ * @param {string} message
+ * @param {number} duration
+ */
+ static error(message, duration = 4000) {
+ return this.show(message, 'error', duration)
+ }
+
+ /**
+ * Show warning toast
+ * @param {string} message
+ * @param {number} duration
+ */
+ static warning(message, duration = 3500) {
+ return this.show(message, 'warning', duration)
+ }
+
+ /**
+ * Show info toast
+ * @param {string} message
+ * @param {number} duration
+ */
+ static info(message, duration = 3000) {
+ return this.show(message, 'info', duration)
+ }
+
+ /**
+ * Clear all toasts
+ */
+ static clearAll() {
+ if (!this.container) return
+
+ const toasts = this.container.querySelectorAll('.toast')
+ toasts.forEach(toast => this.dismiss(toast))
+ }
+}
diff --git a/app/javascript/maps_maplibre/components/visit_card.js b/app/javascript/maps_maplibre/components/visit_card.js
new file mode 100644
index 00000000..5b62e4ba
--- /dev/null
+++ b/app/javascript/maps_maplibre/components/visit_card.js
@@ -0,0 +1,156 @@
+/**
+ * Visit card component for rendering individual visit cards in the side panel
+ */
+export class VisitCard {
+ /**
+ * Create HTML for a visit card
+ * @param {Object} visit - Visit object with id, name, status, started_at, ended_at, duration, place
+ * @param {Object} options - { isSelected, onSelect, onConfirm, onDecline, onHover }
+ * @returns {string} HTML string
+ */
+ static create(visit, options = {}) {
+ const { isSelected = false, onSelect, onConfirm, onDecline, onHover } = options
+ const isSuggested = visit.status === 'suggested'
+ const isConfirmed = visit.status === 'confirmed'
+ const isDeclined = visit.status === 'declined'
+
+ // Format date and time
+ const startDate = new Date(visit.started_at)
+ const endDate = new Date(visit.ended_at)
+ const dateStr = startDate.toLocaleDateString('en-US', {
+ month: 'short',
+ day: 'numeric',
+ year: 'numeric'
+ })
+ const timeRange = `${startDate.toLocaleTimeString('en-US', {
+ hour: '2-digit',
+ minute: '2-digit'
+ })} - ${endDate.toLocaleTimeString('en-US', {
+ hour: '2-digit',
+ minute: '2-digit'
+ })}`
+
+ // Format duration (duration is in minutes from the backend)
+ const hours = Math.floor(visit.duration / 60)
+ const minutes = visit.duration % 60
+ const durationStr = hours > 0
+ ? `${hours}h ${minutes}m`
+ : `${minutes}m`
+
+ // Border style based on status
+ const borderClass = isSuggested ? 'border-dashed' : ''
+ const bgClass = isDeclined ? 'bg-base-200 opacity-60' : 'bg-base-100'
+ const selectedClass = isSelected ? 'ring-2 ring-primary' : ''
+
+ return `
+
+ ${name || `Place #${id}`}
+
+
+ ${note ? `
+
+
+ Note:
+ ${note}
+
+ ` : ''}
+
+ Tags:
+
+ ${tagsHtml}
+
+ Coordinates:
+ ${latitude.toFixed(5)}, ${longitude.toFixed(5)}
+
+
+
+
+
+ `
+ }
+
+ /**
+ * Create bulk action buttons HTML
+ * @param {number} selectedCount - Number of selected visits
+ * @returns {string} HTML string
+ */
+ static createBulkActions(selectedCount) {
+ if (selectedCount < 2) return ''
+
+ return `
+
+
+
+
+
+
+
+ + ${visit.name || visit.place?.name || 'Unnamed Visit'} +
+ + +
+
+
+
+ ${isSuggested ? `
+
+
+ ${dateStr}
+
+
+
+ ${timeRange}
+
+
+
+ ${durationStr}
+
+
+
+
+
+ ` : ''}
+
+
+ ${isConfirmed || isDeclined ? `
+
+
+ ${visit.status}
+
+
+ ` : ''}
+
+
+ `
+ }
+}
diff --git a/app/javascript/maps_maplibre/components/visit_popup.js b/app/javascript/maps_maplibre/components/visit_popup.js
new file mode 100644
index 00000000..3db92fe2
--- /dev/null
+++ b/app/javascript/maps_maplibre/components/visit_popup.js
@@ -0,0 +1,138 @@
+import { formatTimestamp } from '../utils/geojson_transformers'
+import { getCurrentTheme, getThemeColors } from '../utils/popup_theme'
+
+/**
+ * Factory for creating visit popups
+ */
+export class VisitPopupFactory {
+ /**
+ * Create popup for a visit
+ * @param {Object} properties - Visit properties
+ * @returns {string} HTML for popup
+ */
+ static createVisitPopup(properties) {
+ const { id, name, status, started_at, ended_at, duration, place_name } = properties
+
+ const startTime = formatTimestamp(started_at)
+ const endTime = formatTimestamp(ended_at)
+ const durationHours = Math.round(duration / 3600)
+ const durationDisplay = durationHours >= 1 ? `${durationHours}h` : `${Math.round(duration / 60)}m`
+
+ // Get theme colors
+ const theme = getCurrentTheme()
+ const colors = getThemeColors(theme)
+
+ return `
+
+ ${selectedCount} visit${selectedCount === 1 ? '' : 's'} selected
+
+
+
+
+
+
+
+
+
+
+ `
+ }
+}
diff --git a/app/javascript/maps_maplibre/layers/areas_layer.js b/app/javascript/maps_maplibre/layers/areas_layer.js
new file mode 100644
index 00000000..c6f43b23
--- /dev/null
+++ b/app/javascript/maps_maplibre/layers/areas_layer.js
@@ -0,0 +1,67 @@
+import { BaseLayer } from './base_layer'
+
+/**
+ * Areas layer for user-defined regions
+ */
+export class AreasLayer extends BaseLayer {
+ constructor(map, options = {}) {
+ super(map, { id: 'areas', ...options })
+ }
+
+ getSourceConfig() {
+ return {
+ type: 'geojson',
+ data: this.data || {
+ type: 'FeatureCollection',
+ features: []
+ }
+ }
+ }
+
+ getLayerConfigs() {
+ return [
+ // Area fills
+ {
+ id: `${this.id}-fill`,
+ type: 'fill',
+ source: this.sourceId,
+ paint: {
+ 'fill-color': '#ff0000',
+ 'fill-opacity': 0.4
+ }
+ },
+
+ // Area outlines
+ {
+ id: `${this.id}-outline`,
+ type: 'line',
+ source: this.sourceId,
+ paint: {
+ 'line-color': '#ff0000',
+ 'line-width': 3
+ }
+ },
+
+ // Area labels
+ {
+ id: `${this.id}-labels`,
+ type: 'symbol',
+ source: this.sourceId,
+ layout: {
+ 'text-field': ['get', 'name'],
+ 'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
+ 'text-size': 14
+ },
+ paint: {
+ 'text-color': '#111827',
+ 'text-halo-color': '#ffffff',
+ 'text-halo-width': 2
+ }
+ }
+ ]
+ }
+
+ getLayerIds() {
+ return [`${this.id}-fill`, `${this.id}-outline`, `${this.id}-labels`]
+ }
+}
diff --git a/app/javascript/maps_maplibre/layers/base_layer.js b/app/javascript/maps_maplibre/layers/base_layer.js
new file mode 100644
index 00000000..6c79e253
--- /dev/null
+++ b/app/javascript/maps_maplibre/layers/base_layer.js
@@ -0,0 +1,136 @@
+/**
+ * Base class for all map layers
+ * Provides common functionality for layer management
+ */
+export class BaseLayer {
+ constructor(map, options = {}) {
+ this.map = map
+ this.id = options.id || this.constructor.name.toLowerCase()
+ this.sourceId = `${this.id}-source`
+ this.visible = options.visible !== false
+ this.data = null
+ }
+
+ /**
+ * Add layer to map with data
+ * @param {Object} data - GeoJSON or layer-specific data
+ */
+ add(data) {
+ console.log(`[BaseLayer:${this.id}] add() called, visible:`, this.visible, 'features:', data?.features?.length || 0)
+ this.data = data
+
+ // Add source
+ if (!this.map.getSource(this.sourceId)) {
+ console.log(`[BaseLayer:${this.id}] Adding source:`, this.sourceId)
+ this.map.addSource(this.sourceId, this.getSourceConfig())
+ } else {
+ console.log(`[BaseLayer:${this.id}] Source already exists:`, this.sourceId)
+ }
+
+ // Add layers
+ const layers = this.getLayerConfigs()
+ console.log(`[BaseLayer:${this.id}] Adding ${layers.length} layer(s)`)
+ layers.forEach(layerConfig => {
+ if (!this.map.getLayer(layerConfig.id)) {
+ console.log(`[BaseLayer:${this.id}] Adding layer:`, layerConfig.id, 'type:', layerConfig.type)
+ this.map.addLayer(layerConfig)
+ } else {
+ console.log(`[BaseLayer:${this.id}] Layer already exists:`, layerConfig.id)
+ }
+ })
+
+ this.setVisibility(this.visible)
+ console.log(`[BaseLayer:${this.id}] Layer added successfully`)
+ }
+
+ /**
+ * Update layer data
+ * @param {Object} data - New data
+ */
+ update(data) {
+ this.data = data
+ const source = this.map.getSource(this.sourceId)
+ if (source && source.setData) {
+ source.setData(data)
+ }
+ }
+
+ /**
+ * Remove layer from map
+ */
+ remove() {
+ this.getLayerIds().forEach(layerId => {
+ if (this.map.getLayer(layerId)) {
+ this.map.removeLayer(layerId)
+ }
+ })
+
+ if (this.map.getSource(this.sourceId)) {
+ this.map.removeSource(this.sourceId)
+ }
+
+ this.data = null
+ }
+
+ /**
+ * Show layer
+ */
+ show() {
+ this.visible = true
+ this.setVisibility(true)
+ }
+
+ /**
+ * Hide layer
+ */
+ hide() {
+ this.visible = false
+ this.setVisibility(false)
+ }
+
+ /**
+ * Toggle layer visibility
+ * @param {boolean} visible - Show/hide layer
+ */
+ toggle(visible = !this.visible) {
+ this.visible = visible
+ this.setVisibility(visible)
+ }
+
+ /**
+ * Set visibility for all layer IDs
+ * @param {boolean} visible
+ */
+ setVisibility(visible) {
+ const visibility = visible ? 'visible' : 'none'
+ this.getLayerIds().forEach(layerId => {
+ if (this.map.getLayer(layerId)) {
+ this.map.setLayoutProperty(layerId, 'visibility', visibility)
+ }
+ })
+ }
+
+ /**
+ * Get source configuration (override in subclass)
+ * @returns {Object} MapLibre source config
+ */
+ getSourceConfig() {
+ throw new Error('Must implement getSourceConfig()')
+ }
+
+ /**
+ * Get layer configurations (override in subclass)
+ * @returns {Array
+ ${name || place_name || 'Unknown Place'}
+ ${status}
+
+
+
+
+
+ Arrived:
+ ${startTime}
+
+
+ Left:
+ ${endTime}
+
+
+ Duration:
+ ${durationDisplay}
+
+