rouggy
d01c288454
The grid-square map drew the world two or three times across a wide window, each copy carrying the same squares — worldCopyJump earns its keep on the great-circle map, where a path reads better crossing a second Asia, and costs only confusion on a map of where you have been heard. It is off here, the tiles no longer wrap, and addBasemap takes the option so the other map is untouched. Zooming out far enough to hold Greenland and Antarctica together was impossible: the floor was zoom 1, and one step further out was already too far. Zoom 0 is the whole planet, and the view now opens on a fitWorld computed from the container rather than a guessed zoom level — repeated once when the container first has a real size, because the tab is mounted hidden. That exposed the next thing: Esri answers a request outside the world with a grey "Map data not yet available" tile, and zoomed out that was most of the screen. The tile layers carry a bounds, so those tiles are never asked for, and what is left beside the planet is the panel's own background instead of a white slab. Finally the mode filter offers All, Phone and CW beside Digital and FTx. The backend already accepted all of them — GridSquares understands "ALL" and the ModeClass names — only the interface was offering two.
488 lines
24 KiB
TypeScript
488 lines
24 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
||
import L from 'leaflet';
|
||
import 'leaflet/dist/leaflet.css';
|
||
import { nightPolygon } from '../lib/greyline';
|
||
import { gridToLatLon, gridSquareBounds, greatCirclePoints, pathBetween, destinationPoint } from '@/lib/maidenhead';
|
||
import { writeUiPref } from '@/lib/uiPref';
|
||
|
||
// Persisted free-pan view of the world map (when auto-zoom is off).
|
||
function loadMapView(): { lat: number; lon: number; zoom: number } | null {
|
||
try { const v = JSON.parse(localStorage.getItem('opslog.mapView') || 'null'); return v && typeof v.zoom === 'number' ? v : null; }
|
||
catch { return null; }
|
||
}
|
||
function saveMapView(m: L.Map) {
|
||
const c = m.getCenter();
|
||
writeUiPref('opslog.mapView', JSON.stringify({ lat: c.lat, lon: c.lng, zoom: m.getZoom() }));
|
||
}
|
||
|
||
// The Main tab is built from two independent map panes that the operator can
|
||
// place on either side (Settings → Main view):
|
||
// • WorldMap ("map1"): a world map with the great-circle path from the
|
||
// operator to the contacted station, distance, short/long-path azimuth and
|
||
// the antenna beam lobe.
|
||
// • LocatorMap ("map2"): a street map zoomed onto the contacted station's grid.
|
||
// Built on Leaflet + free OSM/Carto tiles (no API key). Endpoints use
|
||
// circleMarkers / divIcons so we don't depend on Leaflet's image assets.
|
||
|
||
// unwrapLon makes a lat/lon ring continuous in longitude (each point within
|
||
// 180° of the previous) so a polygon crossing the antimeridian doesn't snap
|
||
// across the whole map. Coords may exceed ±180; Leaflet (worldCopyJump) is fine.
|
||
function unwrapLon(ring: [number, number][]): [number, number][] {
|
||
const out: [number, number][] = [];
|
||
let prev = NaN;
|
||
for (const [la, lo] of ring) {
|
||
let lon = lo;
|
||
if (!Number.isNaN(prev)) {
|
||
while (lon - prev > 180) lon -= 360;
|
||
while (lon - prev < -180) lon += 360;
|
||
}
|
||
prev = lon;
|
||
out.push([la, lon]);
|
||
}
|
||
return out;
|
||
}
|
||
|
||
const CARTO_LIGHT = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png';
|
||
const CARTO_ATTR = '© OpenStreetMap © CARTO';
|
||
|
||
// NOT tile.openstreetmap.org. Those are OpenStreetMap's VOLUNTEER-run servers,
|
||
// and their usage policy does not cover a desktop application handed to an
|
||
// unbounded number of operators — they blocked OpsLog for it, and every user's
|
||
// map filled with "Access blocked / 403" tiles at once.
|
||
//
|
||
// The replacements are tile services whose terms do cover redistributed apps,
|
||
// with no API key: Carto (whose tiles are OSM-derived, hence the attribution
|
||
// still credits OpenStreetMap) and Esri. Anything added here later must be
|
||
// checked the same way — a free tile URL is not the same thing as a tile URL we
|
||
// are allowed to ship.
|
||
const ESRI_STREET = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}';
|
||
const ESRI_STREET_ATTR = 'Tiles © Esri — Source: Esri, HERE, Garmin, © OpenStreetMap contributors';
|
||
|
||
// Selectable basemaps for the world (great-circle) map. All key-free and all
|
||
// LABELLED (country/continent names). `labelsUrl` adds a transparent place-name
|
||
// overlay on top of an imagery basemap (so satellite keeps its names too).
|
||
export type BasemapKey = 'light' | 'voyager' | 'street' | 'satellite';
|
||
export const BASEMAPS: Record<BasemapKey, { label: string; url: string; attr: string; subdomains?: string; labelsUrl?: string }> = {
|
||
light: { label: 'Light', url: CARTO_LIGHT, attr: CARTO_ATTR, subdomains: 'abcd' },
|
||
voyager: { label: 'Voyager', url: 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png',
|
||
attr: CARTO_ATTR, subdomains: 'abcd' },
|
||
street: { label: 'Street', url: ESRI_STREET, attr: ESRI_STREET_ATTR },
|
||
satellite: { label: 'Satellite', url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
|
||
attr: 'Tiles © Esri — Source: Esri, Maxar, Earthstar Geographics',
|
||
labelsUrl: 'https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}' },
|
||
};
|
||
export function loadBasemap(): BasemapKey {
|
||
const v = localStorage.getItem('opslog.mapBasemap');
|
||
return v === 'voyager' || v === 'street' || v === 'satellite' ? v : 'light';
|
||
}
|
||
|
||
// addBasemap (re)installs the imagery layer and, for satellite, its transparent
|
||
// place-name overlay. updateWhenIdle/keepBuffer keep the number of live tiles
|
||
// down: satellite loads TWO tile layers, so its tile count — and the composited
|
||
// layers WebView2 has to hold — is double every other basemap's.
|
||
export function addBasemap(
|
||
m: L.Map,
|
||
key: BasemapKey,
|
||
base: React.MutableRefObject<L.TileLayer | null>,
|
||
labels: React.MutableRefObject<L.TileLayer | null>,
|
||
// noWrap draws the world ONCE instead of repeating it east and west.
|
||
//
|
||
// The great-circle map wants the repeats: a path from France to Japan reads
|
||
// better crossing a second copy of Asia than wrapping round the back. A map of
|
||
// where you have been heard does not — three North Americas is three times the
|
||
// same answer, and it makes the picture harder to read, not wider.
|
||
// bounds stops Leaflet asking for tiles outside the world at all: Esri answers
|
||
// those with a grey "Map data not yet available" image, and zoomed out on a
|
||
// wide window that is most of the screen.
|
||
opts?: { noWrap?: boolean; bounds?: L.LatLngBoundsExpression },
|
||
) {
|
||
if (base.current) { m.removeLayer(base.current); base.current = null; }
|
||
if (labels.current) { m.removeLayer(labels.current); labels.current = null; }
|
||
const bm = BASEMAPS[key];
|
||
const tileOpts: L.TileLayerOptions = {
|
||
maxZoom: 19, updateWhenIdle: true, updateWhenZooming: false, keepBuffer: 1,
|
||
noWrap: !!opts?.noWrap,
|
||
...(opts?.bounds ? { bounds: opts.bounds } : {}),
|
||
};
|
||
base.current = L.tileLayer(bm.url, { ...tileOpts, attribution: bm.attr, subdomains: bm.subdomains ?? 'abc' }).addTo(m);
|
||
if (bm.labelsUrl) labels.current = L.tileLayer(bm.labelsUrl, tileOpts).addTo(m);
|
||
}
|
||
|
||
function dot(color: string): L.DivIcon {
|
||
return L.divIcon({
|
||
className: '',
|
||
html: `<span style="display:block;width:12px;height:12px;border-radius:50%;background:${color};border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.4)"></span>`,
|
||
iconSize: [12, 12],
|
||
iconAnchor: [6, 6],
|
||
});
|
||
}
|
||
|
||
interface WorldProps {
|
||
fromGrid: string; // operator grid (active profile)
|
||
toGrid: string; // contacted-station grid
|
||
fromLabel?: string; // operator callsign
|
||
toLabel?: string; // DX callsign
|
||
beamAzimuths?: number[]; // radiating heading(s) (deg) → draw a beam lobe each
|
||
beamWidth?: number; // beamwidth (deg), default 30
|
||
boomAzimuth?: number | null; // mechanical boom (rotor) heading → grey reference line
|
||
zoomSignal?: number; // bump to force an auto-zoom now (e.g. QRZ lookup finished)
|
||
}
|
||
|
||
// WorldMap — great-circle path + beam lobe(s), the "map1" pane.
|
||
export function WorldMap({ fromGrid, toGrid, fromLabel, toLabel, beamAzimuths, beamWidth, boomAzimuth, zoomSignal }: WorldProps) {
|
||
const worldRef = useRef<HTMLDivElement>(null);
|
||
const worldMap = useRef<L.Map | null>(null);
|
||
const worldOverlay = useRef<L.LayerGroup | null>(null);
|
||
const baseLayer = useRef<L.TileLayer | null>(null);
|
||
const labelsLayer = useRef<L.TileLayer | null>(null);
|
||
const [basemap, setBasemap] = useState<BasemapKey>(loadBasemap);
|
||
|
||
// Auto-zoom the world map to fit QTH→DX on each QSO. When off, the operator
|
||
// pans/zooms freely (e.g. a whole-world view) and the view is remembered
|
||
// across restarts. Default on.
|
||
const [autoZoom, setAutoZoom] = useState(() => localStorage.getItem('opslog.mapAutoZoomDX') !== '0');
|
||
|
||
// Grey line — the day/night terminator with its twilight band. Off by
|
||
// default: it is a working tool for the operator who wants it, not decoration
|
||
// for the one who does not.
|
||
const [greyline, setGreyline] = useState(() => localStorage.getItem('opslog.mapGreyline') === '1');
|
||
const greylineLayer = useRef<L.LayerGroup | null>(null);
|
||
const autoZoomRef = useRef(autoZoom);
|
||
useEffect(() => { autoZoomRef.current = autoZoom; }, [autoZoom]);
|
||
|
||
// One-time map creation.
|
||
useEffect(() => {
|
||
if (worldRef.current && !worldMap.current) {
|
||
// preferCanvas: the beam lobe is a dense FAN of translucent radials — up to
|
||
// ~120 thick strokes with a bidirectional Ultrabeam. As SVG that is ~120
|
||
// composited paths re-rasterised on every pan, zoom and redraw, which is
|
||
// enough to blow WebView2's raster budget and leave the window painting in
|
||
// patches. On canvas it is a single layer.
|
||
const m = L.map(worldRef.current, { zoomControl: true, attributionControl: true, worldCopyJump: true, preferCanvas: true })
|
||
.setView([20, 0], 1);
|
||
addBasemap(m, basemap, baseLayer, labelsLayer);
|
||
worldOverlay.current = L.layerGroup().addTo(m);
|
||
worldMap.current = m;
|
||
const sv = loadMapView();
|
||
if (!autoZoomRef.current && sv) m.setView([sv.lat, sv.lon], sv.zoom);
|
||
m.on('moveend', () => { if (!autoZoomRef.current) saveMapView(m); });
|
||
}
|
||
const t = window.setTimeout(() => { worldMap.current?.invalidateSize(); }, 80);
|
||
// Resizing the pane is the ONLY thing that needs invalidateSize. Calling it on
|
||
// every overlay redraw (as before) forced a full repaint of the map each time
|
||
// the rotor moved a degree.
|
||
const ro = new ResizeObserver(() => worldMap.current?.invalidateSize());
|
||
if (worldRef.current) ro.observe(worldRef.current);
|
||
return () => { window.clearTimeout(t); ro.disconnect(); };
|
||
}, []);
|
||
|
||
// Swap the basemap (and its optional place-name overlay) when the operator
|
||
// picks a different one. Vector overlays (path/beam) live in Leaflet's
|
||
// overlayPane, always above any tile layer, so nothing to re-stack there.
|
||
useEffect(() => {
|
||
const m = worldMap.current;
|
||
if (m) addBasemap(m, basemap, baseLayer, labelsLayer);
|
||
}, [basemap]);
|
||
|
||
// Draw the grey line, and keep it moving.
|
||
//
|
||
// Redrawn every minute: the terminator travels a quarter of a degree in that
|
||
// time, which is invisible, but a map left on all day would otherwise be
|
||
// silently wrong by evening — and the whole point of the display is knowing
|
||
// where the line is NOW.
|
||
//
|
||
// It lives in its own pane below the overlay pane so the path and beam are
|
||
// never hidden behind the shading, and is non-interactive so it can never
|
||
// swallow a click meant for the map.
|
||
useEffect(() => {
|
||
const m = worldMap.current;
|
||
if (!m) return;
|
||
|
||
if (!greyline) {
|
||
greylineLayer.current?.remove();
|
||
greylineLayer.current = null;
|
||
return;
|
||
}
|
||
|
||
if (!m.getPane('greyline')) {
|
||
const pane = m.createPane('greyline');
|
||
pane.style.zIndex = '350'; // above tiles (200), below overlays (400)
|
||
pane.style.pointerEvents = 'none';
|
||
}
|
||
|
||
const draw = () => {
|
||
const now = new Date();
|
||
greylineLayer.current?.remove();
|
||
const g = L.layerGroup([], { pane: 'greyline' });
|
||
|
||
// The rings span −180…+180 once, but this map repeats the world sideways
|
||
// (worldCopyJump, and zoomed out several copies are on screen at once). A
|
||
// single ring therefore ends in a hard vertical edge wherever a copy
|
||
// begins — the shading looked like a rectangle laid over the planet.
|
||
//
|
||
// So each ring is drawn again shifted a full turn either way. Three copies
|
||
// cover every zoom level this map reaches; they cost nothing, being three
|
||
// polygons on a canvas layer.
|
||
const COPIES = [-360, 0, 360];
|
||
const shifted = (ring: [number, number][], by: number): [number, number][] =>
|
||
by === 0 ? ring : ring.map(([lat, lon]) => [lat, lon + by] as [number, number]);
|
||
|
||
// Two bands, drawn dark-to-light so they read as one gradient into night:
|
||
// full darkness (Sun below the horizon) and civil twilight (down to −6°),
|
||
// which is the band operators actually mean by "grey line".
|
||
const nightRing = nightPolygon(now, 0);
|
||
const twilightRing = nightPolygon(now, -6);
|
||
// The terminator itself, so the line is readable at a glance rather than
|
||
// being inferred from where the shading fades. Dropping the last two
|
||
// points leaves the terminator alone, without the segment that closes the
|
||
// polygon along the dark pole.
|
||
const lineRing = nightRing.slice(0, -2);
|
||
|
||
for (const by of COPIES) {
|
||
L.polygon(shifted(twilightRing, by), {
|
||
pane: 'greyline', stroke: false, fillColor: '#0b1220', fillOpacity: 0.22, interactive: false,
|
||
}).addTo(g);
|
||
L.polygon(shifted(nightRing, by), {
|
||
pane: 'greyline', stroke: false, fillColor: '#0b1220', fillOpacity: 0.32, interactive: false,
|
||
}).addTo(g);
|
||
L.polyline(shifted(lineRing, by), {
|
||
pane: 'greyline', color: '#f59e0b', weight: 1, opacity: 0.75, interactive: false,
|
||
}).addTo(g);
|
||
}
|
||
g.addTo(m);
|
||
greylineLayer.current = g;
|
||
};
|
||
|
||
draw();
|
||
const id = window.setInterval(draw, 60_000);
|
||
return () => { window.clearInterval(id); };
|
||
}, [greyline]);
|
||
|
||
// Redraw overlays whenever the operator/DX grids (or beam) change.
|
||
useEffect(() => {
|
||
const wm = worldMap.current, wo = worldOverlay.current;
|
||
if (!wm || !wo) return;
|
||
wo.clearLayers();
|
||
|
||
const from = gridToLatLon(fromGrid);
|
||
const to = gridToLatLon(toGrid);
|
||
|
||
// Station marker + antenna beam/boom are drawn whenever the station grid is
|
||
// known — independent of any DX. The antenna is always pointed somewhere, so
|
||
// the beam heading should show even before a callsign is entered.
|
||
if (from) {
|
||
L.marker([from.lat, from.lon], { icon: dot('#2563eb'), title: fromLabel || 'QTH' })
|
||
.bindTooltip(`${fromLabel ? fromLabel + ' · ' : ''}${fromGrid.toUpperCase()}`, { permanent: false, direction: 'top' })
|
||
.addTo(wo);
|
||
|
||
// ── Antenna beam lobe(s) (drawn first, under the arc/markers) ──
|
||
if (beamAzimuths && beamAzimuths.length) {
|
||
const half = (beamWidth ?? 30) / 2;
|
||
const D = 5500; // lobe length (km)
|
||
// Great-circle radial out to distance D, stopping just short of the pole
|
||
// so a poleward line doesn't snap across the top of the Mercator map.
|
||
const radial = (b: number): [number, number][] => {
|
||
const out: [number, number][] = [];
|
||
const N = 64;
|
||
for (let i = 1; i <= N; i++) {
|
||
const d = destinationPoint(from.lat, from.lon, b, (D * i) / N);
|
||
out.push([d.lat, d.lon]);
|
||
if (Math.abs(d.lat) > 86) break; // near a pole — stop before the snap
|
||
}
|
||
return out;
|
||
};
|
||
for (const az of beamAzimuths) {
|
||
// Draw the lobe as a DENSE fan of translucent great-circle radials, not
|
||
// a filled polygon: a polygon smears badly near the poles on Mercator
|
||
// (a poleward beam degenerates into a giant triangle), while each radial
|
||
// LINE stays clean at any azimuth. A small angular step makes the lines
|
||
// overlap into a solid-looking lobe (no separate strokes), darker near
|
||
// the antenna and fanning out toward the front.
|
||
for (let b = az - half; b <= az + half + 0.001; b += 0.5) {
|
||
const line = unwrapLon([[from.lat, from.lon], ...radial(b)]);
|
||
L.polyline(line as L.LatLngExpression[], { color: '#ff2d2d', weight: 6, opacity: 0.10, smoothFactor: 0 }).addTo(wo);
|
||
}
|
||
|
||
const cl = unwrapLon([[from.lat, from.lon], ...radial(az)]);
|
||
// Dark casing under the boresight so the bright dashed line stays
|
||
// readable on any basemap. Same dashArray so the casing tracks each dash.
|
||
L.polyline(cl as L.LatLngExpression[], { color: '#000', weight: 4, opacity: 0.4, dashArray: '5 4', smoothFactor: 0 }).addTo(wo);
|
||
L.polyline(cl as L.LatLngExpression[], { color: '#ff2d2d', weight: 2, opacity: 0.95, dashArray: '5 4', smoothFactor: 0 })
|
||
.bindTooltip(`Beam ${Math.round(az)}°`, { permanent: false, direction: 'top' }).addTo(wo);
|
||
}
|
||
}
|
||
|
||
// Mechanical boom (rotor) direction — thin grey dashed line. Drawn when the
|
||
// Ultrabeam radiates elsewhere (reverse/bi) so the boom heading stays visible
|
||
// next to the red radiating lobe(s).
|
||
if (boomAzimuth != null) {
|
||
const bpts: [number, number][] = [[from.lat, from.lon]];
|
||
const N = 64, D = 5500;
|
||
for (let i = 1; i <= N; i++) {
|
||
const d = destinationPoint(from.lat, from.lon, boomAzimuth, (D * i) / N);
|
||
bpts.push([d.lat, d.lon]);
|
||
if (Math.abs(d.lat) > 86) break;
|
||
}
|
||
L.polyline(unwrapLon(bpts) as L.LatLngExpression[], { color: '#64748b', weight: 1.5, opacity: 0.85, dashArray: '3 4', smoothFactor: 0 })
|
||
.bindTooltip(`Boom ${Math.round(boomAzimuth)}°`, { permanent: false, direction: 'top' }).addTo(wo);
|
||
}
|
||
}
|
||
|
||
// DX marker + great-circle arc — only when a DX grid is known (callsign entered).
|
||
let arcPts: [number, number][] | null = null;
|
||
if (from && to) {
|
||
L.marker([to.lat, to.lon], { icon: dot('#dc2626'), title: toLabel || 'DX' })
|
||
.bindTooltip(`${toLabel ? toLabel + ' · ' : ''}${toGrid.toUpperCase()}`, { permanent: false, direction: 'top' })
|
||
.addTo(wo);
|
||
arcPts = greatCirclePoints(from.lat, from.lon, to.lat, to.lon, 128);
|
||
// smoothFactor: 0 keeps every vertex (Leaflet otherwise simplifies the line).
|
||
L.polyline(unwrapLon(arcPts) as L.LatLngExpression[],
|
||
{ color: '#2563eb', weight: 2, opacity: 0.85, smoothFactor: 0 }).addTo(wo);
|
||
}
|
||
|
||
if (autoZoom) {
|
||
if (from && to && arcPts) {
|
||
const bounds = L.latLngBounds([[from.lat, from.lon], [to.lat, to.lon]]);
|
||
arcPts.forEach((p) => bounds.extend(p as L.LatLngExpression));
|
||
wm.fitBounds(bounds, { padding: [30, 30], maxZoom: 6 });
|
||
} else if (to) {
|
||
wm.setView([to.lat, to.lon], 3);
|
||
} else if (from) {
|
||
wm.setView([from.lat, from.lon], 3);
|
||
}
|
||
}
|
||
// No invalidateSize() here — a ResizeObserver handles the only case that needs
|
||
// it. Forcing a full map repaint on every redraw is what made a moving rotor
|
||
// thrash the compositor.
|
||
// Headings are rounded in the deps: a rotor reports a jittering float, and a
|
||
// tenth of a degree is invisible on a 5500 km lobe but rebuilds every polyline.
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [fromGrid, toGrid, fromLabel, toLabel, (beamAzimuths ?? []).map((a) => Math.round(a)).join(','), beamWidth,
|
||
boomAzimuth == null ? null : Math.round(boomAzimuth), autoZoom, zoomSignal]);
|
||
|
||
const path = pathBetween(fromGrid, toGrid);
|
||
|
||
return (
|
||
<div className="relative isolate h-full w-full rounded-lg overflow-hidden border border-border">
|
||
<div ref={worldRef} className="absolute inset-0" />
|
||
{/* Basemap picker — Light / Street / Satellite (key-free tiles). */}
|
||
<div className="absolute top-1 left-12 z-[500] flex rounded-md overflow-hidden shadow border border-border backdrop-blur">
|
||
{(Object.keys(BASEMAPS) as BasemapKey[]).map((k) => (
|
||
<button
|
||
key={k}
|
||
type="button"
|
||
onClick={() => { setBasemap(k); writeUiPref('opslog.mapBasemap', k); }}
|
||
title={`Basemap: ${BASEMAPS[k].label}`}
|
||
className={`px-2 py-1 text-[11px] font-medium transition-colors ${
|
||
basemap === k ? 'bg-primary text-primary-foreground' : 'bg-card/90 text-muted-foreground hover:bg-card'
|
||
}`}
|
||
>
|
||
{BASEMAPS[k].label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
{/* Auto-zoom toggle: on = frame QTH→DX each QSO; off = free pan/zoom
|
||
(remembered across restarts), so the beam heading stays visible. */}
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
const v = !autoZoom;
|
||
setAutoZoom(v);
|
||
writeUiPref('opslog.mapAutoZoomDX', v ? '1' : '0');
|
||
const m = worldMap.current;
|
||
if (!v && m) saveMapView(m);
|
||
}}
|
||
title={autoZoom ? 'Auto-zoom to DX is ON — click for free pan/zoom (remembered)' : 'Free pan/zoom — click to auto-zoom to the DX'}
|
||
className={`absolute top-1 right-1 z-[500] rounded-md px-2 py-1 text-[11px] font-medium shadow border backdrop-blur transition-colors ${
|
||
autoZoom ? 'bg-primary text-primary-foreground border-primary' : 'bg-card/90 text-muted-foreground border-border hover:bg-card'
|
||
}`}
|
||
>
|
||
Zoom DX
|
||
</button>
|
||
{/* Grey line toggle, under the zoom button. */}
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
const v = !greyline;
|
||
setGreyline(v);
|
||
writeUiPref('opslog.mapGreyline', v ? '1' : '0');
|
||
}}
|
||
title={greyline ? 'Grey line is ON — day/night terminator and twilight band' : 'Show the grey line (day/night terminator)'}
|
||
className={`absolute top-9 right-1 z-[500] rounded-md px-2 py-1 text-[11px] font-medium shadow border backdrop-blur transition-colors ${
|
||
greyline ? 'bg-primary text-primary-foreground border-primary' : 'bg-card/90 text-muted-foreground border-border hover:bg-card'
|
||
}`}
|
||
>
|
||
Grey line
|
||
</button>
|
||
{path && (
|
||
<div className="absolute bottom-1 left-1 z-[500] rounded-md bg-card/90 backdrop-blur px-2 py-1 text-[11px] font-mono shadow border border-border pointer-events-none">
|
||
<div><span className="text-muted-foreground">Dist</span> {Math.round(path.distanceShort).toLocaleString()} km
|
||
<span className="text-muted-foreground"> · LP</span> {Math.round(path.distanceLong).toLocaleString()} km</div>
|
||
<div><span className="text-muted-foreground">Az SP</span> {Math.round(path.bearingShort)}°
|
||
<span className="text-muted-foreground"> · LP</span> {Math.round(path.bearingLong)}°</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
interface LocatorProps {
|
||
toGrid: string; // contacted-station grid
|
||
toLabel?: string; // DX callsign
|
||
}
|
||
|
||
// LocatorMap — street map zoomed onto the DX grid, the "map2" pane.
|
||
export function LocatorMap({ toGrid, toLabel }: LocatorProps) {
|
||
const locatorRef = useRef<HTMLDivElement>(null);
|
||
const locatorMap = useRef<L.Map | null>(null);
|
||
const locatorOverlay = useRef<L.LayerGroup | null>(null);
|
||
|
||
useEffect(() => {
|
||
if (locatorRef.current && !locatorMap.current) {
|
||
const m = L.map(locatorRef.current, { zoomControl: true, attributionControl: true })
|
||
.setView([20, 0], 2);
|
||
// Same restraint as the world map: fetch on idle, not mid-pan, and keep a
|
||
// single ring of buffer tiles. Requesting tiles as fast as the pointer
|
||
// moves is what gets an app blocked, and the next provider is under no
|
||
// more obligation to tolerate it than the last one was.
|
||
L.tileLayer(CARTO_LIGHT, {
|
||
attribution: CARTO_ATTR, subdomains: 'abcd', maxZoom: 19,
|
||
updateWhenIdle: true, updateWhenZooming: false, keepBuffer: 1,
|
||
}).addTo(m);
|
||
locatorOverlay.current = L.layerGroup().addTo(m);
|
||
locatorMap.current = m;
|
||
}
|
||
const t = window.setTimeout(() => { locatorMap.current?.invalidateSize(); }, 80);
|
||
return () => window.clearTimeout(t);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const lm = locatorMap.current, lo = locatorOverlay.current;
|
||
if (!lm || !lo) return;
|
||
lo.clearLayers();
|
||
const to = gridToLatLon(toGrid);
|
||
if (to) {
|
||
L.marker([to.lat, to.lon], { icon: dot('#dc2626'), title: toLabel || 'DX' })
|
||
.bindTooltip(`${toLabel ? toLabel + ' · ' : ''}${toGrid.toUpperCase()}`, { permanent: false, direction: 'top' })
|
||
.addTo(lo);
|
||
const b = gridSquareBounds(toGrid);
|
||
if (b) {
|
||
L.rectangle([[b.south, b.west], [b.north, b.east]], { color: '#dc2626', weight: 1, fillOpacity: 0.06 }).addTo(lo);
|
||
}
|
||
lm.setView([to.lat, to.lon], toGrid.trim().length >= 6 ? 9 : 7);
|
||
}
|
||
setTimeout(() => { lm.invalidateSize(); }, 0);
|
||
}, [toGrid, toLabel]);
|
||
|
||
return (
|
||
<div className="relative isolate h-full w-full rounded-lg overflow-hidden border border-border">
|
||
<div ref={locatorRef} className="absolute inset-0" />
|
||
{!gridToLatLon(toGrid) && (
|
||
<div className="absolute inset-0 z-[500] flex items-center justify-center text-xs text-muted-foreground bg-card/60 pointer-events-none">
|
||
Enter a grid or look up the callsign to center the map.
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|