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
var lcss=document.createElement('link');
lcss.rel='stylesheet';
lcss.href='https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
document.head.appendChild(lcss);

// Load Leaflet JS
var s=document.createElement('script');
s.src='https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
s.onload=function(){

  var el=document.getElementById('treeverse-map');
  if(!el) return;

  // === CONFIGURE THESE ===
  var file='TreeverseMap3.jpeg'; // must match your uploaded filename
  var w=1000, h=856;          // pixel size of your map image
  // ========================

  var url=mw.util.getUrl('Special:FilePath/'+file);
  var map=L.map(el,{crs:L.CRS.Simple,minZoom:-2,maxZoom:4});
  var bounds=[[0,0],[h,w]];
  L.imageOverlay(url,bounds).addTo(map);
  map.fitBounds(bounds);

  // === ANNOTATIONS EXAMPLES ===

  // Marker with popup
  L.marker([1000,1500]).addTo(map)
   .bindPopup('<b>Crystal Cave</b><br>Rare ores spawn here.');

  // Circle annotation
  L.circle([800,500], {radius:50, color:'red'}).addTo(map)
   .bindPopup('⚠ Danger Zone');

  // Polygon annotation (guild land)
  L.polygon([[1200,400],[1300,450],[1250,600]], {color:'blue'}).addTo(map)
   .bindPopup('Guild Territory');

  // Polyline (path/route)
  L.polyline([[600,300],[700,400],[800,420]], {color:'green'}).addTo(map)
   .bindPopup('Quest Route');

};
document.head.appendChild(s);