auto-sync: 2026-05-04 00:30:01

tasks/enduro-trails/prototype/static/app.js

@@ -442,36 +442,50 @@ function updateRulerLine() {
 function addRulerPoint(lngLat, isLast) {
   const map = window._map;
   const pt = [lngLat.lng, lngLat.lat];
+  const idx = rulerPoints.length;
   rulerPoints.push(pt);
 
   // Считаем расстояние от предыдущей точки
-  let segDist = 0;
   if (rulerPoints.length > 1) {
-    segDist = haversineKm(rulerPoints[rulerPoints.length - 2], pt);
+    const segDist = haversineKm(rulerPoints[rulerPoints.length - 2], pt);
     rulerTotal += segDist;
   }
 
-  // Маркер с подписью
-  const el = document.createElement('div');
-  el.style.cssText = 'background:#0088ff;border:2px solid #fff;border-radius:50%;width:10px;height:10px;box-shadow:0 0 4px rgba(0,0,0,0.3)';
-
   // Подпись с накопленным расстоянием
-  const label = rulerPoints.length === 1 ? '0' :
+  const label = rulerPoints.length === 1 ? '0 м' :
     rulerTotal >= 1 ? rulerTotal.toFixed(1) + ' км' : Math.round(rulerTotal * 1000) + ' м';
 
-  const popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false })
+  // Кастомный маркер с подписью и крестиком
-    .setHTML(`<span style="font-size:12px;font-weight:600;color:#0088ff">${label}</span>`);
+  const el = document.createElement('div');
+  el.style.cssText = 'position:relative;display:flex;flex-direction:column;align-items:center;cursor:default';
+  el.innerHTML = `
+    <div style="display:flex;align-items:center;gap:3px;background:rgba(0,0,0,0.7);color:#fff;font-size:11px;font-weight:600;padding:2px 5px;border-radius:3px;margin-bottom:3px;white-space:nowrap">
+      <span class="ruler-label">${label}</span>
+      <span style="cursor:pointer;opacity:0.7;font-size:10px;line-height:1" onclick="removeRulerPoint(${idx})" title="Удалить точку">✕</span>
+    </div>
+    <div style="background:#0088ff;border:2px solid #fff;border-radius:50%;width:10px;height:10px;box-shadow:0 0 4px rgba(0,0,0,0.3);flex-shrink:0"></div>
+  `;
 
-  const marker = new maplibregl.Marker({ element: el })
+  const marker = new maplibregl.Marker({ element: el, anchor: 'bottom' })
     .setLngLat([lngLat.lng, lngLat.lat])
-    .setPopup(popup)
     .addTo(map);
-  marker.togglePopup();
   rulerMarkers.push(marker);
 
   updateRulerLine();
 }
 
+function removeRulerPoint(idx) {
+  if (idx < 0 || idx >= rulerPoints.length) return;
+  rulerPoints.splice(idx, 1);
+  rulerMarkers.forEach(m => m.remove());
+  rulerMarkers = [];
+  rulerTotal = 0;
+  // Пересоздаём все маркеры
+  const pts = [...rulerPoints];
+  rulerPoints = [];
+  pts.forEach(pt => addRulerPoint({ lng: pt[0], lat: pt[1] }));
+}
+
 function initRulerClicks(map) {
   map.on('click', (e) => {
     if (!rulerMode) return;