kevinsivic/dawarich
1
0
Fork 0
mirror of https://github.com/Freika/dawarich.git synced 2026-01-11 09:41:40 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update map popup to use configured distance unit

Browse source
This commit is contained in:
whimsical-c4lic0 2024-12-05 16:14:56 -06:00
parent 81bb8626ee
commit 32224628e7
2 changed files with 8 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/javascript/controllers/maps_controller.js
View file

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

8
app/javascript/maps/polylines.js
View file

@ -3,7 +3,7 @@ import { getUrlParameter } from "../maps/helpers";
import { minutesToDaysHoursMinutes } from "../maps/helpers"; import { minutesToDaysHoursMinutes } from "../maps/helpers";
import { haversineDistance } 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 originalStyle = { color: "blue", opacity: userSettings.routeOpacity, weight: 3 };
const highlightStyle = { color: "yellow", opacity: 1, weight: 5 }; 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>Start:</strong> ${firstTimestamp}<br>
<strong>End:</strong> ${lastTimestamp}<br> <strong>End:</strong> ${lastTimestamp}<br>
<strong>Duration:</strong> ${timeOnRoute}<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) { 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 = []; const splitPolylines = [];
let currentPolyline = []; let currentPolyline = [];
const distanceThresholdMeters = parseInt(userSettings.meters_between_routes) || 500; 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 latLngs = polylineCoordinates.map((point) => [point[0], point[1]]);
const polyline = L.polyline(latLngs, { color: "blue", opacity: 0.6, weight: 3 }); 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; return polyline;
}) })