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.

/* Any JavaScript here will be loaded for all users on every page load. */
// Load Leaflet CSS
(function(){
  var lcss=document.createElement('link');
  lcss.rel='stylesheet';
  lcss.href='https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
  document.head.appendChild(lcss);

  var s=document.createElement('script');
  s.src='https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
  s.onload=function initTreeverseMap(){
    var el=document.getElementById('treeverse-map');
    if(!el) return;

    // ====== EDIT THIS: exact filename (case-sensitive) ======
    var file='TreeverseMap.jpg';
    // ========================================================

    // Build an absolute URL to the file (follows Special:FilePath redirect)
    var relative = mw.util.getUrl('Special:FilePath/' + file);
    var url = new URL(relative, window.location.origin).href;

    // Load the image first to get accurate pixel size
    var img = new Image();
    img.onload = function(){
      var w = img.naturalWidth, h = img.naturalHeight;
      if(!w || !h){
        console.error('Treeverse map: could not read image size.');
        return;
      }

      var map = L.map(el, { crs: L.CRS.Simple, minZoom: -2, maxZoom: 5 });
      var bounds = [[0,0],[h,w]];

      L.imageOverlay(url, bounds).addTo(map);
      map.fitBounds(bounds);

      // Example annotations (y, x)
      L.marker([Math.floor(h/2), Math.floor(w/2)]).addTo(map)
        .bindPopup('<b>Center of the map</b>');

      // Add your own markers/shapes below...
    };

    img.onerror = function(){
      console.error('Treeverse map: image failed to load ->', url);
      alert('Map image could not load.\nCheck the filename and that Special:FilePath opens the image.');
    };

    // Bust cache once to avoid stale redirects
    img.src = url + (url.includes('?') ? '&' : '?') + 'v=' + Date.now();
  };
  document.head.appendChild(s);
})();