|
|
| Line 1: |
Line 1: |
| // 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).
| |
| });
| |
