From badeff3d0a4591425c8779524130c6e5a95a7207 Mon Sep 17 00:00:00 2001 From: Eugene Burmakin Date: Mon, 13 Jan 2025 20:34:57 +0100 Subject: [PATCH] Enable or disable speed colored polylines --- app/javascript/controllers/maps_controller.js | 85 +++++++++---------- app/javascript/maps/polylines.js | 43 +++++----- 2 files changed, 66 insertions(+), 62 deletions(-) diff --git a/app/javascript/controllers/maps_controller.js b/app/javascript/controllers/maps_controller.js index fc60bf75..f6b2c749 100644 --- a/app/javascript/controllers/maps_controller.js +++ b/app/javascript/controllers/maps_controller.js @@ -809,46 +809,28 @@ export default class extends Controller { try { // Check if speed_colored_polylines setting has changed if (newSettings.speed_colored_polylines !== this.userSettings.speed_colored_polylines) { - console.log('Speed colored polylines setting changed:', { - old: this.userSettings.speed_colored_polylines, - new: newSettings.speed_colored_polylines - }); - if (this.polylinesLayer) { - console.log('Starting polylines color update'); - - // Update colors without removing the layer - this.polylinesLayer.eachLayer(groupLayer => { - if (groupLayer instanceof L.LayerGroup || groupLayer instanceof L.FeatureGroup) { - groupLayer.eachLayer(segment => { - if (segment instanceof L.Polyline) { - const latLngs = segment.getLatLngs(); - const point1 = [latLngs[0].lat, latLngs[0].lng]; - const point2 = [latLngs[1].lat, latLngs[1].lng]; - - const speed = calculateSpeed( - [...point1, 0, segment.options.startTime], - [...point2, 0, segment.options.endTime] - ); - - const newColor = newSettings.speed_colored_polylines ? - getSpeedColor(speed, true) : - '#0000ff'; - - segment.setStyle({ - color: newColor, - originalColor: newColor - }); - } - }); - } - }); - - console.log('Finished polylines color update'); + // Remove existing polylines layer + this.map.removeLayer(this.polylinesLayer); + + // Create new polylines layer with updated settings + this.polylinesLayer = createPolylinesLayer( + this.markers, + this.map, + this.timezone, + this.routeOpacity, + { ...this.userSettings, speed_colored_polylines: newSettings.speed_colored_polylines }, + this.distanceUnit + ); + + // Add the layer back if it was visible + if (wasPolylinesVisible) { + this.polylinesLayer.addTo(this.map); + } } } - // Check if route opacity has changed + // Update opacity if changed if (newSettings.route_opacity !== this.userSettings.route_opacity) { const newOpacity = parseFloat(newSettings.route_opacity) || 0.6; if (this.polylinesLayer) { @@ -861,8 +843,18 @@ export default class extends Controller { this.routeOpacity = parseFloat(newSettings.route_opacity) || 0.6; this.clearFogRadius = parseInt(newSettings.fog_of_war_meters) || 50; - // Reapply layer states - this.applyLayerControlStates(currentLayerStates); + // Update layer control + this.map.removeControl(this.layerControl); + const controlsLayer = { + Points: this.markersLayer, + Polylines: this.polylinesLayer, + Heatmap: this.heatmapLayer, + "Fog of War": this.fogOverlay, + "Scratch map": this.scratchLayer, + Areas: this.areasLayer, + Photos: this.photoMarkers + }; + this.layerControl = L.control.layers(this.baseMaps(), controlsLayer).addTo(this.map); } catch (error) { console.error('Error updating map settings:', error); @@ -913,6 +905,8 @@ export default class extends Controller { } applyLayerControlStates(states) { + console.log('Applying layer states:', states); + const layerControl = { Points: this.markersLayer, Polylines: this.polylinesLayer, @@ -923,11 +917,16 @@ export default class extends Controller { for (const [name, isVisible] of Object.entries(states)) { const layer = layerControl[name]; - - if (isVisible && !this.map.hasLayer(layer)) { - this.map.addLayer(layer); - } else if (this.map.hasLayer(layer)) { - this.map.removeLayer(layer); + console.log(`Processing layer ${name}:`, { layer, isVisible }); + + if (layer) { + if (isVisible && !this.map.hasLayer(layer)) { + console.log(`Adding layer ${name} to map`); + this.map.addLayer(layer); + } else if (!isVisible && this.map.hasLayer(layer)) { + console.log(`Removing layer ${name} from map`); + this.map.removeLayer(layer); + } } } diff --git a/app/javascript/maps/polylines.js b/app/javascript/maps/polylines.js index eb9ca95f..c13226d1 100644 --- a/app/javascript/maps/polylines.js +++ b/app/javascript/maps/polylines.js @@ -125,17 +125,6 @@ function processInBatches(items, batchSize, processFn) { } export function addHighlightOnHover(polylineGroup, map, polylineCoordinates, userSettings, distanceUnit) { - const highlightStyle = { - opacity: 1, - weight: 5, - color: userSettings.speed_colored_polylines ? null : '#ffff00' // Yellow highlight if not using speed colors - }; - const normalStyle = { - opacity: userSettings.routeOpacity, - weight: 3, - color: userSettings.speed_colored_polylines ? null : '#0000ff' // Blue normal if not using speed colors - }; - const startPoint = polylineCoordinates[0]; const endPoint = polylineCoordinates[polylineCoordinates.length - 1]; @@ -189,12 +178,20 @@ export function addHighlightOnHover(polylineGroup, map, polylineCoordinates, use } }); + // Apply highlight style to all segments polylineGroup.eachLayer((layer) => { if (layer instanceof L.Polyline) { - layer.setStyle({ - ...highlightStyle, - color: userSettings.speed_colored_polylines ? layer.options.originalColor : highlightStyle.color - }); + const highlightStyle = { + weight: 5, + opacity: 1 + }; + + // Change color to yellow only for non-speed-colored (blue) polylines + if (!userSettings.speed_colored_polylines) { + highlightStyle.color = '#ffff00'; // Yellow + } + + layer.setStyle(highlightStyle); } }); @@ -220,12 +217,20 @@ export function addHighlightOnHover(polylineGroup, map, polylineCoordinates, use }); polylineGroup.on("mouseout", function () { + // Restore original style polylineGroup.eachLayer((layer) => { if (layer instanceof L.Polyline) { - layer.setStyle({ - ...normalStyle, - color: userSettings.speed_colored_polylines ? layer.options.originalColor : normalStyle.color - }); + const originalStyle = { + weight: 3, + opacity: userSettings.route_opacity + }; + + // Restore original blue color for non-speed-colored polylines + if (!userSettings.speed_colored_polylines) { + originalStyle.color = '#0000ff'; + } + + layer.setStyle(originalStyle); } });