Map Viewer

At its core, Routster uses a heavily customized implementation of Leaflet.js to render the map, coordinate systems, and tracks. Standard Leaflet is designed for web mercator map tiles, but Routster operates in a highly specific Image Coordinate Space.

The Coordinate System

Routster maps are rendered using L.CRS.Simple. This maps longitude directly to the x pixel axis and latitude to the y pixel axis of the original uploaded high-resolution image.

This is crucial because orienteering maps are not aligned perfectly to True North, nor are they flat projections of the globe—they are local, hand-drawn topological interpretations. All drawing, mistake calculation, and shortest-path processing happens in this localized pixel space, not in GPS coordinates.

Map Rotation Mechanics

Leaflet does not natively support map rotation well. To achieve the buttery-smooth "Leg Rotation" in the Per-Leg view, Routster uses a complex DOM wrapper setup:

1. A CSS transform: rotate(-bearing) is applied to an outer wrapper div.
2. The inner Leaflet container is sized to the diagonal length of the viewport, ensuring that no matter the rotation angle, the corners of the map never show blank space.
3. Custom event listeners intercept mouse and touch events. Before passing a drag or zoom command to Leaflet, the (dx, dy) vector of the mouse movement is rotated mathematically by +bearing to invert the CSS rotation. This ensures dragging the map "down" with your mouse actually moves the map down on screen, regardless of the map's current rotation.

Extra Map Layers (Overlays)

Routster supports rendering secondary georeferenced maps above the primary map but below the GPS tracks. These are injected into Leaflet using an SVG overlay layer.

The engine calculates a secondary Affine Transform matrix that maps the secondary image's pixels directly into the primary image's pixel space. This allows you to fade a LiDAR hillshade or an old historical map directly over your current run with pixel-perfect accuracy.