59 lines
4.2 KiB
PHP
59 lines
4.2 KiB
PHP
<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>
|
|
</div>
|
|
</section>
|
|
<script>
|
|
(() => {
|
|
const mapElement = document.getElementById('irkutsk-route-map');
|
|
if (!mapElement || typeof L === 'undefined') return;
|
|
const stops = [
|
|
['Сквер Кирова',52.288050,104.281500],['Правительство Иркутской области',52.290177,104.280392],
|
|
['Спасская церковь',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.275504,104.277195],
|
|
['Остров Юность',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.fr/hot/{z}/{x}/{y}.png',{maxZoom:19,attribution:'© OpenStreetMap contributors, Tiles style by HOT'}).addTo(routeMap);
|
|
const coordinates = stops.map(([,lat,lng]) => [lat,lng]);
|
|
const routeStyle = {color:'#d8a653',weight:5,opacity:.95,lineCap:'round',lineJoin:'round'};
|
|
const directRoute = L.polyline(coordinates,{...routeStyle,dashArray:'8 8',opacity:.55}).addTo(routeMap);
|
|
const walkingCoordinates = coordinates.map(([lat,lng]) => `${lng},${lat}`).join(';');
|
|
fetch(`https://routing.openstreetmap.de/routed-foot/route/v1/driving/${walkingCoordinates}?overview=full&geometries=geojson&steps=false`)
|
|
.then(response => response.ok ? response.json() : Promise.reject(new Error('Walking route unavailable')))
|
|
.then(data => {
|
|
const route = data.routes?.[0]?.geometry;
|
|
if (!route) return;
|
|
routeMap.removeLayer(directRoute);
|
|
L.geoJSON(route,{style:routeStyle}).addTo(routeMap);
|
|
})
|
|
.catch(() => {});
|
|
const bounds = L.latLngBounds(coordinates);
|
|
stops.forEach(([title,lat,lng],index) => {
|
|
if(index == 0 || index == 23){
|
|
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>
|