Поиск...
';
results.style.display = 'block';
-
try {
const url = `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(query)}&format=json&limit=6&countrycodes=ru&accept-language=ru`;
const resp = await fetch(url, { headers: { 'Accept-Language': 'ru' } });
const data = await resp.json();
-
if (!data.length) {
results.innerHTML = '
+ return `
`;
@@ -372,13 +340,12 @@ async function doSearch(query) {
}
function selectSearchResult(lat, lon, name) {
- const map = window._map;
- map.flyTo({ center: [lon, lat], zoom: 13, duration: 800 });
+ window._map.flyTo({ center: [lon, lat], zoom: 13, duration: 800 });
document.getElementById('search-results').style.display = 'none';
document.getElementById('search-input').value = name;
}
-// ─── Линейка ────────────────────────────────────────────────────────────────────────────────
+// ─── Линейка ──────────────────────────────────────────────────────────────────
let rulerMode = false;
let rulerPoints = [];
let rulerMarkers = [];
@@ -389,12 +356,10 @@ function toggleRuler() {
const btn = document.getElementById('btn-ruler');
if (rulerMode) {
btn.classList.add('active');
- btn.title = 'Линейка активна (кликай точки, двойной клик — завершить)';
window._map.getCanvas().style.cursor = 'crosshair';
clearRuler();
} else {
btn.classList.remove('active');
- btn.title = 'Измерить расстояние';
window._map.getCanvas().style.cursor = '';
clearRuler();
}
@@ -426,51 +391,41 @@ function updateRulerLine() {
} else {
map.addSource('ruler', { type: 'geojson', data: geojson });
map.addLayer({
- id: 'ruler-line',
- type: 'line',
- source: 'ruler',
- paint: {
- 'line-color': '#0088ff',
- 'line-width': 2,
- 'line-dasharray': [4, 2],
- 'line-opacity': 0.9,
- }
+ id: 'ruler-line', type: 'line', source: 'ruler',
+ paint: { 'line-color': '#0088ff', 'line-width': 2, 'line-dasharray': [4, 2], 'line-opacity': 0.9 }
});
}
}
-function addRulerPoint(lngLat, isLast) {
+function addRulerPoint(lngLat) {
const map = window._map;
const pt = [lngLat.lng, lngLat.lat];
const idx = rulerPoints.length;
rulerPoints.push(pt);
- // Считаем расстояние от предыдущей точки
if (rulerPoints.length > 1) {
- const segDist = haversineKm(rulerPoints[rulerPoints.length - 2], pt);
- rulerTotal += segDist;
+ rulerTotal += haversineKm(rulerPoints[rulerPoints.length - 2], pt);
}
- // Подпись с накопленным расстоянием
const label = rulerPoints.length === 1 ? '0 м' :
rulerTotal >= 1 ? rulerTotal.toFixed(1) + ' км' : Math.round(rulerTotal * 1000) + ' м';
- // Кружок точно на координатах
- const el = document.createElement('div');
- el.style.cssText = 'position:relative;width:10px;height:10px;';
- el.innerHTML = `
-
-
- ${label}
- ✕
-
- `;
-
- const marker = new maplibregl.Marker({ element: el, anchor: 'center' })
+ // Кружок — anchor: center, строго 10×10
+ const dot = document.createElement('div');
+ dot.style.cssText = 'width:10px;height:10px;background:#0088ff;border:2px solid #fff;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,0.3);';
+ const dotMarker = new maplibregl.Marker({ element: dot, anchor: 'center' })
.setLngLat([lngLat.lng, lngLat.lat])
.addTo(map);
- rulerMarkers.push(marker);
+ // Плашка — отдельный маркер, anchor: center, offset вверх на 20px
+ const labelEl = document.createElement('div');
+ labelEl.style.cssText = 'display:inline-flex;align-items:center;gap:3px;background:rgba(0,0,0,0.75);color:#fff;font-size:11px;font-weight:600;padding:2px 6px;border-radius:3px;white-space:nowrap;';
+ labelEl.innerHTML = `
${label}✕`;
+ const labelMarker = new maplibregl.Marker({ element: labelEl, anchor: 'center', offset: [0, -20] })
+ .setLngLat([lngLat.lng, lngLat.lat])
+ .addTo(map);
+
+ rulerMarkers.push(dotMarker, labelMarker);
updateRulerLine();
}
@@ -480,7 +435,6 @@ function removeRulerPoint(idx) {
rulerMarkers.forEach(m => m.remove());
rulerMarkers = [];
rulerTotal = 0;
- // Пересоздаём все маркеры
const pts = [...rulerPoints];
rulerPoints = [];
pts.forEach(pt => addRulerPoint({ lng: pt[0], lat: pt[1] }));
@@ -489,13 +443,11 @@ function removeRulerPoint(idx) {
function initRulerClicks(map) {
map.on('click', (e) => {
if (!rulerMode) return;
- addRulerPoint(e.lngLat, false);
+ addRulerPoint(e.lngLat);
});
-
map.on('dblclick', (e) => {
if (!rulerMode) return;
e.preventDefault();
- // Двойной клик = завершить измерение
toggleRuler();
});
}