Путеводитель по Балтимору

[hideprofile][html]<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');

.tabs {
display: flex;
gap: 2px;
margin-bottom: 20px;
justify-content: center;
}

.tab {
padding: 12px 24px;
background-color: #22242C;
color: #fff;
border: none;
cursor: pointer;
transition: all 0.3s ease;
font-family: cinzel;
font-size: 16px;
}

.tab:hover {
background-color: #9A1E24;
}

.tab.active {
background-color: #9A1E24;
}

.map-container {
position: relative;
width: 100%;
margin: 0 auto;
display: none;
}

.map-container.active {
display: block;
}

.map-image {
width: 100%;
height: 100%;
object-fit: cover;
}

.map-point {
position: absolute;
width: 24px;
height: 24px;
background-color: #22242C;
border-radius: 50%;
cursor: pointer;
transform: translate(-50%, -50%);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
border: 2px solid #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.map-point i {
font-size: 11px;
transition: transform 0.3s ease;
color: #fff
}

#territory-map .map-point {
width: 30px;
height: 30px;
}

#territory-map .map-point i {
font-size: 18px;
}

.map-point:hover {
transform: translate(-50%, -50%) scale(1.2);
background-color: #9A1E24;
}

.map-point:hover i {
transform: scale(1.1) rotate(5deg);
}

.map-point.active {
background-color: #9A1E24;
transform: translate(-50%, -50%) scale(1.2);
z-index: 1001;
}

.map-scale {
position: absolute;
bottom: 20px;
left: 20px;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
gap: 5px;
z-index: 1000;
font-family: open sans;
}

.scale-bar {
display: flex;
align-items: flex-end;
height: 30px;
}

.scale-segment {
height: 4px;
background-color: #1C1D20;
position: relative;
}

.scale-segment:nth-child(odd) {
background-color: #1C1D20;
}

.scale-segment:nth-child(even) {
background-color: #ccc;
height: 3px;
border: 0.5px solid #1C1D20;
}

.scale-label {
position: absolute;
bottom: 8px;
transform: translateX(-50%);
font-size: 12px;
color: #333;
white-space: nowrap;
margin-left: 10px;
}

#territory-map .scale-label {
color: #ccc;
text-shadow: 2px 2px #000;
}

.info-popup {
position: absolute;
background-color: #1C1D20;
border: none;
padding: 20px;
border-radius: 4px;
box-shadow: 0 4px 15px rgba(0,0,0,0.4);
display: none;
z-index: 1000;
max-width: 300px;
animation: popupFade 0.3s ease-out;
}

