@@ -2228,7 +2229,7 @@ export default class extends BaseController {
`).join('')}
diff --git a/app/javascript/controllers/public_stat_map_controller.js b/app/javascript/controllers/public_stat_map_controller.js
index c218fd0c..3170d0e8 100644
--- a/app/javascript/controllers/public_stat_map_controller.js
+++ b/app/javascript/controllers/public_stat_map_controller.js
@@ -10,7 +10,8 @@ export default class extends BaseController {
uuid: String,
dataBounds: Object,
hexagonsAvailable: Boolean,
- selfHosted: String
+ selfHosted: String,
+ timezone: String
};
connect() {
@@ -247,10 +248,11 @@ export default class extends BaseController {
}
buildPopupContent(props) {
- const startDate = props.earliest_point ? new Date(props.earliest_point).toLocaleDateString() : 'N/A';
- const endDate = props.latest_point ? new Date(props.latest_point).toLocaleDateString() : 'N/A';
- const startTime = props.earliest_point ? new Date(props.earliest_point).toLocaleTimeString() : '';
- const endTime = props.latest_point ? new Date(props.latest_point).toLocaleTimeString() : '';
+ const timezone = this.timezoneValue || 'UTC';
+ const startDate = props.earliest_point ? new Date(props.earliest_point).toLocaleDateString('en-US', { timeZone: timezone }) : 'N/A';
+ const endDate = props.latest_point ? new Date(props.latest_point).toLocaleDateString('en-US', { timeZone: timezone }) : 'N/A';
+ const startTime = props.earliest_point ? new Date(props.earliest_point).toLocaleTimeString('en-US', { timeZone: timezone }) : '';
+ const endTime = props.latest_point ? new Date(props.latest_point).toLocaleTimeString('en-US', { timeZone: timezone }) : '';
return `
diff --git a/app/javascript/maps_maplibre/layers/points_layer.js b/app/javascript/maps_maplibre/layers/points_layer.js
index 8a7f9d33..114dfc42 100644
--- a/app/javascript/maps_maplibre/layers/points_layer.js
+++ b/app/javascript/maps_maplibre/layers/points_layer.js
@@ -1,11 +1,25 @@
import { BaseLayer } from './base_layer'
+import { Toast } from 'maps_maplibre/components/toast'
/**
* Points layer for displaying individual location points
+ * Supports dragging points to update their positions
*/
export class PointsLayer extends BaseLayer {
constructor(map, options = {}) {
super(map, { id: 'points', ...options })
+ this.apiClient = options.apiClient
+ this.layerManager = options.layerManager
+ this.isDragging = false
+ this.draggedFeature = null
+ this.canvas = null
+
+ // Bind event handlers once and store references for proper cleanup
+ this._onMouseEnter = this.onMouseEnter.bind(this)
+ this._onMouseLeave = this.onMouseLeave.bind(this)
+ this._onMouseDown = this.onMouseDown.bind(this)
+ this._onMouseMove = this.onMouseMove.bind(this)
+ this._onMouseUp = this.onMouseUp.bind(this)
}
getSourceConfig() {
@@ -34,4 +48,218 @@ export class PointsLayer extends BaseLayer {
}
]
}
+
+ /**
+ * Enable dragging for points
+ */
+ enableDragging() {
+ if (this.draggingEnabled) return
+
+ this.draggingEnabled = true
+ this.canvas = this.map.getCanvasContainer()
+
+ // Change cursor to pointer when hovering over points
+ this.map.on('mouseenter', this.id, this._onMouseEnter)
+ this.map.on('mouseleave', this.id, this._onMouseLeave)
+
+ // Handle drag events
+ this.map.on('mousedown', this.id, this._onMouseDown)
+ }
+
+ /**
+ * Disable dragging for points
+ */
+ disableDragging() {
+ if (!this.draggingEnabled) return
+
+ this.draggingEnabled = false
+
+ this.map.off('mouseenter', this.id, this._onMouseEnter)
+ this.map.off('mouseleave', this.id, this._onMouseLeave)
+ this.map.off('mousedown', this.id, this._onMouseDown)
+ }
+
+ onMouseEnter() {
+ this.canvas.style.cursor = 'move'
+ }
+
+ onMouseLeave() {
+ if (!this.isDragging) {
+ this.canvas.style.cursor = ''
+ }
+ }
+
+ onMouseDown(e) {
+ // Prevent default map drag behavior
+ e.preventDefault()
+
+ // Store the feature being dragged
+ this.draggedFeature = e.features[0]
+ this.isDragging = true
+ this.canvas.style.cursor = 'grabbing'
+
+ // Bind mouse move and up events
+ this.map.on('mousemove', this._onMouseMove)
+ this.map.once('mouseup', this._onMouseUp)
+ }
+
+ onMouseMove(e) {
+ if (!this.isDragging || !this.draggedFeature) return
+
+ // Get the new coordinates
+ const coords = e.lngLat
+
+ // Update the feature's coordinates in the source
+ const source = this.map.getSource(this.sourceId)
+ if (source) {
+ const data = source._data
+ const feature = data.features.find(f => f.properties.id === this.draggedFeature.properties.id)
+ if (feature) {
+ feature.geometry.coordinates = [coords.lng, coords.lat]
+ source.setData(data)
+ }
+ }
+ }
+
+ async onMouseUp(e) {
+ if (!this.isDragging || !this.draggedFeature) return
+
+ const coords = e.lngLat
+ const pointId = this.draggedFeature.properties.id
+ const originalCoords = this.draggedFeature.geometry.coordinates
+
+ // Clean up drag state
+ this.isDragging = false
+ this.canvas.style.cursor = ''
+ this.map.off('mousemove', this._onMouseMove)
+
+ // Update the point on the backend
+ try {
+ await this.updatePointPosition(pointId, coords.lat, coords.lng)
+
+ // Update routes after successful point update
+ await this.updateConnectedRoutes(pointId, originalCoords, [coords.lng, coords.lat])
+ } catch (error) {
+ console.error('Failed to update point:', error)
+ // Revert the point position on error
+ const source = this.map.getSource(this.sourceId)
+ if (source) {
+ const data = source._data
+ const feature = data.features.find(f => f.properties.id === pointId)
+ if (feature && originalCoords) {
+ feature.geometry.coordinates = originalCoords
+ source.setData(data)
+ }
+ }
+ Toast.error('Failed to update point position. Please try again.')
+ }
+
+ this.draggedFeature = null
+ }
+
+ /**
+ * Update point position via API
+ */
+ async updatePointPosition(pointId, latitude, longitude) {
+ if (!this.apiClient) {
+ throw new Error('API client not configured')
+ }
+
+ const response = await fetch(`/api/v1/points/${pointId}`, {
+ method: 'PATCH',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Accept': 'application/json',
+ 'Authorization': `Bearer ${this.apiClient.apiKey}`
+ },
+ body: JSON.stringify({
+ point: {
+ latitude: latitude.toString(),
+ longitude: longitude.toString()
+ }
+ })
+ })
+
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`)
+ }
+
+ return response.json()
+ }
+
+ /**
+ * Update connected route segments when a point is moved
+ */
+ async updateConnectedRoutes(pointId, oldCoords, newCoords) {
+ if (!this.layerManager) {
+ console.warn('LayerManager not configured, cannot update routes')
+ return
+ }
+
+ const routesLayer = this.layerManager.getLayer('routes')
+ if (!routesLayer) {
+ console.warn('Routes layer not found')
+ return
+ }
+
+ const routesSource = this.map.getSource(routesLayer.sourceId)
+ if (!routesSource) {
+ console.warn('Routes source not found')
+ return
+ }
+
+ const routesData = routesSource._data
+ if (!routesData || !routesData.features) {
+ return
+ }
+
+ // Tolerance for coordinate comparison (account for floating point precision)
+ const tolerance = 0.0001
+ let routesUpdated = false
+
+ // Find and update route segments that contain the moved point
+ routesData.features.forEach(feature => {
+ if (feature.geometry.type === 'LineString') {
+ const coordinates = feature.geometry.coordinates
+
+ // Check each coordinate in the line
+ for (let i = 0; i < coordinates.length; i++) {
+ const coord = coordinates[i]
+
+ // Check if this coordinate matches the old position
+ if (Math.abs(coord[0] - oldCoords[0]) < tolerance &&
+ Math.abs(coord[1] - oldCoords[1]) < tolerance) {
+ // Update to new position
+ coordinates[i] = newCoords
+ routesUpdated = true
+ }
+ }
+ }
+ })
+
+ // Update the routes source if any routes were modified
+ if (routesUpdated) {
+ routesSource.setData(routesData)
+ }
+ }
+
+ /**
+ * Override add method to enable dragging when layer is added
+ */
+ add(data) {
+ super.add(data)
+
+ // Wait for next tick to ensure layers are fully added before enabling dragging
+ setTimeout(() => {
+ this.enableDragging()
+ }, 100)
+ }
+
+ /**
+ * Override remove method to clean up dragging handlers
+ */
+ remove() {
+ this.disableDragging()
+ super.remove()
+ }
}
diff --git a/app/javascript/maps_maplibre/layers/routes_layer.js b/app/javascript/maps_maplibre/layers/routes_layer.js
index 56009ed1..0539114e 100644
--- a/app/javascript/maps_maplibre/layers/routes_layer.js
+++ b/app/javascript/maps_maplibre/layers/routes_layer.js
@@ -31,7 +31,13 @@ export class RoutesLayer extends BaseLayer {
'line-cap': 'round'
},
paint: {
- 'line-color': '#f97316', // Solid orange color
+ // Use color from feature properties if available, otherwise default blue
+ 'line-color': [
+ 'case',
+ ['has', 'color'],
+ ['get', 'color'],
+ '#0000ff' // Default blue color (matching v1)
+ ],
'line-width': 3,
'line-opacity': 0.8
}
diff --git a/app/javascript/maps_maplibre/services/api_client.js b/app/javascript/maps_maplibre/services/api_client.js
index 661f5f0e..1ef9e871 100644
--- a/app/javascript/maps_maplibre/services/api_client.js
+++ b/app/javascript/maps_maplibre/services/api_client.js
@@ -18,7 +18,8 @@ export class ApiClient {
start_at,
end_at,
page: page.toString(),
- per_page: per_page.toString()
+ per_page: per_page.toString(),
+ slim: 'true'
})
const response = await fetch(`${this.baseURL}/points?${params}`, {
diff --git a/app/javascript/maps_maplibre/utils/geojson_transformers.js b/app/javascript/maps_maplibre/utils/geojson_transformers.js
index 9cfe30e6..72a1fd11 100644
--- a/app/javascript/maps_maplibre/utils/geojson_transformers.js
+++ b/app/javascript/maps_maplibre/utils/geojson_transformers.js
@@ -28,9 +28,10 @@ export function pointsToGeoJSON(points) {
/**
* Format timestamp for display
* @param {number|string} timestamp - Unix timestamp (seconds) or ISO 8601 string
+ * @param {string} timezone - IANA timezone string (e.g., 'Europe/Berlin')
* @returns {string} Formatted date/time
*/
-export function formatTimestamp(timestamp) {
+export function formatTimestamp(timestamp, timezone = 'UTC') {
// Handle different timestamp formats
let date
if (typeof timestamp === 'string') {
@@ -49,6 +50,7 @@ export function formatTimestamp(timestamp) {
month: 'short',
day: 'numeric',
hour: '2-digit',
- minute: '2-digit'
+ minute: '2-digit',
+ timeZone: timezone
})
}
diff --git a/app/javascript/maps_maplibre/utils/settings_manager.js b/app/javascript/maps_maplibre/utils/settings_manager.js
index 8e5cbf42..a5058e27 100644
--- a/app/javascript/maps_maplibre/utils/settings_manager.js
+++ b/app/javascript/maps_maplibre/utils/settings_manager.js
@@ -1,21 +1,20 @@
/**
* Settings manager for persisting user preferences
- * Supports both localStorage (fallback) and backend API (primary)
+ * Loads settings from backend API only (no localStorage)
*/
-const STORAGE_KEY = 'dawarich-maps-maplibre-settings'
-
const DEFAULT_SETTINGS = {
mapStyle: 'light',
enabledMapLayers: ['Points', 'Routes'], // Compatible with v1 map
- // Advanced settings
- routeOpacity: 1.0,
- fogOfWarRadius: 1000,
+ // Advanced settings (matching v1 naming)
+ routeOpacity: 0.6,
+ fogOfWarRadius: 100,
fogOfWarThreshold: 1,
- metersBetweenRoutes: 500,
+ metersBetweenRoutes: 1000,
minutesBetweenRoutes: 60,
pointsRenderingMode: 'raw',
- speedColoredRoutes: false
+ speedColoredRoutes: false,
+ speedColorScale: '0:#00ff00|15:#00ffff|30:#ff00ff|50:#ffff00|100:#ff3300'
}
// Mapping between v2 layer names and v1 layer names in enabled_map_layers array
@@ -34,7 +33,15 @@ const LAYER_NAME_MAP = {
// Mapping between frontend settings and backend API keys
const BACKEND_SETTINGS_MAP = {
mapStyle: 'maps_maplibre_style',
- enabledMapLayers: 'enabled_map_layers'
+ enabledMapLayers: 'enabled_map_layers',
+ routeOpacity: 'route_opacity',
+ fogOfWarRadius: 'fog_of_war_meters',
+ fogOfWarThreshold: 'fog_of_war_threshold',
+ metersBetweenRoutes: 'meters_between_routes',
+ minutesBetweenRoutes: 'minutes_between_routes',
+ pointsRenderingMode: 'points_rendering_mode',
+ speedColoredRoutes: 'speed_colored_routes',
+ speedColorScale: 'speed_color_scale'
}
export class SettingsManager {
@@ -51,9 +58,8 @@ export class SettingsManager {
}
/**
- * Get all settings (localStorage first, then merge with defaults)
+ * Get all settings from cache or defaults
* Converts enabled_map_layers array to individual boolean flags
- * Uses cached settings if available to avoid race conditions
* @returns {Object} Settings object
*/
static getSettings() {
@@ -62,21 +68,11 @@ export class SettingsManager {
return { ...this.cachedSettings }
}
- try {
- const stored = localStorage.getItem(STORAGE_KEY)
- const settings = stored ? { ...DEFAULT_SETTINGS, ...JSON.parse(stored) } : DEFAULT_SETTINGS
+ // Convert enabled_map_layers array to individual boolean flags
+ const expandedSettings = this._expandLayerSettings(DEFAULT_SETTINGS)
+ this.cachedSettings = expandedSettings
- // Convert enabled_map_layers array to individual boolean flags
- const expandedSettings = this._expandLayerSettings(settings)
-
- // Cache the settings
- this.cachedSettings = expandedSettings
-
- return { ...expandedSettings }
- } catch (error) {
- console.error('Failed to load settings:', error)
- return DEFAULT_SETTINGS
- }
+ return { ...expandedSettings }
}
/**
@@ -141,14 +137,31 @@ export class SettingsManager {
const frontendSettings = {}
Object.entries(BACKEND_SETTINGS_MAP).forEach(([frontendKey, backendKey]) => {
if (backendKey in backendSettings) {
- frontendSettings[frontendKey] = backendSettings[backendKey]
+ let value = backendSettings[backendKey]
+
+ // Convert backend values to correct types
+ if (frontendKey === 'routeOpacity') {
+ value = parseFloat(value) || DEFAULT_SETTINGS.routeOpacity
+ } else if (frontendKey === 'fogOfWarRadius') {
+ value = parseInt(value) || DEFAULT_SETTINGS.fogOfWarRadius
+ } else if (frontendKey === 'fogOfWarThreshold') {
+ value = parseInt(value) || DEFAULT_SETTINGS.fogOfWarThreshold
+ } else if (frontendKey === 'metersBetweenRoutes') {
+ value = parseInt(value) || DEFAULT_SETTINGS.metersBetweenRoutes
+ } else if (frontendKey === 'minutesBetweenRoutes') {
+ value = parseInt(value) || DEFAULT_SETTINGS.minutesBetweenRoutes
+ } else if (frontendKey === 'speedColoredRoutes') {
+ value = value === true || value === 'true'
+ }
+
+ frontendSettings[frontendKey] = value
}
})
- // Merge with defaults, but prioritize backend's enabled_map_layers completely
+ // Merge with defaults
const mergedSettings = { ...DEFAULT_SETTINGS, ...frontendSettings }
- // If backend has enabled_map_layers, use it as-is (don't merge with defaults)
+ // If backend has enabled_map_layers, use it as-is
if (backendSettings.enabled_map_layers) {
mergedSettings.enabledMapLayers = backendSettings.enabled_map_layers
}
@@ -156,8 +169,8 @@ export class SettingsManager {
// Convert enabled_map_layers array to individual boolean flags
const expandedSettings = this._expandLayerSettings(mergedSettings)
- // Save to localStorage and cache
- this.saveToLocalStorage(expandedSettings)
+ // Cache the settings
+ this.cachedSettings = expandedSettings
return expandedSettings
} catch (error) {
@@ -167,18 +180,11 @@ export class SettingsManager {
}
/**
- * Save all settings to localStorage and update cache
+ * Update cache with new settings
* @param {Object} settings - Settings object
*/
- static saveToLocalStorage(settings) {
- try {
- // Update cache first
- this.cachedSettings = { ...settings }
- // Then save to localStorage
- localStorage.setItem(STORAGE_KEY, JSON.stringify(settings))
- } catch (error) {
- console.error('Failed to save settings to localStorage:', error)
- }
+ static updateCache(settings) {
+ this.cachedSettings = { ...settings }
}
/**
@@ -203,7 +209,19 @@ export class SettingsManager {
// Use the collapsed array
backendSettings[backendKey] = enabledMapLayers
} else if (frontendKey in settings) {
- backendSettings[backendKey] = settings[frontendKey]
+ let value = settings[frontendKey]
+
+ // Convert frontend values to backend format
+ if (frontendKey === 'routeOpacity') {
+ value = parseFloat(value).toString()
+ } else if (frontendKey === 'fogOfWarRadius' || frontendKey === 'fogOfWarThreshold' ||
+ frontendKey === 'metersBetweenRoutes' || frontendKey === 'minutesBetweenRoutes') {
+ value = parseInt(value).toString()
+ } else if (frontendKey === 'speedColoredRoutes') {
+ value = Boolean(value)
+ }
+
+ backendSettings[backendKey] = value
}
})
@@ -220,7 +238,6 @@ export class SettingsManager {
throw new Error(`Failed to save settings: ${response.status}`)
}
- console.log('[Settings] Saved to backend successfully:', backendSettings)
return true
} catch (error) {
console.error('[Settings] Failed to save to backend:', error)
@@ -238,7 +255,7 @@ export class SettingsManager {
}
/**
- * Update a specific setting (saves to both localStorage and backend)
+ * Update a specific setting and save to backend
* @param {string} key - Setting key
* @param {*} value - New value
*/
@@ -253,28 +270,23 @@ export class SettingsManager {
settings.enabledMapLayers = this._collapseLayerSettings(settings)
}
- // Save to localStorage immediately
- this.saveToLocalStorage(settings)
+ // Update cache immediately
+ this.updateCache(settings)
- // Save to backend (non-blocking)
- this.saveToBackend(settings).catch(error => {
- console.warn('[Settings] Backend save failed, but localStorage updated:', error)
- })
+ // Save to backend
+ await this.saveToBackend(settings)
}
/**
* Reset to defaults
*/
- static resetToDefaults() {
+ static async resetToDefaults() {
try {
- localStorage.removeItem(STORAGE_KEY)
this.cachedSettings = null // Clear cache
- // Also reset on backend
+ // Reset on backend
if (this.apiKey) {
- this.saveToBackend(DEFAULT_SETTINGS).catch(error => {
- console.warn('[Settings] Failed to reset backend settings:', error)
- })
+ await this.saveToBackend(DEFAULT_SETTINGS)
}
} catch (error) {
console.error('Failed to reset settings:', error)
@@ -282,9 +294,9 @@ export class SettingsManager {
}
/**
- * Sync settings: load from backend and merge with localStorage
+ * Sync settings: load from backend
* Call this on app initialization
- * @returns {Promise
+ data-public-stat-map-self-hosted-value="<%= @self_hosted %>"
+ data-public-stat-map-timezone-value="<%= @user.timezone %>">
` : ''}
- ${properties.taken_at ? `