MediaWiki:Common.js: Difference between revisions

// Custom Agon World Map with Leaflet
(function() {
    // Only run on map pages
    if (!document.getElementById('agon-map-container')) return;
    
    // Load Leaflet CSS
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
    document.head.appendChild(link);
    
    // Load Leaflet JS
    var script = document.createElement('script');
    script.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
    script.onload = function() {
        initAgonMap();
    };
    document.head.appendChild(script);
})();

function initAgonMap() {
    var mapContainer = document.getElementById('agon-map-container');
    if (!mapContainer) return;
    
    // Image dimensions
    var imageWidth = 16384;
    var imageHeight = 16384;
    
    // Create map with custom CRS for image coordinates
    var map = L.map('agon-map-container', {
        crs: L.CRS.Simple,
        minZoom: -3,
        maxZoom: 2,
        center: [imageHeight/2, imageWidth/2],
        zoom: -2
    });
    
    // Add the Agon map image as overlay
    var bounds = [[0, 0], [imageHeight, imageWidth]];
    L.imageOverlay(mw.config.get('wgScriptPath') + '/resources/assets/AgonBigMap.png', bounds).addTo(map);
    
    // Fit map to bounds
    map.fitBounds(bounds);
    
    // Add scale
    L.control.scale().addTo(map);
    
    // Click to get coordinates
    map.on('click', function(e) {
        var coord = e.latlng;
        console.log('Clicked coordinates:', coord.lat.toFixed(2) + ', ' + coord.lng.toFixed(2));
        L.popup()
            .setLatLng(e.latlng)
            .setContent('Coordinates: ' + coord.lat.toFixed(2) + ', ' + coord.lng.toFixed(2))
            .openOn(map);
    });
    
    // Load markers from page data
    if (window.agonMapMarkers) {
        window.agonMapMarkers.forEach(function(marker) {
            var coords = marker.coordinates.split(',').map(parseFloat);
            var icon = L.icon({
                iconUrl: marker.icon || mw.config.get('wgScriptPath') + '/resources/assets/marker-icon.png',
                iconSize: [25, 41],
                iconAnchor: [12, 41],
                popupAnchor: [1, -34]
            });
            
            L.marker([coords[0], coords[1]], {icon: icon})
                .addTo(map)
                .bindPopup('<b>' + marker.name + '</b><br>' + marker.description);
        });
    }
}