@keyframes popupFade {
from {
opacity: 0;
transform: scale(0.95) translateY(10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}

.info-popup h3 {
margin-top: 0;
color: #9A1E24;
font-size: 0.9em;
margin-bottom: 1px;
text-align: center;
font-family: var(--font2);
}

.info-popup p {
margin-bottom: 15px;
color: #ccc;
line-height: 1.1;
font-size: 14px;
font-family: var(--font);
}

.info-popup img {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 4px;
margin-bottom: 15px;
}

.close-button {
position: absolute;
top: 4px;
right: 1px;
cursor: pointer;
padding: 5px;
font-size: 20px;
color: #fff;
transition: color 0.3s ease;
}

.close-button:hover {
color: #ccc;
}

.map-point .point-title {
display: none;
position: absolute;
white-space: nowrap;
left: 150%;
top: calc(100% + 2px);
transform: translateX(-70%);
padding: 4px 8px;
font-family: cinzel;
font-size: 14px;
color: #fff;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.map-point.with-label .point-title {
display: block;
}
</style>
</head>
<body>

<div class="tabs">
<button class="tab active" data-map="town">БАЛТИМОР</button>
<button class="tab" data-map="territory">ИЛЛЮЗИОН</button>
</div>

// Достопримечательности в части БАЛТИМОР
const townPoints = [
{
x: 62,
y: 63,
title: "Набережная Кантон",
description: " Пристань Лайтхаус Пойнт — это ваши ворота в парк Кантон-Уотерфронт и достопримечательности Балтимора, где вы сможете погрузиться в местную культуру, рестораны и развлечения: Бар Drift расположенный на пристани Lighthouse Point Marina, Drift — идеальное место для отдыха на любой вкус: от неторопливых вечерних посиделок до оживленных вечерних посиделок. Парк Кантон-Уотерфронт, расположенный на живописном участке между Бостон-стрит и Балтиморской гаванью. Это идеальное место для пикника и излюбленное место для наблюдения за захватывающими событиями, такими как авиашоу «Голубые ангелы» или прибытие больших парусных кораблей во Внутреннюю гавань.",
icon: "fa-anchor",
image: "https://upforme.ru/uploads/001c/54/02/9/507126.png"
},
{
x: 62,
y: 65,
title: "Lighthouse Point Marina",
description: "идеально расположенная на знаменитой набережной Кантон - это живописный уголок в Балтиморе , где сочетание красоты природы и великолепной атмосферы создает идеальное место для отдыха и развлечений. Марина располагается вдоль живописного побережья, обеспечивая потрясающие виды на воду и город. Здесь можно арендовать яхты, наслаждаться прогулками на катерах или просто расслабиться на берегу, под солнечными лучами. У моря расположены уютные кафе и рестораны, где можно насладиться местной кухней. Lighthouse Point Marina станет идеальным местом для семьи и друзей, ищущих увлекательные приключения и отдых.",
icon: "fa-ship",
image: "https://upforme.ru/uploads/001c/54/02/9/939353.png"

},
{
x: 46.5,
y: 62,
title: "Ориол-парк на Кемден-ярдс",
description: "«Ориол-парк на Кемден-ярдс» (англ. Oriole Park at Camden Yards) или просто «Кемден-ярдс» — бейсбольный стадион, расположенный в Балтиморе. Является домашним стадионом клуба Главной лиги бейсбола «Балтимор Ориолс». Вместимость стадиона «Кэмден-Ярдс» составляет 45 971 место, включая клубный уровень и верхнюю площадку.",
icon: "fa-baseball-bat-ball",
image: "https://upforme.ru/uploads/001c/54/02/9/37712.png"
},
{
x: 45.5,
y: 64,
title: "Эм-энд-ти Банк Стэдиум",
description: "«Эм-энд-ти Банк Стэдиум» (англ. M&T Bank Stadium) — футбольный стадион, расположенный в городе Балтимор, штат Мэриленд. Домашний стадион футбольной команды «Балтимор Рэйвенс». Трибуны стадиона состоят из четырёх уровней и вмещают до 71 008 человек.",
icon: "fa-football",
image: "https://upforme.ru/uploads/001c/54/02/9/604400.png"

},
{
x: 54.5,
y: 63,
title: "Harbor Point Park",
description: "Парк Пойнт, ранее известный как парк Раш-Филд, расположенный в оживленной и живописной Внутренней гавани Балтимора, служит свидетельством стремления города к возрождению городских пространств. Эта исключительная зона отдыха в настоящее время переживает масштабную реконструкцию, превращающую её в скрытый оазис, гармонично сочетающий в себе пышную зелень, современную инфраструктуру и захватывающие виды на набережную.",
icon: "fa-tree",
image: "https://upforme.ru/uploads/001c/54/02/9/354688.png"
},
{
x: 51,
y: 61,
title: "Port of Baltimore",
description: "Морской порт, расположенный в приливных бассейнах трёх рукавов реки Патапско в Балтиморе, штат Мэриленд, на верхнем северо-западном берегу Чесапикского залива Атлантического океана. Это крупнейший в Соединённых Штатах Америки портовый комплекс для специализированных грузов (судов-ролкеров) и пассажирских судов. Он находится в ведении Администрации порта Мэриленда — подразделения департамента транспорта Мэриленда",
icon: "fa-ship",
image: "https://upforme.ru/uploads/001c/54/02/9/161779.png"
},
{
x: 55,
y: 70,
title: "Baltimore Cruise Port",
description: "Круизный порт Балтимора, расположенный на реке Патапско в бухте Уайнанс-Коув, является идеальным местом для начала незабываемого путешествия. Находясь всего в 3 милях от центра Балтимора и рядом с международным аэропортом, порт предлагает удобный доступ для пассажиров со всего региона. Каждый год более полумиллиона туристов отправляются отсюда в увлекательные круизы к Багамам, Бермудам, Карибским островам, Новой Англии и вдоль атлантического побережья Канады. Близость к основным достопримечательностям города позволяет путешественникам идеально совместить изучение Балтимора с предстоящими приключениями на воде.",
icon: "fa-ship",
image: "https://upforme.ru/uploads/001c/54/02/9/157548.png"
},
{
x: 77,
y: 74,
title: "Dundalk Terminal",
description: "Морской терминал Дандолк в порту Балтимора является крупнейшим автомобильным портом региона, обладая внушительной площадью в 570 акров. Он оснащен 13 причалами и 4 контейнерными кранами, что делает его универсальным объектом для обработки генеральных грузов. Прямой железнодорожный доступ обеспечивает эффективное соединение с главными транспортными маршрутами, что повышает его конкурентоспособность и делает его важной составляющей логистических цепочек как для местных, так и для международных операций. Этот порт не только подтверждает свои лидерские позиции, но и активно способствует развитию торговли и экономики региона.",
icon: "fa-ship",
image: "https://upforme.ru/uploads/001c/54/02/9/876637.png"
},
{
x: 37,
y: 99,
title: "Международный аэропорт Балтимор-Вашингтон",
description: "Гражданский аэропорт, обслуживающий конгломерат городов Балтимор и Вашингтон, является важным транзитным узлом для коммерческих авиаперевозок. Он выступает вторичным хабом для бюджетной авиакомпании AirTran Airways и одним из ключевых пунктов назначения для крупнейшего мирового дискаунтера Southwest Airlines. Аэропорт оборудован одним современным терминалом, предлагающим широкий выбор ресторанов и магазинов, а также четыре зала ожидания, расположенные в пяти вестибюлях. Кроме того, он обеспечивает отличные возможности наземного транспорта, включая поезда MARC и Amtrak, легкорельсовый транспорт MTA, автобусы и шаттлы. Это делает его удобным местом для пассажиров, стремящихся к комфортному и быстрому передвижению в пределах региона и за его пределами.",
icon: "fa-plane",
image: "https://upforme.ru/uploads/001c/54/02/9/767574.png"
},
{
x: 52,
y: 58,
title: "Baltimore Police Department Heliport",
description: "Вертолетная площадка Департамента полиции Балтимора является ключевым элементом системы оперативного реагирования и обеспечения безопасности в округе. Авиационная группа активно занимается воздушным наблюдением за значительными критическими инцидентами, предоставляя в режиме реального времени микроволновый видеосигнал на командный пункт департамента по чрезвычайным ситуациям. Помимо стандартного патрулирования, площадка играет важную роль в проведении поисково-спасательных операций, где профессионалы авиационной группы сотрудничают с тактическими спасателями из пожарной части № 17 округа Балтимор. Это сотрудничество позволяет эффективно реагировать на чрезвычайные ситуации, обеспечивая быструю помощь и безопасность граждан.",
icon: "fa-plane",
image: "https://upforme.ru/uploads/001c/54/02/9/341787.png"
},

{
x: 35,
y: 43,
title: "Малая база Северного Синдиката",
description: "Штаб-квартира Синдиката искусно замаскирована под современные таунхаусы в тихом пригороде Балтимора. Лаконичная геометрия фасадов, панорамные окна и просторные балконы создают видимость уютного жилого комплекса. Бело-серые тона подчеркивают строгость архитектуры, а внутренние дворы и гаражи обеспечивают уединение. За неприметностью скрывается стратегический центр, где тишина улиц становится надёжным прикрытием для дел Синдиката.",
icon: "fa-masks-theater",
image: "https://upforme.ru/uploads/001c/54/02/9/187261.png"
},

{
x: 25,
y: 16,
title: "Особняк Босса Синдиката",
description: "В роскошном пригороде возвышается огромная резиденция с большой территорией, словно перенесённая из восточных сказаний. Белоснежный фасад особняка сочетает европейскую классику с утончёнными арабскими мотивами — изящные арки, тонкая лепнина и величественные колонны подчеркивают мощь и утончённость владельца. Перед входом — фонтан из чёрного камня, символ власти и вечного движения. Вокруг — строгий садовый ансамбль и ухоженные аллеи, ведущие к соседним павильонам, где расположены дома гарема Уммы Аль-Хайр. Это не только центр личной жизни, но и символ наследия, в котором восточная роскошь соединяется с дисциплиной нового мира.",
icon: "fa-crown",
image: "https://upforme.ru/uploads/001c/54/02/9/451544.png"
},
{
x: 53,
y: 55,
title: "Малая штаб квартира Восточной Империи",
description: "Небольшое трёхэтажное здание с невысоким фасадом и охраняемой территорией. Первый этаж — ресепшн и переговорная; второй — офисы руководства и секретариат; третий — стратегическая комната, архив и комната отдыха. Мини‑сервер, CCTV, скуд-контроль, автономное электропитание и маскируемая аварийная эвакуация.",
icon: "fa-masks-theater",
image: "https://upforme.ru/uploads/001c/54/02/9/873734.png"
},

{
x: 56,
y: 19,
title: "Особняк Босса Империи",
description: "Особняк босса Восточной империи величественно возвышается среди густых лесов, скрываясь за строгими аллеями и идеально подстриженными живыми изгородями. Его фасад из серого камня дышит аристократизмом и внушает уважение еще с первых шагов к массивным дверям. Круглый двор, охраняемый людьми и машинами, словно арена силы, подчеркивает статус хозяина. Эта резиденция — символ незыблемой власти, холодного расчёта и непоколебимой тени, простирающейся над всей империей.",
icon: "fa-crown",
image: "https://upforme.ru/uploads/001c/54/02/9/130679.png"
},
{
x: 54,
y: 61,
title: "Малая штаб квартира Золотой Бухты",
description: "Небольшой офис на 2–5 этаже в одном из пятнадцатиэтажном здании, замаскированный под консалтинговую фирму. Ресепшн с подставным персоналом, несколько смежных кабинетов для встреч, комната для аналитики и хранения документов. Простая система видеонаблюдения, локальная сеть с шифрованием, аварийный выход и запасные ключи. Низкая внешняя заметность, деловой антураж. Рядом располагаются с внешней стороны ресторанчики, фитнес клубы, модные бутики, внутренняя территория закрытая, есть подъезды на подземный паркинг. Внутренний дворик более обустроенный, есть бассейн, зона комфортабельного отдыха.",
icon: "fa-masks-theater",
image: "https://upforme.ru/uploads/001c/54/02/9/660747.png"
},

{
x: 97,
y: 72,
title: "Особняк Босса Золотой Бухты",
description: "Это не просто дом, а символ власти и величия на границе его владений. Особняк с террасами, которые переходят одна в другую, образуя гармоничные уровни с бассейнами, зелеными зонами и уютными лаундж-зонами. Пространство выглядит словно оазис роскоши, подсвеченными садами и бассейнами будто парит над землей. Здесь объединены холодная геометрия и роскошь без компромиссов. Каждая деталь говорит о том, что это крепость авторитета, место, где решения меняют судьбы целых территорий.",
icon: "fa-crown",
image: "https://upforme.ru/uploads/001c/54/02/9/444367.png"
},
{
x: 42,
y: 73,
title: "Малая штаб квартира Западного Картеля",
description: "Малая штаб-квартира Западного картеля разместилась в бывшем центре помощи наркозависимым в Балтиморе — выбор подчеркнут ироничным замыслом нового босса. Современное здание из стекла и камня с холодной геометрией фасада теперь скрывает переговорные залы, офисы стражей и простор для тайных встреч.",
icon: "fa-masks-theater",
image: "https://upforme.ru/uploads/001c/54/02/9/834138.png"
},

{
x: 23,
y: 59,
title: "Особняк Босса Картеля",
description: "Особняк босса мафии Западного картеля поражает своим великолепием. Особняк в стиле европейского классицизма, с утончённым интерьером, мраморными колоннами, зеркальными залами и панорамными окнами. Здание окружено идеальным ландшафтным дизайном — ровные газоны, тщательно подстриженные деревья и аллеи. Территория включает в себя площадку для гольфа, просторный спортивный корт с разметкой для игр и несколько вертолетных площадок, шикарный бассейн. Это не просто убежище, а крепость власти, где роскошь переплетается с холодным расчётом и абсолютным контролем.",
icon: "fa-crown",
image: "https://upforme.ru/uploads/001c/54/02/9/720761.png"
},

{
x: 48,
y: 60,
title: "Малая штаб квартира Иллюзиона",
description: "Комфортный офис на верхнем этаже: панорамные окна с видом на гаванью, минималистичный интерьер в тёмных тонах, стеклянные перегородки для переговорных, скрытые серверные и защищённый бокс для документации, комната отдыха, пункт контроля доступа и система видеонаблюдения.",
icon: "fa-masks-theater",
image: "https://upforme.ru/uploads/001c/54/02/9/859593.png"
},
{
x: 49,
y: 62,
title: "Апартаменты руководства Иллизион",
description: "Здание в бизнес-центре Балтимора, полностью выкупленное под нужды корпорации Иллюзион. Рабочие и жилые шикарные двухуровневые апартаменты разных площадей с панорамными окнами на гавань, элегантный интерьер в тёмных и металлических тонах, просторная гостиная, кабинет с защищённой мини‑серверной, с ванной комнатой, полностью оснащённая кухня, гардеробные, комната для переговоров, система умного дома, безопасная входная зона и персонал‑консьерж. На первом этаже небольшой ресторанчик сети Sapori d’Italia, на минус первом этаже - помещение с оснащенной прачечной, остальные минус второй третий этаж - подземный паркинг.",
icon: "fa-crown",
image: "https://upforme.ru/uploads/001c/54/02/9/583957.png"
},

/* {
x: 55,
y: 35,
title: "Piazza",
description: "Descrizione dettagliata del terzo punto di interesse.",
icon: "fa-monument",
image: "https://i.imgur.com/random3.jpg"
}, */

];

// Точки интереса ИЛЛЮЗИОН
const territoryPoints = [
{
x: 52,
y: 80,
title: "Baltimore Cruise Port",
description: "Круизный порт Балтимора, расположенный на реке Патапско в бухте Уайнанс-Коув, является идеальным местом для начала незабываемого путешествия. Находясь всего в 3 милях от центра Балтимора и рядом с международным аэропортом, порт предлагает удобный доступ для пассажиров со всего региона. Каждый год более полумиллиона туристов отправляются отсюда в увлекательные круизы к Багамам, Бермудам, Карибским островам, Новой Англии и вдоль атлантического побережья Канады. Близость к основным достопримечательностям города позволяет путешественникам идеально совместить изучение Балтимора с предстоящими приключениями на воде.",
icon: "fa-ship",
image: "https://upforme.ru/uploads/001c/54/02/9/157548.png"
},

{
x: 36,
y: 38,
title: "Port of Baltimore",
description: "Морской порт, расположенный в приливных бассейнах трёх рукавов реки Патапско в Балтиморе, штат Мэриленд, на верхнем северо-западном берегу Чесапикского залива Атлантического океана. Это крупнейший в Соединённых Штатах Америки портовый комплекс для специализированных грузов (судов-ролкеров) и пассажирских судов. Он находится в ведении Администрации порта Мэриленда — подразделения департамента транспорта Мэриленда",
icon: "fa-ship",
image: "https://upforme.ru/uploads/001c/54/02/9/161779.png"
},
{
x: 11,
y: 41,
title: "Ориол-парк на Кемден-ярдс",
description: "«Ориол-парк на Кемден-ярдс» (англ. Oriole Park at Camden Yards) или просто «Кемден-ярдс» — бейсбольный стадион, расположенный в Балтиморе. Является домашним стадионом клуба Главной лиги бейсбола «Балтимор Ориолс». Вместимость стадиона «Кэмден-Ярдс» составляет 45 971 место, включая клубный уровень и верхнюю площадку.",
icon: "fa-baseball-bat-ball",
image: "https://upforme.ru/uploads/001c/54/02/9/37712.png"
},{
x: 22,
y: 31,
title: "Малая штаб квартира Иллюзиона",
description: "Комфортный офис на верхнем этаже: панорамные окна с видом на гаванью, минималистичный интерьер в тёмных тонах, стеклянные перегородки для переговорных, скрытые серверные и защищённый бокс для документации, комната отдыха, пункт контроля доступа и система видеонаблюдения.",
icon: "fa-masks-theater",
image: "https://upforme.ru/uploads/001c/54/02/9/859593.png"
},
{
x: 26,
y: 41,
title: "Апартаменты руководства Иллизион",
description: "Здание в бизнес-центре Балтимора, полностью выкупленное под нужды корпорации Иллюзион. Рабочие и жилые шикарные двухуровневые апартаменты разных площадей с панорамными окнами на гавань, элегантный интерьер в тёмных и металлических тонах, просторная гостиная, кабинет с защищённой мини‑серверной, с ванной комнатой, полностью оснащённая кухня, гардеробные, комната для переговоров, система умного дома, безопасная входная зона и персонал‑консьерж. На первом этаже небольшой ресторанчик сети Sapori d’Italia, на минус первом этаже - помещение с оснащенной прачечной, остальные минус второй третий этаж - подземный паркинг.",
icon: "fa-crown",
image: "https://upforme.ru/uploads/001c/54/02/9/583957.png"
}, {
x: 38,
y: 20,
title: "Baltimore Police Department Heliport",
description: "Вертолетная площадка Департамента полиции Балтимора является ключевым элементом системы оперативного реагирования и обеспечения безопасности в округе. Авиационная группа активно занимается воздушным наблюдением за значительными критическими инцидентами, предоставляя в режиме реального времени микроволновый видеосигнал на командный пункт департамента по чрезвычайным ситуациям. Помимо стандартного патрулирования, площадка играет важную роль в проведении поисково-спасательных операций, где профессионалы авиационной группы сотрудничают с тактическими спасателями из пожарной части № 17 округа Балтимор. Это сотрудничество позволяет эффективно реагировать на чрезвычайные ситуации, обеспечивая быструю помощь и безопасность граждан.",
icon: "fa-plane",
image: "https://upforme.ru/uploads/001c/54/02/9/341787.png"
},{
x: 45,
y: 7,
title: "Малая штаб квартира Восточной Империи",
description: "Небольшое трёхэтажное здание с невысоким фасадом и охраняемой территорией. Первый этаж — ресепшн и переговорная; второй — офисы руководства и секретариат; третий — стратегическая комната, архив и комната отдыха. Мини‑сервер, CCTV, скуд-контроль, автономное электропитание и маскируемая аварийная эвакуация.",
icon: "fa-masks-theater",
image: "https://upforme.ru/uploads/001c/54/02/9/873734.png"
}, {
x: 53,
y: 43,
title: "Малая штаб квартира Золотой Бухты",
description: "Небольшой офис на 2–5 этаже в одном из пятнадцатиэтажном здании, замаскированный под консалтинговую фирму. Ресепшн с подставным персоналом, несколько смежных кабинетов для встреч, комната для аналитики и хранения документов. Простая система видеонаблюдения, локальная сеть с шифрованием, аварийный выход и запасные ключи. Низкая внешняя заметность, деловой антураж. Рядом располагаются с внешней стороны ресторанчики, фитнес клубы, модные бутики, внутренняя территория закрытая, есть подъезды на подземный паркинг. Внутренний дворик более обустроенный, есть бассейн, зона комфортабельного отдыха.",
icon: "fa-masks-theater",
image: "https://upforme.ru/uploads/001c/54/02/9/660747.png"
}, {
x: 54,
y: 49,
title: "Harbor Point Park",
description: "Парк Пойнт, ранее известный как парк Раш-Филд, расположенный в оживленной и живописной Внутренней гавани Балтимора, служит свидетельством стремления города к возрождению городских пространств. Эта исключительная зона отдыха в настоящее время переживает масштабную реконструкцию, превращающую её в скрытый оазис, гармонично сочетающий в себе пышную зелень, современную инфраструктуру и захватывающие виды на набережную.",
icon: "fa-tree",
image: "https://upforme.ru/uploads/001c/54/02/9/354688.png"
}, {
x: 95,
y: 50,
title: "Набережная Кантон",
description: " Пристань Лайтхаус Пойнт — это ваши ворота в парк Кантон-Уотерфронт и достопримечательности Балтимора, где вы сможете погрузиться в местную культуру, рестораны и развлечения: Бар Drift расположенный на пристани Lighthouse Point Marina, Drift — идеальное место для отдыха на любой вкус: от неторопливых вечерних посиделок до оживленных вечерних посиделок. Парк Кантон-Уотерфронт, расположенный на живописном участке между Бостон-стрит и Балтиморской гаванью. Это идеальное место для пикника и излюбленное место для наблюдения за захватывающими событиями, такими как авиашоу «Голубые ангелы» или прибытие больших парусных кораблей во Внутреннюю гавань.",
icon: "fa-anchor",
image: "https://upforme.ru/uploads/001c/54/02/9/507126.png"
}, {
x: 90,
y: 53,
title: "Lighthouse Point Marina",
description: "идеально расположенная на знаменитой набережной Кантон - это живописный уголок в Балтиморе , где сочетание красоты природы и великолепной атмосферы создает идеальное место для отдыха и развлечений. Марина располагается вдоль живописного побережья, обеспечивая потрясающие виды на воду и город. Здесь можно арендовать яхты, наслаждаться прогулками на катерах или просто расслабиться на берегу, под солнечными лучами. У моря расположены уютные кафе и рестораны, где можно насладиться местной кухней. Lighthouse Point Marina станет идеальным местом для семьи и друзей, ищущих увлекательные приключения и отдых.",
icon: "fa-ship",
image: "https://upforme.ru/uploads/001c/54/02/9/939353.png"

},
{
x: 9,
y: 53,
title: "Эм-энд-ти Банк Стэдиум",
description: "«Эм-энд-ти Банк Стэдиум» (англ. M&T Bank Stadium) — футбольный стадион, расположенный в городе Балтимор, штат Мэриленд. Домашний стадион футбольной команды «Балтимор Рэйвенс». Трибуны стадиона состоят из четырёх уровней и вмещают до 71 008 человек.",
icon: "fa-football",
image: "https://upforme.ru/uploads/001c/54/02/9/604400.png"
}

];

const mapPoints = {
'town-map': townPoints,
'territory-map': territoryPoints
};

function initializeMap(mapId) {
const mapContainer = document.getElementById(mapId);
const points = mapPoints[mapId];

// Удалить существующие точки
const existingPoints = mapContainer.querySelectorAll('.map-point');
existingPoints.forEach(point => point.remove());

// Добавить новые точки
points.forEach(point => {
const marker = createMarker(point);
mapContainer.appendChild(marker);
});
}

function handleMarkerClick(marker, point) {
if (activePoint) {
activePoint.classList.remove('active');
}

marker.classList.add('active');
activePoint = marker;

const popup = document.querySelector('.info-popup');
popup.querySelector('h3').textContent = point.title;
popup.querySelector('p').textContent = point.description;
popup.querySelector('img').src = point.image;
popup.querySelector('img').alt = point.title;

popup.style.display = 'block';
positionPopup(marker);
}

// Управление вкладками
const tabs = document.querySelectorAll('.tab');
let activePoint = null;

tabs.forEach(tab => {
tab.addEventListener('click', () => {
// Удалить класс active из всех вкладок и карт
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.map-container').forEach(m => m.classList.remove('active'));

// Добавить класс active на вкладку, которую вы щелкнули
tab.classList.add('active');

// Показать соответствующую карту
const mapType = tab.dataset.map;
const mapId = `${mapType}-map`;
document.getElementById(mapId).classList.add('active');

// Скрыть всплывающее окно
document.querySelector('.info-popup').style.display = 'none';
if (activePoint) {
activePoint.classList.remove('active');
activePoint = null;
}

// Инициализировать карту
initializeMap(mapId);
});
});

// Инициализация
initializeMap('town-map');

// Обработка закрытия всплывающего окна
const closeButton = document.querySelector('.close-button');
const popup = document.querySelector('.info-popup');

closeButton.addEventListener('click', () => {
popup.style.display = 'none';
if (activePoint) {
activePoint.classList.remove('active');
activePoint = null;
}
});

Иллюзиум

Меню навигации

Пользовательские ссылки

Объявление

Информация о пользователе

Путеводитель по Балтимору

Сообщений 1 страница 1 из 1

Поделиться12025-07-28 20:39:39