diff options
Diffstat (limited to 'app/map.js')
| -rw-r--r-- | app/map.js | 37 |
1 files changed, 11 insertions, 26 deletions
@@ -79,8 +79,8 @@ export class MapEl { #modalTimer; /** @type {boolean} */ #persistentModal = false; - /** @type {Bounds|null} */ - #fullBounds = null; + /** @type {Bounds} */ + #fullBounds; /** @type {Point|null} */ #centerPoint = null; /** @type {number} */ @@ -150,29 +150,12 @@ export class MapEl { // Calculate initial center point and view height this.#centerPoint = new Point(bounds.minX + width / 2, bounds.minY + height / 2); - this.#viewHeightMeters = this.#calculateViewHeightMeters(height); - this.svg.setAttribute("viewBox", `${bounds.minX} ${-bounds.maxY} ${width} ${height}`); - } - - /** - * Calculate view height in meters based on latitude and view height in degrees - * @param {number} heightDegrees - * @returns {number} - */ - #calculateViewHeightMeters(heightDegrees) { // Approximate conversion: 1 degree latitude ≈ 111,000 meters // 1 degree longitude varies by latitude: 111,000 * cos(latitude) - return heightDegrees * 111000; - } + this.#viewHeightMeters = height * 111000; - /** - * Calculate view height in degrees based on meters and latitude - * @param {number} meters - * @returns {number} - */ - #calculateViewHeightDegrees(meters) { - return meters / 111000; + this.svg.setAttribute("viewBox", `${bounds.minX} ${-bounds.maxY} ${width} ${height}`); } /** @@ -191,7 +174,7 @@ export class MapEl { this.#viewHeightMeters = MapMath.clamp(this.#viewHeightMeters, 100, 1000000); // Calculate new view height in degrees - const newHeightDegrees = this.#calculateViewHeightDegrees(this.#viewHeightMeters); + const newHeightDegrees = this.#viewHeightMeters / 11000; // Calculate new width based on aspect ratio const aspectRatio = vb.width / vb.height; @@ -407,13 +390,15 @@ export class MapEl { * @param {SVGSVGElement} svg * @param {number} initVx - Initial velocity X * @param {number} initVy - Initial velocity Y + * @param {Bounds} fullBounds * @param {number} [friction=PanningConfig.DEFAULT_FRICTION] * @param {number} [speedThreshold=PanningConfig.DEFAULT_SPEED_THRESHOLD] */ - #startInertia( + static #startInertia( svg, initVx, initVy, + fullBounds, friction = PanningConfig.DEFAULT_FRICTION, speedThreshold = PanningConfig.DEFAULT_SPEED_THRESHOLD, ) { @@ -440,7 +425,7 @@ export class MapEl { vb.x -= deltaX; vb.y -= deltaY; - const { clampedX, clampedY } = MapEl.#clampViewBox(svg, this.#fullBounds); + const { clampedX, clampedY } = MapEl.#clampViewBox(svg, fullBounds); if (clampedX) currVx = -currVx * PanningConfig.DEFAULT_BOUNCE_FACTOR; if (clampedY) currVy = -currVy * PanningConfig.DEFAULT_BOUNCE_FACTOR; @@ -650,7 +635,7 @@ export class MapEl { const speed = Math.hypot(vx, vy); if (speed > PanningConfig.DEFAULT_SPEED_THRESHOLD) { - this.#startInertia(this.svg, vx, vy); + MapEl.#startInertia(this.svg, vx, vy, this.#fullBounds); } } }); @@ -720,7 +705,7 @@ export class MapEl { fill: "none", // Changed from semi-transparent blue to transparent "pointer-events": "stroke", stroke: "rgba(85, 85, 85, 1)", - "stroke-width": "0.001", + "stroke-width": "0.0005", }, }), ); |