mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-11-13 07:40:59 +00:00
Maurice
3681db6cd4
The map framed its first view for the browser window instead of its own box and then skipped the fit, so a list of cafes across Europe opened on northern France. It now fits the places in its own box with room for the label bar and the controls, fits again when the set of places changes, keeps a view the user moved, opens a single place at town level and keeps a list across the date line on its short arc.
290 lines
11 KiB
TypeScript
290 lines
11 KiB
TypeScript
import { describe, it, expect } from 'vitest'
|
|
import {
|
|
alongShortestArc,
|
|
computeMapViewport,
|
|
MAX_ZOOM_GL,
|
|
MAX_ZOOM_RASTER,
|
|
SINGLE_PLACE_ZOOM_RASTER,
|
|
TILE_SIZE_GL,
|
|
TILE_SIZE_RASTER,
|
|
} from './mapViewport'
|
|
|
|
// Pin the container size so no assertion depends on jsdom's window dimensions.
|
|
const VIEW = { width: 1000, height: 800 } as const
|
|
|
|
const PARIS = { lat: 48.8566, lng: 2.3522 }
|
|
const LYON = { lat: 45.764, lng: 4.8357 }
|
|
|
|
/**
|
|
* The invariant that actually matters: every place must land inside the container at the
|
|
* returned camera. Mirrors the Mercator projection the map uses.
|
|
*/
|
|
function screenPosition(
|
|
point: { lat: number; lng: number },
|
|
viewport: { center: [number, number]; zoom: number },
|
|
tileSize: number,
|
|
size = VIEW,
|
|
// Only MapLibre/Mapbox redraw a marker on the nearest copy of the world. Leaflet places it
|
|
// at its absolute projected position, so assuming a wrap here would hide exactly the bug
|
|
// that puts a marker off-screen in the real app.
|
|
wrapsWorld = false,
|
|
): { x: number; y: number } {
|
|
const project = (lat: number, lng: number) => {
|
|
const scale = tileSize * Math.pow(2, viewport.zoom)
|
|
const sin = Math.sin((lat * Math.PI) / 180)
|
|
return {
|
|
x: scale * (lng / 360 + 0.5),
|
|
y: scale * (0.5 - Math.log((1 + sin) / (1 - sin)) / (4 * Math.PI)),
|
|
}
|
|
}
|
|
const p = project(point.lat, point.lng)
|
|
const c = project(viewport.center[0], viewport.center[1])
|
|
|
|
const worldWidth = tileSize * Math.pow(2, viewport.zoom)
|
|
const raw = p.x - c.x
|
|
const dx = wrapsWorld
|
|
? ((raw + worldWidth / 2) % worldWidth + worldWidth) % worldWidth - worldWidth / 2
|
|
: raw
|
|
|
|
return { x: dx + size.width / 2, y: p.y - c.y + size.height / 2 }
|
|
}
|
|
|
|
describe('computeMapViewport', () => {
|
|
it('frames a set of places so all of them are on screen', () => {
|
|
const viewport = computeMapViewport([PARIS, LYON], { ...VIEW, tileSize: TILE_SIZE_RASTER })!
|
|
|
|
// Latitude is the midpoint in projected space, so it sits near — but not exactly on —
|
|
// the arithmetic mean; Mercator stretches towards the poles. Longitude is linear.
|
|
expect(viewport.center[0]).toBeCloseTo((PARIS.lat + LYON.lat) / 2, 1)
|
|
expect(viewport.center[1]).toBeCloseTo((PARIS.lng + LYON.lng) / 2, 6)
|
|
|
|
for (const place of [PARIS, LYON]) {
|
|
const { x, y } = screenPosition(place, viewport, TILE_SIZE_RASTER)
|
|
expect(x).toBeGreaterThanOrEqual(0)
|
|
expect(x).toBeLessThanOrEqual(VIEW.width)
|
|
expect(y).toBeGreaterThanOrEqual(0)
|
|
expect(y).toBeLessThanOrEqual(VIEW.height)
|
|
}
|
|
})
|
|
|
|
it('opens at city level for a single place', () => {
|
|
const viewport = computeMapViewport([PARIS], { ...VIEW, tileSize: TILE_SIZE_RASTER })!
|
|
|
|
expect(viewport.center[0]).toBeCloseTo(PARIS.lat, 6)
|
|
expect(viewport.center[1]).toBeCloseTo(PARIS.lng, 6)
|
|
expect(viewport.zoom).toBe(SINGLE_PLACE_ZOOM_RASTER)
|
|
})
|
|
|
|
it('treats several places stacked on one spot as a single place, without dividing by zero', () => {
|
|
const viewport = computeMapViewport([PARIS, { ...PARIS }, { ...PARIS }], {
|
|
...VIEW,
|
|
tileSize: TILE_SIZE_RASTER,
|
|
})!
|
|
|
|
expect(Number.isFinite(viewport.zoom)).toBe(true)
|
|
expect(viewport.zoom).toBe(SINGLE_PLACE_ZOOM_RASTER)
|
|
})
|
|
|
|
it('frames places sharing a latitude, using the longitude span alone', () => {
|
|
const viewport = computeMapViewport(
|
|
[{ lat: 48.8566, lng: 2.0 }, { lat: 48.8566, lng: 4.0 }],
|
|
{ ...VIEW, tileSize: TILE_SIZE_RASTER },
|
|
)!
|
|
|
|
expect(Number.isFinite(viewport.zoom)).toBe(true)
|
|
expect(viewport.zoom).toBeLessThan(MAX_ZOOM_RASTER)
|
|
expect(viewport.center[1]).toBeCloseTo(3.0, 3)
|
|
})
|
|
|
|
it('returns null when nothing has usable coordinates', () => {
|
|
expect(computeMapViewport([], VIEW)).toBeNull()
|
|
expect(computeMapViewport([{ lat: null, lng: null }], VIEW)).toBeNull()
|
|
expect(computeMapViewport([{ lat: 48.85, lng: null }], VIEW)).toBeNull()
|
|
expect(computeMapViewport([{ lat: NaN, lng: 2.35 }], VIEW)).toBeNull()
|
|
expect(computeMapViewport([{ lat: 200, lng: 2.35 }], VIEW)).toBeNull()
|
|
expect(computeMapViewport([{ lat: 48.85, lng: 999 }], VIEW)).toBeNull()
|
|
})
|
|
|
|
it('treats 0,0 as a real coordinate rather than a missing one', () => {
|
|
const viewport = computeMapViewport([{ lat: 0, lng: 0 }], { ...VIEW, tileSize: TILE_SIZE_RASTER })
|
|
|
|
expect(viewport).not.toBeNull()
|
|
expect(viewport!.center[0]).toBeCloseTo(0, 6)
|
|
expect(viewport!.center[1]).toBeCloseTo(0, 6)
|
|
})
|
|
|
|
const FIJI = { lat: -18.14, lng: 178.44 }
|
|
const SAMOA = { lat: -13.76, lng: -172.1 }
|
|
|
|
it('takes the short way round the antimeridian on a renderer that wraps the world', () => {
|
|
// Fiji and Samoa are 10 degrees apart, not 350 — MapLibre/Mapbox draw each marker on the
|
|
// copy of the world nearest the camera, so this centre is safe there.
|
|
const viewport = computeMapViewport([FIJI, SAMOA], { ...VIEW, tileSize: TILE_SIZE_GL })!
|
|
|
|
expect(viewport.center[1]).toBeCloseTo(-176.83, 1)
|
|
// A 350-degree span would have collapsed the zoom to the world view.
|
|
expect(viewport.zoom).toBeGreaterThan(3)
|
|
})
|
|
|
|
it('goes the long way round on Leaflet, which does not wrap markers', () => {
|
|
// Leaflet draws a single world and places markers at their absolute position. Centring on
|
|
// the antimeridian would leave one of these two outside it entirely — so span the 350
|
|
// degrees instead, as L.latLngBounds would.
|
|
const viewport = computeMapViewport([FIJI, SAMOA], { ...VIEW, tileSize: TILE_SIZE_RASTER })!
|
|
|
|
expect(viewport.center[1]).toBeCloseTo(3.17, 1)
|
|
// Nearly the whole globe: zoomed right out, not framed tight on the Pacific.
|
|
expect(viewport.zoom).toBeLessThanOrEqual(2)
|
|
|
|
for (const place of [FIJI, SAMOA]) {
|
|
const { x } = screenPosition(place, viewport, TILE_SIZE_RASTER)
|
|
expect(x).toBeGreaterThanOrEqual(0)
|
|
expect(x).toBeLessThanOrEqual(VIEW.width)
|
|
}
|
|
})
|
|
|
|
it('clamps latitude at the poles instead of projecting to infinity', () => {
|
|
const viewport = computeMapViewport(
|
|
[{ lat: 90, lng: 0 }, { lat: 80, lng: 10 }],
|
|
{ ...VIEW, tileSize: TILE_SIZE_RASTER },
|
|
)!
|
|
|
|
expect(Number.isFinite(viewport.zoom)).toBe(true)
|
|
expect(viewport.center[0]).toBeLessThanOrEqual(85.0511)
|
|
})
|
|
|
|
it('returns a GL zoom exactly one level below the raster zoom for the same view', () => {
|
|
const raster = computeMapViewport([PARIS, LYON], { ...VIEW, tileSize: TILE_SIZE_RASTER })!
|
|
const gl = computeMapViewport([PARIS, LYON], { ...VIEW, tileSize: TILE_SIZE_GL })!
|
|
|
|
expect(gl.zoom).toBeCloseTo(raster.zoom - 1, 6)
|
|
expect(gl.center).toEqual(raster.center)
|
|
})
|
|
|
|
it('never zooms past the renderer maxZoom for two nearly identical places', () => {
|
|
const almost = { lat: PARIS.lat + 0.00001, lng: PARIS.lng + 0.00001 }
|
|
|
|
expect(computeMapViewport([PARIS, almost], { ...VIEW, tileSize: TILE_SIZE_RASTER })!.zoom)
|
|
.toBe(MAX_ZOOM_RASTER)
|
|
expect(computeMapViewport([PARIS, almost], { ...VIEW, tileSize: TILE_SIZE_GL })!.zoom)
|
|
.toBe(MAX_ZOOM_GL)
|
|
})
|
|
|
|
// Sydney, Reykjavik and Santiago: the narrowest arc containing all three crosses the
|
|
// antimeridian. On Leaflet that centre put Sydney outside the one world it draws — the
|
|
// marker simply vanished. Assert against each renderer's real wrapping behaviour.
|
|
const GLOBE = [
|
|
{ lat: -33.87, lng: 151.21 }, // Sydney
|
|
{ lat: 64.15, lng: -21.94 }, // Reykjavik
|
|
{ lat: -33.45, lng: -70.67 }, // Santiago
|
|
]
|
|
|
|
it('keeps a globe-spanning trip on screen in Leaflet, which does not wrap', () => {
|
|
const viewport = computeMapViewport(GLOBE, { ...VIEW, tileSize: TILE_SIZE_RASTER })!
|
|
|
|
expect(viewport.zoom).toBeGreaterThanOrEqual(0)
|
|
expect(viewport.zoom).toBeLessThan(5)
|
|
|
|
for (const place of GLOBE) {
|
|
const { x, y } = screenPosition(place, viewport, TILE_SIZE_RASTER)
|
|
expect(x).toBeGreaterThanOrEqual(0)
|
|
expect(x).toBeLessThanOrEqual(VIEW.width)
|
|
expect(y).toBeGreaterThanOrEqual(0)
|
|
expect(y).toBeLessThanOrEqual(VIEW.height)
|
|
}
|
|
})
|
|
|
|
it('keeps a globe-spanning trip on screen in GL, which does wrap', () => {
|
|
const viewport = computeMapViewport(GLOBE, { ...VIEW, tileSize: TILE_SIZE_GL })!
|
|
|
|
for (const place of GLOBE) {
|
|
const { x, y } = screenPosition(place, viewport, TILE_SIZE_GL, VIEW, true)
|
|
expect(x).toBeGreaterThanOrEqual(0)
|
|
expect(x).toBeLessThanOrEqual(VIEW.width)
|
|
expect(y).toBeGreaterThanOrEqual(0)
|
|
expect(y).toBeLessThanOrEqual(VIEW.height)
|
|
}
|
|
})
|
|
|
|
it('shifts the center so places clear a left-hand panel', () => {
|
|
const unpadded = computeMapViewport([PARIS, LYON], { ...VIEW, tileSize: TILE_SIZE_RASTER })!
|
|
const padded = computeMapViewport([PARIS, LYON], {
|
|
...VIEW,
|
|
tileSize: TILE_SIZE_RASTER,
|
|
padding: { left: 400 },
|
|
})!
|
|
|
|
// The camera pulls west so the places sit right of the panel, in the visible area.
|
|
expect(padded.center[1]).toBeLessThan(unpadded.center[1])
|
|
|
|
// And they still fit: the panel eats 400px, so check against the visible width.
|
|
for (const place of [PARIS, LYON]) {
|
|
const { x } = screenPosition(place, padded, TILE_SIZE_RASTER)
|
|
expect(x).toBeGreaterThanOrEqual(400)
|
|
expect(x).toBeLessThanOrEqual(VIEW.width)
|
|
}
|
|
})
|
|
|
|
// Two 300px planner panels on an 860px foldable left the framing window 140px
|
|
// wide, and the camera then opened on half of East Asia instead of the trip
|
|
// (#2247). The layout fix stops it happening; this stops it mattering.
|
|
it('never frames the camera for less than a third of the box, however wide the padding', () => {
|
|
const sane = computeMapViewport([PARIS, LYON], {
|
|
...VIEW,
|
|
tileSize: TILE_SIZE_RASTER,
|
|
padding: { left: 380, right: 340 },
|
|
})!
|
|
const absurd = computeMapViewport([PARIS, LYON], {
|
|
...VIEW,
|
|
tileSize: TILE_SIZE_RASTER,
|
|
padding: { left: 480, right: 480 },
|
|
})!
|
|
// 1000 - 960 = 40px of window would zoom ~2.5 levels further out than the
|
|
// third the clamp guarantees.
|
|
const floored = computeMapViewport([PARIS, LYON], {
|
|
width: VIEW.width / 3,
|
|
height: VIEW.height,
|
|
tileSize: TILE_SIZE_RASTER,
|
|
})!
|
|
expect(absurd.zoom).toBe(floored.zoom)
|
|
expect(absurd.zoom).toBeGreaterThan(sane.zoom - 3)
|
|
})
|
|
|
|
it('leaves a sane padding untouched', () => {
|
|
const withPadding = computeMapViewport([PARIS, LYON], {
|
|
...VIEW,
|
|
tileSize: TILE_SIZE_RASTER,
|
|
padding: { left: 200, right: 100 },
|
|
})!
|
|
const equivalent = computeMapViewport([PARIS, LYON], {
|
|
width: VIEW.width - 300,
|
|
height: VIEW.height,
|
|
tileSize: TILE_SIZE_RASTER,
|
|
})!
|
|
expect(withPadding.zoom).toBe(equivalent.zoom)
|
|
})
|
|
})
|
|
|
|
describe('alongShortestArc', () => {
|
|
const FIJI: [number, number] = [-18.14, 178.44]
|
|
const TONGA: [number, number] = [-21.14, -175.2]
|
|
const SAMOA: [number, number] = [-13.83, -171.76]
|
|
|
|
it('carries the places past the antimeridian on beyond 180, so a min-max box between them is the short one', () => {
|
|
const lngs = alongShortestArc([FIJI, TONGA, SAMOA]).map(([, lng]) => Math.round(lng * 100) / 100)
|
|
|
|
// From Fiji east across the date line: under ten degrees wide, not the 350 the other way round.
|
|
expect(lngs).toEqual([178.44, 184.8, 188.24])
|
|
})
|
|
|
|
it('leaves places that do not cross the antimeridian as they are', () => {
|
|
const cafes: [number, number][] = [[48.21, 16.37], [38.71, -9.14], [55.7, 12.55]]
|
|
|
|
expect(alongShortestArc(cafes)).toEqual(cafes)
|
|
})
|
|
|
|
it('has nothing to lay out for no places', () => {
|
|
expect(alongShortestArc([])).toEqual([])
|
|
})
|
|
})
|