|
|
| Řádek 1: |
Řádek 1: |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/> | |
| <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script> | |
|
| |
|
| <style>
| |
| .leaflet-container {
| |
| height: 100%;
| |
| width: 100%;
| |
| max-width: 100%;
| |
| max-height: 100%;
| |
| }
| |
| </style>
| |
|
| |
| <script src="https://wiki.endor-revived.com/resources/custom/mapa.js"></script>
| |
|
| |
| <script>
| |
| const yx = L.latLng;
| |
|
| |
| function xy(x, y) {
| |
| if (Array.isArray(x)) {
| |
| return yx(x[1], x[0]);
| |
| }
| |
| return yx(y, x);
| |
| }
| |
|
| |
| function xyEndor(x, y) {
| |
| return yx(4096 - y, x);
| |
| }
| |
|
| |
| function createMarkers(L, markers, type, color) {
| |
| const group = [];
| |
| markers.forEach(marker => {
| |
| let newMarker;
| |
| if(type === 'circle') {
| |
| newMaker = L.circleMarker(xyEndor(marker.coords.x, marker.coords.y), {
| |
| title: marker.name + (' (X: ' + marker.coords.x + ' Y: ' + marker.coords.y + ')' ),
| |
| color: color,
| |
| radius: marker.radius ?? 5
| |
| }).bindPopup(marker.name + (' (X: ' + marker.coords.x + ' Y: ' + marker.coords.y + ')' ));
| |
| } else {
| |
| const options = {
| |
| color: color,
| |
| title: marker.name + (' (X: ' + marker.coords.x + ' Y: ' + marker.coords.y + ')' ),
| |
| };
| |
| if(marker.icon) {
| |
| options.icon = L.icon({
| |
| iconUrl: `img/icons/${marker.icon}.png`,
| |
| iconSize: [31, 31],
| |
| iconAnchor: [16, 16],
| |
| popupAnchor: [0, -16]
| |
| });
| |
| }
| |
| newMaker = L.marker(xyEndor(marker.coords.x, marker.coords.y), options)
| |
| .bindPopup((marker.desc ?? marker.name) + ' (X: ' + marker.coords.x + ' Y: ' + marker.coords.y + ')');
| |
| }
| |
| group.push(newMaker);
| |
| });
| |
| return L.layerGroup(group);
| |
| }
| |
|
| |
| const citiesLGroup = createMarkers(L, cities, 'marker');
| |
| const questsLGroup = createMarkers(L, quests, 'marker');
| |
| const wildernessLGroup = createMarkers(L, wildersnessSpawns, 'circle', 'cyan');
| |
| const banksHealersGroup = createMarkers(L, banksHealers, 'marker');
| |
| const guildsGroup = createMarkers(L, guilds, 'marker');
| |
| const placesGroup = createMarkers(L, places, 'marker');
| |
| const merchantsGroup = createMarkers(L, merchants, 'marker');
| |
| const travelersGroup = createMarkers(L, travelers, 'marker');
| |
| const dungeonsGroup = createMarkers(L, dungeons, 'marker');
| |
| const dungeons15Group = createMarkers(L, dungeons15, 'marker');
| |
| const dungeons20Group = createMarkers(L, dungeons20, 'marker');
| |
| const dungeons25Group = createMarkers(L, dungeons25, 'marker');
| |
|
| |
| const map = L.map('map', {
| |
| crs: L.CRS.Simple,
| |
| minZoom: -2,
| |
| layers: [
| |
| citiesLGroup,
| |
| wildernessLGroup,
| |
| banksHealersGroup,
| |
| guildsGroup,
| |
| placesGroup,
| |
| merchantsGroup,
| |
| travelersGroup,
| |
| dungeonsGroup,
| |
| dungeons15Group,
| |
| dungeons20Group,
| |
| dungeons25Group,
| |
| questsLGroup
| |
| ]
| |
| });
| |
|
| |
| const bounds = [xy(0, 0), xy(7168, 4096)];
| |
| const image = L.imageOverlay('img/map.png', bounds).addTo(map);
| |
|
| |
| L.control.layers({},{
| |
| "Banks & Healers": banksHealersGroup,
| |
| "Cities": citiesLGroup,
| |
| "Classmasters": guildsGroup,
| |
| "Dungeons (low)": dungeonsGroup,
| |
| "Dungeons (15+)": dungeons15Group,
| |
| "Dungeons (20+)": dungeons20Group,
| |
| "Dungeons (25+)": dungeons25Group,
| |
| "Merchants": merchantsGroup,
| |
| "Other": placesGroup,
| |
| "Quests": questsLGroup,
| |
| "Travelers": travelersGroup,
| |
| "Wilderness": wildernessLGroup
| |
| }).addTo(map);
| |
|
| |
| map.setView(xy(3000, 2048), -1);
| |
| </script>
| |
|
| |
| <div id='map' style="background: #000000"></div>
| |
