more work on print view

web/src/lib/util/leaflet_util.ts

@@ -1,5 +1,5 @@
 import type { Waypoint } from "$lib/models/waypoint";
-import type { Icon, LeafletEvent, Marker } from "leaflet";
+import type { Icon, LeafletEvent, Map, Marker } from "leaflet";
 
 export function createMarkerFromWaypoint(L: any, waypoint: Waypoint, onDragEnd?: (event: LeafletEvent) => void): Marker {
     const fontAwesomeIcon = L.AwesomeMarkers.icon({
@@ -27,4 +27,43 @@ export function createMarkerFromWaypoint(L: any, waypoint: Waypoint, onDragEnd?:
     }
 
     return marker;
+}
+
+export function calculatePixelPerMeter(map: Map, meters: number) {
+    const y = map.getSize().y;
+    const x = map.getSize().x;
+    const maxMeters = map.containerPointToLatLng([0, y]).distanceTo(map.containerPointToLatLng([x, y]));
+    const pixelPerMeter = x / maxMeters;
+
+    return pixelPerMeter * meters
+}
+
+export function calculateScaleFactor(map: Map) {
+    function _pxTOmm() {
+        let heightRef = document.createElement('div');
+        heightRef.style.height = '1mm';
+        heightRef.style.position = "absolute";
+        heightRef.id = 'heightRef';
+        document.body.appendChild(heightRef);
+
+        const pxPermm = heightRef.getBoundingClientRect().height;
+
+        document.body.removeChild(heightRef);
+
+        return function pxTOmm(px: number) {
+            return px / pxPermm;
+        }
+    }
+    var centerOfMap = map.getSize().y / 2;
+
+    var realWorlMetersPer100Pixels = map.distance(
+        map.containerPointToLatLng([0, centerOfMap]),
+        map.containerPointToLatLng([100, centerOfMap])
+    );
+
+    const screenMetersPer100Pixels = _pxTOmm()(100) / 1000;
+        
+    const scaleFactor = realWorlMetersPer100Pixels / screenMetersPer100Pixels
+
+    return scaleFactor
 }

web/src/lib/util/svg_util.ts

@@ -0,0 +1,29 @@
+export function createRect(
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    fill: string,
+) {
+    const svgns = "http://www.w3.org/2000/svg";
+
+    const rect = document.createElementNS(svgns, "rect");
+    rect.setAttribute("x", x.toString());
+    rect.setAttribute("y", y.toString());
+    rect.setAttribute("width", width.toString());
+    rect.setAttribute("height", height.toString());
+    rect.setAttribute("fill", fill);
+    return rect;
+}
+
+export function createText(content: string, x: number,
+    y: number, fontSize?: string) {
+    const svgns = "http://www.w3.org/2000/svg";
+
+    const text = document.createElementNS(svgns, "text");
+    text.setAttribute("x", x.toString());
+    text.setAttribute("y", y.toString());
+    text.style.fontSize = fontSize ?? ""
+    text.textContent = content;
+    return text;
+}