<link rel="stylesheet" href="/resources/assets/leaflet.css" /> <script src="/resources/assets/leaflet/js/thereach/leaflet.js"></script> <link rel="stylesheet" href="/resources/assets/leaflet/Control.FullScreen.css" /> <script src="/resources/assets/leaflet/Control.FullScreen.js"></script>
<script>
const bounds = [ [0, 1280], // Southwest coordinates [1280, 0] // Northeast coordinates ];
const dungeonIcon = L.icon({ iconUrl: '/resources/assets/leaflet/icons/dungeon.png', // Замените на свой URL iconSize: [48, 48], // Размеры иконки iconAnchor: [22, 14], // Точка привязки иконки });
const areafinterestIcon = L.icon({ iconUrl: '/resources/assets/leaflet/icons/poi_areaofinterest_complete.png', // Замените на свой URL iconSize: [48, 48], // Размеры иконки iconAnchor: [22, 14], // Точка привязки иконки });
const houseIcon = L.icon({ iconUrl: '/resources/assets/leaflet/icons/poi_group_house_owned.png', // Замените на свой URL iconSize: [48, 48], // Размеры иконки iconAnchor: [22, 14], // Точка привязки иконки });
const arenaIcon = L.icon({ iconUrl: '/resources/assets/leaflet/icons/poi_solotrial_complete.png', // Замените на свой URL iconSize: [48, 48], // Размеры иконки iconAnchor: [22, 14], // Точка привязки иконки });
const campfireIcon = L.icon({ iconUrl: '/resources/assets/leaflet/icons/poi_camp_complete.png', // Замените на свой URL iconSize: [48, 48], // Размеры иконки iconAnchor: [22, 14], // Точка привязки иконки });
const map = L.map('map', { crs: L.CRS.Simple, minZoom: -1, maxZoom: 4, maxBounds: bounds,
center: [640, 640],
fullscreenControl: true,
fullscreenControlOptions: {position: 'topleft'},
forcePseudoFullscreen: true, zoom: 0 }).setView([640, 640], 0);
const mainBounds = [[0, 0], [1280, 1280]]; const mainLayer = L.imageOverlay('/images/6/67/Reach_base.jpg', mainBounds).addTo(map); map.fitBounds(mainBounds);
// events are fired when entering or exiting fullscreen. map.on('enterFullscreen', function () { console.log('entered fullscreen');
map.setZoom(0);
});
map.on('exitFullscreen', function () { console.log('exited fullscreen');
map.setZoom(-1);
});
// Шаблон перехода в под-карту function createZone(bounds, name, tooltip, subMapPath, subBounds) { const zone = L.polygon(bounds, { color: "#ffa500", weight: 1 }).addTo(map); zone.bindTooltip(tooltip).openTooltip();
zone.on('click', () => { map.eachLayer(layer => map.removeLayer(layer)); const subMap = L.imageOverlay(subMapPath, subBounds).addTo(map); map.fitBounds(subBounds);
const backButton = L.control({ position: 'topright' }); backButton.onAdd = function () { const div = L.DomUtil.create('div', 'leaflet-bar'); div.innerHTML = '<a href="#" title="Назад">← Назад</a>'; div.onclick = function () { map.eachLayer(layer => map.removeLayer(layer)); mainLayer.addTo(map); map.fitBounds(mainBounds); addZones(); // вернём зоны заново return false; }; return div; }; backButton.addTo(map); }); }
function addZones() { createZone([ [628, 242], [635, 243], [640, 254], [637,275], [639,278], [657,287], [663,296], [663,296], [659,324], [665,337], [656,360], [647,373], [646,384], [632,396], [616,389], [606,369], [601,352], [596,344], [581,351], [573,336], [572,320], [574,302], [571,287], [574,264], [583,249], [596,252]
], 'Markarth', '🏰 Маркарт', '/images/d/d4/Markarthcity_base.jpg', [[0, 0], [1280, 1280]]);
} addZones();
const MarkarthIcon = L.icon({ iconUrl: '/resources/assets/leaflet/icons/Markarth.png', // Замените на свой URL iconSize: [252, 74], // Размеры иконки iconAnchor: [22, 14], // Точка привязки иконки });
L.marker([1064, 478], {icon: MarkarthIcon}).addTo(map); }); </script>