Mapa

<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>