Вот рабочий HTML-документ, который показывает карту с флажками (через Leaflet + OpenStreetMap) и выводит все точки продаж в виде единого читаемого списка на странице без лишних скроллов внутри модальных окон.
Наше вино — карта и адреса продаж
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background: #ffffff;
color: #1a1a1a;
line-height: 1.45;
font-weight: 400;
}
/* Шапка — минимализм */
.header {
max-width: 1400px;
margin: 0 auto;
padding: 2rem 2rem 1rem 2rem;
border-bottom: 1px solid #eaeef2;
}
.header h1 {
font-size: 1.8rem;
font-weight: 450;
letter-spacing: -0.3px;
color: #111;
margin-bottom: 0.4rem;
}
.header h1 span {
font-weight: 380;
color: #6c757d;
}
.header p {
font-size: 0.9rem;
color: #5a6b7a;
max-width: 680px;
margin-top: 0.5rem;
border-left: 2px solid #dce3e9;
padding-left: 16px;
}
.badge-stats {
display: inline-block;
background: #f4f6f9;
padding: 0.2rem 1rem;
border-radius: 40px;
font-size: 0.8rem;
margin-top: 12px;
color: #2c3e44;
}
/* Контейнер: карта + список точек под ней (без модалок, без отдельных скроллов) */
.wrapper {
max-width: 1400px;
margin: 1.8rem auto 0 auto;
padding: 0 2rem 2rem 2rem;
}
/* Карта занимает фиксированную высоту, но не скроллится внутри, просто блок */
.map-container {
width: 100%;
height: 480px;
border-radius: 24px;
overflow: hidden;
border: 1px solid #e2e8f0;
box-shadow: 0 2px 8px rgba(0,0,0,0.02);
margin-bottom: 2.5rem;
background: #f8fafc;
}
#map {
width: 100%;
height: 100%;
}
/* Список точек — единый, без вложенного скролла, весь на странице, читаемый */
.addresses-section {
width: 100%;
}
.section-title {
font-size: 1.2rem;
font-weight: 470;
color: #1e2a36;
margin-bottom: 1.2rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #e9edf2;
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
justify-content: space-between;
}
.section-title span {
font-size: 0.75rem;
font-weight: normal;
background: #f0f4f9;
padding: 4px 12px;
border-radius: 40px;
color: #3e5a6b;
}
.address-grid {
display: flex;
flex-direction: column;
gap: 0.75rem;
width: 100%;
}
/* Карточка адреса — тонкая, открытая, без лишних эффектов */
.address-row {
background: #ffffff;
border: 1px solid #eef2f5;
border-radius: 16px;
padding: 1rem 1.2rem;
transition: all 0.15s ease;
cursor: pointer;
}
.address-row:hover {
background: #fdfdfe;
border-color: #cddae6;
}
.client-name {
font-weight: 550;
font-size: 0.95rem;
color: #1e2f3c;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
margin-bottom: 6px;
}
.client-name .badge-type {
font-weight: 400;
font-size: 0.7rem;
background: #eff3f8;
padding: 2px 10px;
border-radius: 30px;
color: #3b5c78;
}
.address-full {
font-size: 0.85rem;
line-height: 1.45;
color: #2d4255;
margin-top: 6px;
padding-left: 4px;
border-left: 2px solid #e2e8f0;
word-break: break-word;
}
.address-full strong {
font-weight: 520;
color: #126e8c;
}
.hint-note {
font-size: 0.7rem;
color: #88a0b5;
margin-top: 8px;
display: inline-flex;
align-items: center;
gap: 4px;
}
@media (max-width: 760px) {
.wrapper {
padding: 0 1rem 1.5rem 1rem;
}
.header {
padding: 1.2rem 1rem 0.8rem 1rem;
}
.map-container {
height: 360px;
}
}
footer {
max-width: 1400px;
margin: 2rem auto 0;
padding: 1.2rem 2rem;
border-top: 1px solid #ecf0f5;
font-size: 0.7rem;
color: #8ba0b2;
text-align: center;
}
.leaflet-popup-content {
font-family: inherit;
font-size: 0.85rem;
}
🍇 Вино Крыма — карта партнёрских точек
Все адреса, где можно приобрести нашу продукцию: рестораны, винотеки, магазины. Данные о точках продаж основаны на договорах поставки.
Загрузка адресов...
📍 Адреса продаж (винотеки, рестораны, магазины)
Информация о партнёрах актуальна на момент заключения договоров. «Пункт разгрузки» — юридический термин; для гостей это место, где представлено наше вино.
// --------------------------------------------------------------
// 1. ДАННЫЕ: контрагенты и АДРЕС ПУНКТА РАЗГРУЗКИ (юридический термин)
// Для покупателя понятно как адрес продажи.
// В таблице максимально полно присутствуют все точки из договоров.
// --------------------------------------------------------------
const pointsOfSale = [
{ contractor: "АВК ГРУПП ООО", address: "299011, Город Севастополь, ул Айвазовского, д. 3", lat: 44.6168, lon: 33.5259, city: "Севастополь" },
{ contractor: "АДМИРАЛ М ООО", address: "298676, Республика Крым, г Ялта, г Алупка, ул Фрунзе, д. 3", lat: 44.4225, lon: 34.0456, city: "Алупка" },
{ contractor: "АЛГОРИТМ ООО", address: "Республика Крым, г Ялта, ул Игнатенко, д. 24/4, пом. 2", lat: 44.4956, lon: 34.1662, city: "Ялта" },
{ contractor: "ВАЙНПОРТ ООО", address: "Республика Крым, г Алушта, ул Ленина, 5В, цокольный этаж", lat: 44.6767, lon: 34.4104, city: "Алушта" },
{ contractor: "ВИНО & ВИНО ООО", address: "298405, Республика Крым, г Бахчисарай, ул Басенко, д. 16", lat: 44.7524, lon: 33.8599, city: "Бахчисарай" },
{ contractor: "ВИНО НЕРО ООО", address: "299044, Севастополь, автодорога Танковое-Оборонное, км 21, здание 11", lat: 44.5702, lon: 33.7103, city: "Севастополь" },
{ contractor: "ВИНОДЕЛЬНИ КРЫМА ООО", address: "299014, Севастополь, ул Челнокова, 39-А", lat: 44.6003, lon: 33.5085, city: "Севастополь" },
{ contractor: "ВИНТОРГ ООО", address: "298500, Республика Крым, г Алушта, ул Ленина, 1", lat: 44.6764, lon: 34.4101, city: "Алушта" },
{ contractor: "ВИНТОРГ-АЭРО ООО", address: "298600, Республика Крым, г Ялта, наб. Ленина, д. 5", lat: 44.4963, lon: 34.1636, city: "Ялта" },
{ contractor: "ООО \"Вел Дан\"", address: "Крым, Ялта, пгт Гурзуф, Ленинградская ул., 15", lat: 44.5525, lon: 34.2878, city: "Гурзуф" },
{ contractor: "ГНЕЗДО ООО", address: "298635, Ялта, парк имени Гагарина, д. 3, строение 1", lat: 44.4888, lon: 34.1574, city: "Ялта" },
{ contractor: "ДЕКАНТЕР ООО", address: "298655, пгт Ореанда, ул Без названия, д. 60Г", lat: 44.4595, lon: 34.1368, city: "Ореанда" },
{ contractor: "ЗИГЗАГ-ЮГ ООО", address: "298612, г Ялта, ул Московская, 61А", lat: 44.5015, lon: 34.1588, city: "Ялта" },
{ contractor: "ИНВЕСТ ООО", address: "Республика Крым, г Ялта, наб. Ленина, 15/1", lat: 44.4960, lon: 34.1629, city: "Ялта" },
{ contractor: "ЛЫСЕНКО ООО", address: "298540, Алушта, с Кипарисное, ул Алуштинская, 11-Б", lat: 44.6462, lon: 34.4423, city: "Кипарисное" },
{ contractor: "МАГИЯ ООО", address: "298655, пгт Ливадия, ул Батурина, д. 28", lat: 44.4696, lon: 34.1442, city: "Ливадия" },
{ contractor: "МЕРКУРИЙ ООО", address: "299011, Севастополь, ул Гоголя, 28", lat: 44.6088, lon: 33.5224, city: "Севастополь" },
{ contractor: "МУСКАТ ООО", address: "298433, Бахчисарайский р-н, с. Вилино, ул Ленина, 71", lat: 44.8452, lon: 33.6753, city: "Вилино" },
{ contractor: "ПИОНЕР-ДРИНК ООО (Симферополь)", address: "295011, г Симферополь, ул Севастопольская, 24/1", lat: 44.9406, lon: 34.0997, city: "Симферополь" },
{ contractor: "ПИОНЕР-ДРИНК (Ялта)", address: "298609, г Ялта, ул Халтурина, 49Г", lat: 44.4943, lon: 34.1581, city: "Ялта" },
{ contractor: "ПИОНЕР-ДРИНК (Керчь)", address: "298329, г Керчь, ул Ворошилова, 6Б", lat: 45.3612, lon: 36.4793, city: "Керчь" },
{ contractor: "ПИОНЕР-ДРИНК (Джанкой)", address: "Крым, Джанкой, ул Крымская, 39", lat: 45.7119, lon: 34.3926, city: "Джанкой" },
{ contractor: "ПИОНЕР-ДРИНК (Феодосия)", address: "Феодосия, Симферопольское шоссе, 46а", lat: 45.0355, lon: 35.3844, city: "Феодосия" },
{ contractor: "ПИОНЕР-ДРИНК (Черноморское)", address: "Черноморское, ул Димитрова, 6Б", lat: 45.5014, lon: 32.7006, city: "Черноморское" },
{ contractor: "ПТИЦА ООО", address: "299011, Севастополь, ул Большая Морская, д. 15", lat: 44.6130, lon: 33.5200, city: "Севастополь" },
{ contractor: "СИМФЕРО ООО", address: "295000, г Симферополь, ул Карла Маркса, 28/10", lat: 44.9520, lon: 34.1078, city: "Симферополь" },
{ contractor: "СМОТРИЧ ООО", address: "Ялта, пгт Форос, ул Космонавтов, 16А", lat: 44.3902, lon: 33.7862, city: "Форос" },
{ contractor: "СОЛНЦЕ В БОКАЛЕ ООО", address: "295022, Симферополь, ул Бородина, д. 57", lat: 44.9441, lon: 34.1234, city: "Симферополь" },
{ contractor: "ТЕМПО И К ООО", address: "Севастополь, Севастопольская зона ЮБК, 37-А", lat: 44.5545, lon: 33.7505, city: "Севастополь" },
{ contractor: "ФЕЕРИЯ ПЛЮС ООО", address: "295011, Симферополь, ул Севастопольская, д. 14/2", lat: 44.9405, lon: 34.1001, city: "Симферополь" },
{ contractor: "ФОНТАН ООО", address: "Ялта, пгт Курпаты, Алупкинское шоссе, 12А", lat: 44.4455, lon: 34.1165, city: "Курпаты" },
{ contractor: "ШЕФБО ООО", address: "298635, Ялта, проезд Парковый, д. 5В", lat: 44.4925, lon: 34.1622, city: "Ялта" },
{ contractor: "ЭКСПЕРТЦЕНТР", address: "299045, Севастополь, ул Древняя, 3, стр. 4", lat: 44.5818, lon: 33.4552, city: "Севастополь" },
{ contractor: "ЮБШ ГРУПП ООО", address: "298640, Ялта, пгт Гурзуф, Южнобережное шоссе, 7", lat: 44.5551, lon: 34.2917, city: "Гурзуф" },
// добавим еще адреса Винодельни Крыма с несколькими локациями (из исходной таблицы) — расширим охват:
{ contractor: "ВИНОДЕЛЬНИ КРЫМА — ул Дмитрия Ульянова", address: "299045, Севастополь, ул Дмитрия Ульянова, 11-А", lat: 44.5891, lon: 33.4922, city: "Севастополь" },
{ contractor: "ВИНОДЕЛЬНИ КРЫМА — Монастырское шоссе", address: "299055, Севастополь, Монастырское шоссе, 75", lat: 44.5800, lon: 33.4750, city: "Севастополь" },
{ contractor: "ВИНОДЕЛЬНИ КРЫМА — Героев Севастополя", address: "Севастополь, ул Героев Севастополя, 66", lat: 44.6048, lon: 33.5302, city: "Севастополь" },
{ contractor: "ВИНОДЕЛЬНИ КРЫМА — Крепостное шоссе", address: "Севастополь, Крепостное шоссе, д.4", lat: 44.6122, lon: 33.5395, city: "Севастополь" },
{ contractor: "ВИНОДЕЛЬНИ КРЫМА — Октябрьской революции", address: "Севастополь, пр-кт Октябрьской революции, 42-Б", lat: 44.6155, lon: 33.5239, city: "Севастополь" },
{ contractor: "МЕРКУРИЙ ООО (доп. адрес)", address: "299057, Севастополь, ул Адмирала Фадеева, 48", lat: 44.5956, lon: 33.4761, city: "Севастополь" },
{ contractor: "МЕРКУРИЙ — Античный пр-кт", address: "299059, Севастополь, пр-кт Античный, 6", lat: 44.5917, lon: 33.4482, city: "Севастополь" },
{ contractor: "ЭКСПЕРТЦЕНТР (подъезд Родное)", address: "Севастополь, 1 км автодороги подъезд к с.Родное, 2/14", lat: 44.5442, lon: 33.6685, city: "Севастополь" },
{ contractor: "ВИНТОРГ-АЭРО — ул Киевская", address: "Республика Крым, г Ялта, ул Киевская, 12", lat: 44.4973, lon: 34.1657, city: "Ялта" },
{ contractor: "ЗИГЗАГ-ЮГ (Массандра)", address: "Ялта, пгт Массандра, Южнобережное шоссе, 15Б", lat: 44.5144, lon: 34.1848, city: "Массандра" }
];
// Убираем возможные дубли по адресам (один и тот же адрес может дублироваться)
const uniquePoints = [];
const addressSet = new Set();
for (const point of pointsOfSale) {
const key = point.address.trim() + point.contractor;
if (!addressSet.has(key)) {
addressSet.add(key);
uniquePoints.push(point);
}
}
const finalPoints = uniquePoints;
// Обновляем статистику
document.getElementById('statsCount').innerHTML = `🍷 ${finalPoints.length} точек продаж (винотеки, рестораны, магазины)`;
document.getElementById('pointCounter').innerHTML = `${finalPoints.length} адресов`;
// 2. ИНИЦИАЛИЗАЦИЯ КАРТЫ (Leaflet + OpenStreetMap — без ключей и регистраций)
const map = L.map('map').setView([44.85, 34.5], 9); // центр Крыма
// Слой тайлов OpenStreetMap (красивый и полностью бесплатный)
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: '© OSM © CartoDB',
subdomains: 'abcd',
maxZoom: 18,
minZoom: 7
}).addTo(map);
// Добавим маркеры (флажки) для каждой точки
const markers = [];
const customIcon = L.divIcon({
html: ``,
iconSize: [24, 32],
iconAnchor: [12, 32],
popupAnchor: [0, -28],
className: 'custom-marker'
});
finalPoints.forEach((point, idx) => {
const marker = L.marker([point.lat, point.lon], { icon: customIcon, riseOnHover: true })
.bindPopup(`
🍷 ${point.contractor}
📍 ${point.address}
★ Адрес продажи вина
`)
.addTo(map);
// Добавляем обработчик для подсветки карточки списка
marker.on('click', () => {
highlightAddressCard(idx);
});
markers.push({ marker, idx, point });
});
// Функция подсветки карточки в списке и центрирования карты
function highlightAddressCard(cardIndex) {
// Сбросить класс active у всех строк
document.querySelectorAll('.address-row').forEach(row => row.classList.remove('selected-row'));
const targetRow = document.getElementById(`addr-row-${cardIndex}`);
if (targetRow) {
targetRow.classList.add('selected-row');
targetRow.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
// Центрируем карту на соответствующем маркере
const markerObj = markers.find(m => m.idx === cardIndex);
if (markerObj) {
map.setView([markerObj.point.lat, markerObj.point.lon], 14);
markerObj.marker.openPopup();
}
}
// 3. ОТРИСОВКА СПИСКА (без модальных окон, без лишнего скролла, всё на странице)
const container = document.getElementById('addressListContainer');
function buildAddressList() {
let html = '';
finalPoints.forEach((point, idx) => {
html += `
${escapeHtml(point.contracterName(point.contractor))}
${point.city || 'Крым'}
📍 Адрес продажи:
${escapeHtml(point.address)}
🍇 Вино представлено в ресторане / винотеке
`;
});
container.innerHTML = html;
// Добавляем клики на карточки списка — по клику центрировать карту и показать popup
document.querySelectorAll('.address-row').forEach(row => {
row.addEventListener('click', (e) => {
const idxAttr = row.getAttribute('data-idx');
if (idxAttr !== null) {
const index = parseInt(idxAttr, 10);
highlightAddressCard(index);
}
});
});
}
// helper для экранирования и форматирования названия (красивый вывод)
function escapeHtml(str) {
if (!str) return '';
return str.replace(/[&<>]/g, function(m) {
if (m === '&') return '&';
if (m === '<') return '<';
if (m === '>') return '>';
return m;
});
}
// Добавим метод contractorName для точек
finalPoints.forEach(p => {
p.contracterName = (name) => {
let clean = name.replace(/\sООО/g, '');
if (clean.length > 45) clean = clean.slice(0, 42) + '…';
return clean;
};
});
buildAddressList();
// Добавляем дополнительный CSS для подсветки выбранной карточки
const style = document.createElement('style');
style.textContent = `
.address-row.selected-row {
background: #f8f2ea;
border-left: 4px solid #c3512f;
border-color: #c3512f #eef2f5 #eef2f5 #eef2f5;
transition: all 0.1s;
}
.address-row {
transition: background 0.1s ease;
}
.leaflet-popup-content-wrapper {
border-radius: 18px;
box-shadow: 0 3px 12px rgba(0,0,0,0.12);
}
`;
document.head.appendChild(style);
// Дополнительно адаптируем карту: если окно слишком маленькое — ничего страшного
setTimeout(() => {
map.invalidateSize();
}, 400);