mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-11-13 15:51:00 +00:00
Maurice
51af575c9a
A right-click, click or drag on a repeated world copy reported the longitude it has on that copy (274.9 for -85.1). The place was saved there, the geocoder found nothing, and a route to a place on the real world ran across the whole map (#2976). Longitudes are now brought back onto [-180, 180] where the map hands them out (Leaflet and GL), where they are stored (places, booking endpoints, collection places, so REST, MCP, plugin RPC and importers alike) and before reverse geocoding. A migration moves the ones already stored. Leaflet draws a layer at its literal longitude only, so a trip from Los Angeles to Auckland had its pins at opposite ends of the world while the flight ran off the edge to the next copy (#2975). A trip that crosses the antimeridian is now drawn in one longitude frame, seamed in the widest stretch it leaves empty, so pins, routes, flights and every overlay lie on one copy and the map opens across the Pacific. Every other trip has no frame and draws exactly as before. The GL day fit also takes the short way. A new install now starts with Journey and Collections switched on, next to the trip addons (all but Road trip), Atlas, Vacay and the Naver import that already were. Existing installs keep their addons as they are. Closes #2975 Closes #2976
67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
import L from 'leaflet';
|
|
import { useEffect, useLayoutEffect, useRef } from 'react';
|
|
import { useMap } from 'react-leaflet';
|
|
import { frameLng } from '../../utils/lngFrame';
|
|
import { GHOST_SIZE, mountGhosts, setGhostHot, type GhostHandlers } from './assistantGhostMarker';
|
|
import { useLngFrame } from './lngFrameContext';
|
|
import type { AssistantGhost } from './mapViewContract';
|
|
|
|
interface AssistantGhostLayerProps {
|
|
ghosts: readonly AssistantGhost[] | undefined;
|
|
hoveredId: string | null | undefined;
|
|
onHover?: (id: string | null) => void;
|
|
onClick?: (id: string) => void;
|
|
}
|
|
|
|
/** Above the place pins, so a suggestion on a busy day is never buried under the stops it joins. */
|
|
const GHOST_Z_OFFSET = 900;
|
|
|
|
/**
|
|
* The assistant's suggestions on the Leaflet map, outside the cluster group:
|
|
* a suggestion stands on its own until it is decided. The name shows in the
|
|
* map's own tooltip, built from text. A hover only toggles a class on the
|
|
* element; the pins are rebuilt when the suggestions change, never on hover.
|
|
*/
|
|
export function AssistantGhostLayer({ ghosts, hoveredId, onHover, onClick }: AssistantGhostLayerProps) {
|
|
const map = useMap();
|
|
// Pinned where the map draws the trip, in its longitude frame (#2975).
|
|
const frame = useLngFrame();
|
|
const handlers = useRef<GhostHandlers>({ onHover, onClick });
|
|
useLayoutEffect(() => {
|
|
handlers.current = { onHover, onClick };
|
|
}, [onHover, onClick]);
|
|
const elements = useRef<ReadonlyMap<string, HTMLElement>>(new Map());
|
|
|
|
useEffect(() => {
|
|
if (!ghosts?.length) return;
|
|
const mounted = mountGhosts(
|
|
ghosts,
|
|
(el, ghost) => {
|
|
const icon = L.divIcon({ html: el, className: 'trek-ghost-pin', iconSize: [GHOST_SIZE, GHOST_SIZE] });
|
|
const label = document.createElement('span');
|
|
label.textContent = ghost.name;
|
|
const marker = L.marker([ghost.lat, frameLng(frame, ghost.lng)], {
|
|
icon,
|
|
keyboard: false,
|
|
zIndexOffset: GHOST_Z_OFFSET,
|
|
})
|
|
.bindTooltip(label, { direction: 'top', offset: [0, -GHOST_SIZE / 2], className: 'map-tooltip' })
|
|
.addTo(map);
|
|
return { remove: () => marker.remove() };
|
|
},
|
|
handlers
|
|
);
|
|
elements.current = mounted.elements;
|
|
return () => {
|
|
mounted.dispose();
|
|
elements.current = new Map();
|
|
};
|
|
}, [ghosts, map, frame]);
|
|
|
|
useEffect(() => {
|
|
setGhostHot(elements.current, hoveredId);
|
|
}, [ghosts, hoveredId]);
|
|
|
|
return null;
|
|
}
|