MediaWiki:Gadget-TreeverseMap.js: Difference between revisions
MediaWiki interface page
More actions
Created page with "mw.loader.using('ext.maps.leaflet', function () { var mapDiv = document.getElementById('treeverse-map'); if (!mapDiv) return; // Size of your image var w = 2000, h = 2000; // Create the map var map = L.map(mapDiv, { crs: L.CRS.Simple, minZoom: -2 }); // Calculate image bounds var bounds = [[0,0], [h,w]]; // Use your uploaded map image L.imageOverlay('/wiki/File:TreeverseMap3.jpeg?download', bounds).addTo(map); // Fit map to image ma..." |
No edit summary |
||
| Line 1: | Line 1: | ||
mw.loader.using('ext.maps.leaflet' | // Wait for the page and Leaflet from Maps extension | ||
var | mw.loader.using('ext.maps.leaflet').then(function () { | ||
if (! | var el = document.getElementById('treeverse-map'); | ||
if (!el) return; // only run on pages that have the div | |||
// | // Replace with your exact file name | ||
var | var fileTitle = 'TreeverseMap3.jpeg'; | ||
// | // Build a raw file URL that Leaflet can load | ||
var | var imgUrl = mw.util.getUrl('Special:FilePath/' + fileTitle); | ||
// | // Set your image's pixel size | ||
var | var w = 2000, h = 2000; // change if your image is different | ||
// | // Create a simple CRS (pixel coords) map | ||
L. | 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); | map.fitBounds(bounds); | ||
// | // Example marker (y, x) in pixel coords | ||
L.marker([1000, 1500]).addTo(map) | 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). | |||
}); | }); | ||