MediaWiki:Gadget-TreeverseMap.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.

// Wait for the page and Leaflet from Maps extension
mw.loader.using('ext.maps.leaflet').then(function () {
  var el = document.getElementById('treeverse-map');
  if (!el) return; // only run on pages that have the div

  // Replace with your exact file name
  var fileTitle = 'TreeverseMap3.jpeg';

  // Build a raw file URL that Leaflet can load
  var imgUrl = mw.util.getUrl('Special:FilePath/' + fileTitle);

  // Set your image's pixel size
  var w = 2000, h = 2000; // change if your image is different

  // Create a simple CRS (pixel coords) map
  var map = L.map(el, { crs: L.CRS.Simple, minZoom: -2, maxZoom: 4 });

  var bounds = [[0, 0], [h, w]];
  L.imageOverlay(imgUrl, bounds).addTo(map);
  map.fitBounds(bounds);

  // Example marker (y, x) in pixel coords
  L.marker([1000, 1500]).addTo(map)
   .bindPopup('<b>Crystal Cave</b><br>Rare ores spawn here.');

  // If you see no tiles: open browser console for errors (JS/CORS/404).
});