style(ftmap): one world, themed ground — here and on every map
The FT map wrapped the planet into a row of copies and showed Leaflet's hard-coded grey beyond it. noWrap tiles inside hard bounds now, like the grid-square map already did — and the container background override moves to style.css so EVERY map's surround follows the theme's card surface instead of #ddd (the grid map's per-div fix was losing to leaflet.css specificity).
This commit is contained in:
@@ -51,10 +51,14 @@ export function FTMapPanel({ decodes, myGrid }: { decodes: FTMapDecode[]; myGrid
|
|||||||
// The map itself, once.
|
// The map itself, once.
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!divRef.current || mapRef.current) return;
|
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, {
|
const m = L.map(divRef.current, {
|
||||||
zoomControl: true, attributionControl: true,
|
zoomControl: true, attributionControl: true,
|
||||||
worldCopyJump: true, preferCanvas: true,
|
worldCopyJump: false, preferCanvas: true,
|
||||||
center: [25, 0], zoom: 2, minZoom: 2,
|
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;
|
mapRef.current = m;
|
||||||
layerRef.current = L.layerGroup().addTo(m);
|
layerRef.current = L.layerGroup().addTo(m);
|
||||||
@@ -67,7 +71,11 @@ export function FTMapPanel({ decodes, myGrid }: { decodes: FTMapDecode[]; myGrid
|
|||||||
if (!m) return;
|
if (!m) return;
|
||||||
baseRef.current?.remove(); labelsRef.current?.remove();
|
baseRef.current?.remove(); labelsRef.current?.remove();
|
||||||
const bm = BASEMAPS[basemap];
|
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);
|
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);
|
if (bm.labelsUrl) labelsRef.current = L.tileLayer(bm.labelsUrl, opts).addTo(m);
|
||||||
localStorage.setItem('opslog.ftmapBase', basemap);
|
localStorage.setItem('opslog.ftmapBase', basemap);
|
||||||
|
|||||||
@@ -1086,3 +1086,10 @@
|
|||||||
.overflow-scroll {
|
.overflow-scroll {
|
||||||
overscroll-behavior: contain;
|
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;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user