diff --git a/tasks/enduro-trails/prototype/static/app.js b/tasks/enduro-trails/prototype/static/app.js index 7e5e83c..ebd9530 100644 --- a/tasks/enduro-trails/prototype/static/app.js +++ b/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(`${label}`); + // Кастомный маркер с подписью и крестиком + const el = document.createElement('div'); + el.style.cssText = 'position:relative;display:flex;flex-direction:column;align-items:center;cursor:default'; + el.innerHTML = ` +
+ ${label} + +
+
+ `; - 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;