Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.js: Difference between revisions

MediaWiki interface page
Created page with "→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; // === CO..."
 
No edit summary
Line 16: Line 16:


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

Revision as of 22:59, 26 August 2025

/* 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='TreeverseMap.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);