https://www.ea2cw.eus/locator/js/ruler-rs.js

1/*
2* Rain scatter ruler by TK5EP
3* 2026/01
4* the muve move gives the distance and azimut to origin and target
5* 1st clic is origin
6* 2nd clic is target
7* 3rd clic quits
8*/
9
10// ---------------- États ----------------
11let isToolActive = false;
12let points = [];
13let markers = [];
14let tempLines = [];
15let fixedLine = null;
16
17const info = document.getElementById("floating-info");
18
19// ---------------- Reset ----------------
20function resetTool() {
21    points = [];
22    markers.forEach(m => map.removeLayer(m));
23    tempLines.forEach(l => map.removeLayer(l));
24    if(fixedLine) map.removeLayer(fixedLine);
25    markers = [];
26    tempLines = [];
27    fixedLine = null;
28    info.style.display = "none";
29}
30
31// ---------------- Azimut ----------------
32function getAzimuth(p1, p2){
33    const d2r = Math.PI / 180;
34    const dLng = (p2.lng - p1.lng) * d2r;
35    const y = Math.sin(dLng) * Math.cos(p2.lat * d2r);
36    const x = Math.cos(p1.lat * d2r) * Math.sin(p2.lat * d2r) -
37              Math.sin(p1.lat * d2r) * Math.cos(p2.lat * d2r) * Math.cos(dLng);
38    return (Math.atan2(y, x) * 180 / Math.PI + 360) % 360;
39}
40
41
42// ---------------- Mouvement ----------------
43map.on('mousemove', e => {
44    if(!isToolActive || points.length === 0){
45        info.style.display = "none";
46        return;
47    }
48
49    info.style.display = "block";
50    info.style.left = (e.originalEvent.clientX + 15) + "px";
51    info.style.top  = (e.originalEvent.clientY + 15) + "px";
52
53    // Supprimer les lignes temporaires
54    tempLines.forEach(l => map.removeLayer(l));
55    tempLines = [];
56
57    let html = "";
58
59    // P1
60    const p1 = points[0];
61    tempLines.push(
62        L.polyline([p1, e.latlng], {
63            color:'#2ecc71',
64            weight:1,
65            dashArray:'4,4',
66            interactive:false
67        }).addTo(map)
68    );
69
70    html += `
71        <div class="measure-line measure-p1">
72
73            Dist : ${(map.distance(p1, e.latlng)/1000).toFixed(2)} km<br>
74            AZ   : ${getAzimuth(p1, e.latlng).toFixed(1)}°
75        </div>
76    `;
77
78    // P2 si existant
79    if(points.length === 2){
80        const p2 = points[1];
81
82        tempLines.push(
83            L.polyline([p2, e.latlng], {
84                color:'#e74c3c',
85                weight:1,
86                dashArray:'4,4',
87                interactive:false
88            }).addTo(map)
89        );
90
91        html += `
92            <div class="measure-line measure-p2">
93
94                Dist : ${(map.distance(p2, e.latlng)/1000).toFixed(2)} km<br>
95                AZ   : ${getAzimuth(p2, e.latlng).toFixed(1)}°
96            </div>
97        `;
98    }
99
100    info.innerHTML = html;
101});
102
103// ---------------- Clic ----------------
104map.on('click', e => {
105    if(!isToolActive) return;
106
107    if(points.length >= 2){
108        resetTool();
109        return;
110    }
111
112    points.push(e.latlng);
113
114    const marker = L.circleMarker(e.latlng, {
115        radius:5,
116        fillColor: points.length===1 ? '#2ecc71' : '#e74c3c',
117        color:'#fff',
118        weight:1,
119        fillOpacity:1,
120        interactive:false
121    }).addTo(map);
122
123    markers.push(marker);
124
125    // Ligne fixe entre P1 et P2
126    if(points.length === 2){
127        fixedLine = L.polyline(points, {
128            color:'#e74c3c',
129            weight:1,
130            dashArray:'5,5',
131            interactive:false
132        }).addTo(map);
133    }
134});