Заменить карту маршрута на OpenStreetMap
This commit is contained in:
@@ -6,5 +6,7 @@
|
||||
<title>Иркутск — что нужно знать в поездке</title>
|
||||
<link rel="preconnect" href="https://unpkg.com">
|
||||
<link rel="preload" as="image" href="assets/images/image-ef4cae8a5d1e.webp" fetchpriority="high">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="">
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
|
||||
<link rel="stylesheet" href="assets/site.css">
|
||||
</head>
|
||||
|
||||
+46
-2
@@ -1,2 +1,46 @@
|
||||
<section class="route-wrap" id="route"><div class="page"><div class="page-title"><h3>Карта пешеходного маршрута</h3><p>Маршрут построен в Яндекс Картах в режиме «пешком»: исторический центр, Нижняя набережная, Карла Маркса, Александр III, острова Юность и Конный и выход к Бабру в 130-м квартале.</p></div><div class="map-card"><div class="route-map-frame"><iframe src="https://yandex.ru/map-widget/v1/?mode=routes&rtext=52.288050%2C104.281500~52.291140%2C104.281272~52.292265%2C104.282609~52.293444%2C104.286194~52.291389%2C104.297500~52.287300%2C104.290000~52.282233%2C104.284712~52.278972%2C104.281083~52.276685%2C104.277768~52.275489%2C104.277109~52.273500%2C104.279500~52.272800%2C104.278500~52.273398%2C104.274517~52.271900%2C104.273900~52.270200%2C104.274800~52.269350%2C104.277000~52.269373%2C104.278123~52.268550%2C104.279250~52.268300%2C104.278150~52.269350%2C104.277000~52.270900%2C104.277700~52.272800%2C104.278500~52.273850%2C104.279650~52.274850%2C104.282050~52.275550%2C104.284250~52.276000%2C104.286483&rtt=pd&z=14&l=map" loading="eager" allowfullscreen="true" title="Пешеходный маршрут по Иркутску"></iframe></div></div></div></section>
|
||||
|
||||
<section class="route-wrap" id="route">
|
||||
<div class="page">
|
||||
<div class="page-title">
|
||||
<h3>Карта пешеходного маршрута</h3>
|
||||
<p>24 остановки по историческому центру Иркутска: от Сквера Кирова через Карла Маркса и набережную Ангары до 130-го квартала.</p>
|
||||
</div>
|
||||
<div class="map-card">
|
||||
<div class="route-map-frame">
|
||||
<div id="irkutsk-route-map" role="application" aria-label="Карта пешеходного маршрута по Иркутску"></div>
|
||||
</div>
|
||||
<div class="map-note"><span class="map-note-line"></span><span>Номера на карте совпадают с порядком остановок ниже</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<script>
|
||||
(() => {
|
||||
const mapElement = document.getElementById('irkutsk-route-map');
|
||||
if (!mapElement || typeof L === 'undefined') return;
|
||||
const stops = [
|
||||
['Сквер Кирова',52.288050,104.281500],['Здание правительства — «Серый дом»',52.291140,104.281272],
|
||||
['Спасская церковь',52.292265,104.282609],['Памятник Петру и Февронии',52.293444,104.286194],
|
||||
['Собор Богоявления',52.291389,104.297500],['Польский костёл',52.287300,104.290000],
|
||||
['Нижняя набережная и памятник Якову Похабову',52.282233,104.284712],['Московские ворота',52.278972,104.281083],
|
||||
['Русско-Азиатский банк',52.276685,104.277768],['Дом архитектора В. А. Рассушина',52.275489,104.277109],
|
||||
['Драматический театр им. Н. П. Охлопкова',52.273500,104.279500],['Книжный магазин и типография Макушина и Посохина',52.272800,104.278500],
|
||||
['Усадьба С. Н. Верхоленцева',52.273398,104.274517],['Сибирский торговый банк',52.271900,104.273900],
|
||||
['Театр-иллюзион Яджоглу',52.270200,104.274800],['Дом Воллернера',52.269350,104.277000],
|
||||
['Торговый дом фирмы «Треугольник»',52.269373,104.278123],['Мануфактурный магазин Второвых',52.268550,104.279250],
|
||||
['Типография Восточно-Сибирской железной дороги',52.268300,104.278150],['Памятник Александру III',52.269350,104.277000],
|
||||
['Остров Юность',52.270900,104.277700],['Остров Конный',52.272800,104.278500],
|
||||
['130-й квартал',52.273850,104.279650],['Скульптура Бабра',52.276000,104.286483]
|
||||
];
|
||||
const routeMap = L.map(mapElement,{scrollWheelZoom:false,zoomControl:false});
|
||||
L.control.zoom({position:'bottomright'}).addTo(routeMap);
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:19,attribution:'© OpenStreetMap contributors'}).addTo(routeMap);
|
||||
const coordinates = stops.map(([,lat,lng]) => [lat,lng]);
|
||||
L.polyline(coordinates,{color:'#d8a653',weight:5,opacity:.9,lineCap:'round',lineJoin:'round'}).addTo(routeMap);
|
||||
const bounds = L.latLngBounds(coordinates);
|
||||
stops.forEach(([title,lat,lng],index) => {
|
||||
const marker = L.marker([lat,lng],{icon:L.divIcon({className:'route-marker-wrap',html:`<span class="route-marker">${index+1}</span>`,iconSize:[36,36],iconAnchor:[18,18]})}).addTo(routeMap);
|
||||
marker.bindPopup(`<strong>${index+1}. ${title}</strong><br><span>Пешеходный маршрут по Иркутску</span>`);
|
||||
});
|
||||
routeMap.fitBounds(bounds,{padding:[28,28]});
|
||||
window.addEventListener('resize',()=>routeMap.invalidateSize(),{passive:true});
|
||||
})();
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user