plot-finder/utils.js at master · danielmroczek/plot-finder · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
// map-utils.js: Map creation, geolocation, UI utilities

// Map configuration and creation
const OSM_DEFAULT = {
  url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  options: {
    attribution: false,
    maxZoom: 25,
    maxNativeZoom: 19
  }
};

export function createMap(darkMode) {
  const map = L.map('map', { zoomControl: true, attributionControl: false });
  L.tileLayer(OSM_DEFAULT.url, OSM_DEFAULT.options).addTo(map);
  map.setView([52.2, 21.0], 15);
  return map;
}

// Geolocation and user position tracking
export function watchUserPosition(map, showAccuracyCircle, onUpdate, onError) {
  if (!navigator.geolocation) {
    onError('Geolokalizacja nie jest wspierana przez tę przeglądarkę.');
    return null;
  }

  // Clean up existing markers
  if (map._userMarker) {
    map.removeLayer(map._userMarker);
    map._userMarker = null;
  }
  if (map._headingMarker) {
    map.removeLayer(map._headingMarker);
    map._headingMarker = null;
  }

  const watchId = navigator.geolocation.watchPosition(
    pos => {
      const userPosition = {
        lat: pos.coords.latitude,
        lng: pos.coords.longitude,
        accuracy: pos.coords.accuracy,
        heading: pos.coords.heading
      };

      // User position marker
      if (!map._userMarker) {
        if (showAccuracyCircle) {
          // Show accuracy circle
          map._userMarker = L.circle([userPosition.lat, userPosition.lng], {
            radius: userPosition.accuracy || 10,
            className: 'user-marker'
          }).addTo(map);
        } else {
          // Show small point
          map._userMarker = L.circleMarker([userPosition.lat, userPosition.lng], {
            radius: 6,
            className: 'user-marker'
          }).addTo(map);
        }
      } else {
        // Check if we need to recreate the marker (type change)
        const isCurrentlyCircle = !!map._userMarker.setRadius;
        if (showAccuracyCircle !== isCurrentlyCircle) {
          map.removeLayer(map._userMarker);
          if (showAccuracyCircle) {
            map._userMarker = L.circle([userPosition.lat, userPosition.lng], {
              radius: userPosition.accuracy || 10,
              className: 'user-marker'
            }).addTo(map);
          } else {
            map._userMarker = L.circleMarker([userPosition.lat, userPosition.lng], {
              radius: 6,
              className: 'user-marker'
            }).addTo(map);
          }
        } else {
          map._userMarker.setLatLng([userPosition.lat, userPosition.lng]);
          if (showAccuracyCircle && map._userMarker.setRadius) {
            map._userMarker.setRadius(userPosition.accuracy || 10);
          }
        }
      }

      // Heading marker (triangle/arrow)
      if (map._headingMarker) {
        map.removeLayer(map._headingMarker);
        map._headingMarker = null;
      }

      if (userPosition.heading === null || isNaN(userPosition.heading)) {
        userPosition.heading = 0; // Default heading if not available
      }

      // // Create heading marker using Lucide navigation-2 icon
      // headingMarker = L.marker([userPosition.lat, userPosition.lng], {
      //   icon: L.divIcon({
      //     html: `<span data-lucide="navigation-2" style="transform: rotate(${userPosition.heading}deg) scale(0.8);"></span>`,
      //     className: 'heading-label',
      //     iconSize: [20, 20],
      //     iconAnchor: [10, 10]
      //   })
      // }).addTo(map);

      // // Re-create Lucide icons for the new marker
      // if (window.lucide) {
      //   window.lucide.createIcons();
      // }

      onUpdate(userPosition, map._userMarker);
    },
    err => {
      onError('Błąd geolokalizacji: ' + err.message);
    },
    { enableHighAccuracy: true, maximumAge: 10000, timeout: 20000 }
  );
  return watchId;
}

// UI formatting utilities
export function formatCoords(obj) {
  if (!obj || obj.lat === undefined || obj.lng === undefined) return '-';
  return obj.lat.toFixed(6) + ', ' + obj.lng.toFixed(6);
}

export function formatDistance(m) {
  if (m == null) return '-';
  if (m < 1) return Math.round(m * 100) + ' cm';
  return m.toFixed(2) + ' m';
}