MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

// Agon World Map with Leaflet
(function() {
  // Load Leaflet library
  if (typeof L === 'undefined') {
    mw.loader.load('https://unpkg.com/leaflet@1.9.4/dist/leaflet.css', 'text/css');
    mw.loader.load('https://unpkg.com/leaflet@1.9.4/dist/leaflet.js');
  }

  // Initialize map when page loads
  mw.hook('wikipage.content').add(function($content) {
    var $mapContainer = $content.find('.agon-map-container');
    if ($mapContainer.length === 0) return;

    // Wait for Leaflet to load
    function initMap() {
      if (typeof L === 'undefined') {
        setTimeout(initMap, 100);
        return;
      }

      var bounds = [[0, 0], [1000, 1000]];
      var map = L.map('agon-world-map', {
        crs: L.CRS.Simple,
        minZoom: -2,
        maxZoom: 2,
        zoomControl: true,
        attributionControl: false
      });

      // Add the Agon map image as a tile layer
      var imageUrl = '/resources/assets/AgonBigMap.png';
      L.imageOverlay(imageUrl, bounds).addTo(map);
      map.fitBounds(bounds);

      // Fetch markers from semantic properties
      fetchMarkers(map);
    }

    initMap();
  });

  function fetchMarkers(map) {
    // Query the API for all pages with coordinates
    new mw.Api().get({
      action: 'ask',
      query: '[[Category:Location]]|?Has coordinates|?Location type|?Mob type|?Has loot|?Dungeon name|?Level range|limit=500',
      format: 'json'
    }).done(function(data) {
      if (data.query && data.query.results) {
        Object.keys(data.query.results).forEach(function(pageName) {
          var page = data.query.results[pageName];
          if (page.printouts && page.printouts['Has coordinates']) {
            var coords = page.printouts['Has coordinates'][0];
            if (coords) {
              addMarker(map, pageName, coords, page.printouts);
            }
          }
        });
      }
    });
  }

  function addMarker(map, name, coords, data) {
    // Parse coordinates (assuming "X, Y" format)
    var parts = coords.split(',').map(function(s) { return parseFloat(s.trim()); });
    if (parts.length !== 2 || isNaN(parts[0]) || isNaN(parts[1])) return;

    var latlng = [parts[0], parts[1]];
    
    // Choose marker color based on type
    var type = data['Location type'] && data['Location type'][0] ? data['Location type'][0] : 'Unknown';
    var color = getMarkerColor(type);

    var marker = L.circleMarker(latlng, {
      radius: 8,
      fillColor: color,
      color: '#0f1b2c',
      weight: 2,
      opacity: 1,
      fillOpacity: 0.8
    }).addTo(map);

    // Create popup content
    var popupContent = '<div class="marker-info">';
    popupContent += '<h3>' + name + '</h3>';
    popupContent += '<p><strong>Type:</strong> ' + type + '</p>';
    
    if (data['Mob type'] && data['Mob type'][0]) {
      popupContent += '<p><strong>Mobs:</strong> ' + data['Mob type'][0] + '</p>';
    }
    if (data['Has loot'] && data['Has loot'][0]) {
      popupContent += '<p><strong>Loot:</strong> ' + data['Has loot'][0] + '</p>';
    }
    if (data['Dungeon name'] && data['Dungeon name'][0]) {
      popupContent += '<p><strong>Dungeon:</strong> ' + data['Dungeon name'][0] + '</p>';
    }
    if (data['Level range'] && data['Level range'][0]) {
      popupContent += '<p><strong>Level:</strong> ' + data['Level range'][0] + '</p>';
    }
    
    popupContent += '<p><a href="/wiki/' + encodeURIComponent(name.replace(/ /g, '_')) + '">View Details →</a></p>';
    popupContent += '</div>';

    marker.bindPopup(popupContent);
  }

  function getMarkerColor(type) {
    var colors = {
      'Spawn Point': '#ff6b6b',
      'Key Chest': '#f39c12',
      'Portal': '#9b59b6',
      'Dungeon Entrance': '#e74c3c',
      'Clan Holding': '#3498db',
      'Wilderness Bank': '#2ecc71'
    };
    return colors[type] || '#95a5a6';
  }
})();