Merge pull request #490 from whimsical-c4lic0/fix/incorrect-distance-units-on-map-popup

Update map popup to use configured distance unit
This commit is contained in:
Evgenii Burmakin 2024-12-10 20:09:42 +01:00 committed by GitHub
commit 60c8a03ce0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 8 additions and 7 deletions

View file

@ -62,7 +62,7 @@ export default class extends Controller {
this.markersLayer = L.layerGroup(this.markersArray);
this.heatmapMarkers = this.markersArray.map((element) => [element._latlng.lat, element._latlng.lng, 0.2]);
this.polylinesLayer = createPolylinesLayer(this.markers, this.map, this.timezone, this.routeOpacity, this.userSettings);
this.polylinesLayer = createPolylinesLayer(this.markers, this.map, this.timezone, this.routeOpacity, this.userSettings, this.distanceUnit);
this.heatmapLayer = L.heatLayer(this.heatmapMarkers, { radius: 20 }).addTo(this.map);
this.fogOverlay = L.layerGroup(); // Initialize fog layer
this.areasLayer = L.layerGroup(); // Initialize areas layer
@ -215,7 +215,8 @@ export default class extends Controller {
this.map,
this.timezone,
this.routeOpacity,
this.userSettings
this.userSettings,
this.distanceUnit
);
// Pan map to new location
@ -687,7 +688,7 @@ export default class extends Controller {
// Recreate layers only if they don't exist
this.markersLayer = preserveLayers.Points || L.layerGroup(createMarkersArray(this.markers, newSettings));
this.polylinesLayer = preserveLayers.Polylines || createPolylinesLayer(this.markers, this.map, this.timezone, this.routeOpacity, this.userSettings);
this.polylinesLayer = preserveLayers.Polylines || createPolylinesLayer(this.markers, this.map, this.timezone, this.routeOpacity, this.userSettings, this.distanceUnit);
this.heatmapLayer = preserveLayers.Heatmap || L.heatLayer(this.markers.map((element) => [element[0], element[1], 0.2]), { radius: 20 });
this.fogOverlay = preserveLayers["Fog of War"] || L.layerGroup();
this.areasLayer = preserveLayers.Areas || L.layerGroup();

View file

@ -3,7 +3,7 @@ import { getUrlParameter } from "../maps/helpers";
import { minutesToDaysHoursMinutes } from "../maps/helpers";
import { haversineDistance } from "../maps/helpers";
export function addHighlightOnHover(polyline, map, polylineCoordinates, userSettings) {
export function addHighlightOnHover(polyline, map, polylineCoordinates, userSettings, distanceUnit) {
const originalStyle = { color: "blue", opacity: userSettings.routeOpacity, weight: 3 };
const highlightStyle = { color: "yellow", opacity: 1, weight: 5 };
@ -33,7 +33,7 @@ export function addHighlightOnHover(polyline, map, polylineCoordinates, userSett
<strong>Start:</strong> ${firstTimestamp}<br>
<strong>End:</strong> ${lastTimestamp}<br>
<strong>Duration:</strong> ${timeOnRoute}<br>
<strong>Total Distance:</strong> ${formatDistance(totalDistance, userSettings.distanceUnit)}<br>
<strong>Total Distance:</strong> ${formatDistance(totalDistance, distanceUnit)}<br>
`;
if (isDebugMode) {
@ -90,7 +90,7 @@ export function addHighlightOnHover(polyline, map, polylineCoordinates, userSett
});
}
export function createPolylinesLayer(markers, map, userSettings) {
export function createPolylinesLayer(markers, map, timezone, routeOpacity, userSettings, distanceUnit) {
const splitPolylines = [];
let currentPolyline = [];
const distanceThresholdMeters = parseInt(userSettings.meters_between_routes) || 500;
@ -123,7 +123,7 @@ export function createPolylinesLayer(markers, map, userSettings) {
const latLngs = polylineCoordinates.map((point) => [point[0], point[1]]);
const polyline = L.polyline(latLngs, { color: "blue", opacity: 0.6, weight: 3 });
addHighlightOnHover(polyline, map, polylineCoordinates, userSettings);
addHighlightOnHover(polyline, map, polylineCoordinates, userSettings, distanceUnit);
return polyline;
})