Skip to content

Commit

Permalink
Enable or disable speed colored polylines
Browse files Browse the repository at this point in the history
  • Loading branch information
@Freika
Freika committed Jan 13, 2025
1 parent 2e18b35 commit badeff3
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 62 deletions.
85 changes: 42 additions & 43 deletions app/javascript/controllers/maps_controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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);
Expand Down Expand Up @@ -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,
Expand All @@ -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);
}
}
}

Expand Down
43 changes: 24 additions & 19 deletions app/javascript/maps/polylines.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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];

Expand Down Expand Up @@ -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);
}
});

Expand All @@ -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);
}
});

Expand Down

0 comments on commit badeff3

Please sign in to comment.