diff --git a/frontend/src/components/FTMapPanel.tsx b/frontend/src/components/FTMapPanel.tsx index 5981a32..908f074 100644 --- a/frontend/src/components/FTMapPanel.tsx +++ b/frontend/src/components/FTMapPanel.tsx @@ -51,10 +51,14 @@ export function FTMapPanel({ decodes, myGrid }: { decodes: FTMapDecode[]; myGrid // The map itself, once. useEffect(() => { if (!divRef.current || mapRef.current) return; + // ONE world: noWrap tiles inside hard bounds, no side-by-side copies — + // and the space beyond the edge is the theme's own surface (style.css). const m = L.map(divRef.current, { zoomControl: true, attributionControl: true, - worldCopyJump: true, preferCanvas: true, + worldCopyJump: false, preferCanvas: true, center: [25, 0], zoom: 2, minZoom: 2, + maxBounds: L.latLngBounds(L.latLng(-85.0511, -180), L.latLng(85.0511, 180)), + maxBoundsViscosity: 1, }); mapRef.current = m; layerRef.current = L.layerGroup().addTo(m); @@ -67,7 +71,11 @@ export function FTMapPanel({ decodes, myGrid }: { decodes: FTMapDecode[]; myGrid if (!m) return; baseRef.current?.remove(); labelsRef.current?.remove(); const bm = BASEMAPS[basemap]; - const opts: L.TileLayerOptions = { maxNativeZoom: bm.maxNativeZoom, noWrap: false }; + const opts: L.TileLayerOptions = { + maxNativeZoom: bm.maxNativeZoom, + noWrap: true, + bounds: L.latLngBounds(L.latLng(-85.0511, -180), L.latLng(85.0511, 180)), + }; baseRef.current = L.tileLayer(bm.url, { ...opts, attribution: bm.attr, subdomains: bm.subdomains ?? 'abc' }).addTo(m); if (bm.labelsUrl) labelsRef.current = L.tileLayer(bm.labelsUrl, opts).addTo(m); localStorage.setItem('opslog.ftmapBase', basemap); diff --git a/frontend/src/style.css b/frontend/src/style.css index 8ec69dd..b9ad6ad 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -1086,3 +1086,10 @@ .overflow-scroll { overscroll-behavior: contain; } + +/* The ground beside the planet, on every map: Leaflet paints its container a + hard-coded light grey (#ddd), which reads as a broken tile against any + theme. The surround follows the theme's own card surface instead. */ +.leaflet-container { + background: var(--card) !important; +}