MediaWiki:Common.js
MediaWiki interface page
More actions
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.
/* Landrace.wiki – Enhanced map with improved legend & zoom controls */
(function () {
var LVER = '1.9.4';
var CDN = 'https://unpkg.com/leaflet@' + LVER + '/dist/';
function addCSS(href, id) {
if (id && document.getElementById(id)) return;
var l = document.createElement('link');
l.rel = 'stylesheet'; l.href = href; if (id) l.id = id;
document.head.appendChild(l);
}
function addJS(src, cb) {
if (window.L) return cb();
var s = document.createElement('script');
s.src = src;
s.onload = cb;
s.onerror = function(){ console.error('Leaflet failed to load:', src); };
document.head.appendChild(s);
}
// Add custom CSS for enhanced legend
function addLegendCSS() {
if (document.getElementById('lw-legend-styles')) return;
var css = `
.lw-legend-map {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
border-radius: 12px;
padding: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(0, 0, 0, 0.1);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
min-width: 180px;
}
.lw-legend-title {
font-size: 14px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 12px;
text-align: center;
border-bottom: 1px solid #ecf0f1;
padding-bottom: 8px;
}
.lw-legend-item {
display: flex;
align-items: center;
margin-bottom: 10px;
padding: 4px 0;
transition: all 0.2s ease;
}
.lw-legend-item:hover {
background: rgba(52, 152, 219, 0.1);
border-radius: 6px;
padding: 4px 8px;
margin: 2px -8px 8px -8px;
}
.lw-legend-item:last-child {
margin-bottom: 0;
}
.lw-legend-dot {
width: 14px;
height: 14px;
border-radius: 50%;
margin-right: 12px;
border: 2px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
flex-shrink: 0;
}
.lw-legend-label {
font-size: 13px;
color: #34495e;
font-weight: 500;
line-height: 1.2;
}
.lw-legend-count {
font-size: 11px;
color: #7f8c8d;
margin-left: auto;
padding-left: 8px;
font-weight: 400;
}
.lw-zoom-info {
position: absolute;
top: 10px;
right: 10px;
background: rgba(255, 255, 255, 0.9);
padding: 8px 12px;
border-radius: 6px;
font-size: 12px;
color: #7f8c8d;
border: 1px solid rgba(0, 0, 0, 0.1);
pointer-events: none;
}
`;
var style = document.createElement('style');
style.id = 'lw-legend-styles';
style.textContent = css;
document.head.appendChild(style);
}
function statusColor(s) {
return ({
Stable:'#27ae60',
Vulnerable:'#f1c40f',
Endangered:'#e67e22',
Critical:'#e74c3c',
Lost:'#95a5a6'
})[s] || '#3498db';
}
function popup(kind, p) {
if (kind === 'accessions') {
var t = [p.accession_id, p.local_name].filter(Boolean).join(' — ');
var link = p.page_url ? `<br><a href="${p.page_url}">Open accession</a>` : '';
return `<b>${t}</b><br>${p.status||''}${link}`;
}
return `<b>${p.name||''}</b><br>${(p.level||kind)} • ${p.status||''}`;
}
function initOne(el) {
if (el.dataset.init) return;
el.dataset.init = '1';
// Ensure height is set BEFORE map initialization
if (el.clientHeight < 100) {
el.style.height = '70vh';
}
// Enhanced map initialization with zoom restrictions
var map = L.map(el, {
minZoom: 2, // Prevent zooming out too far (global view)
maxZoom: 18, // Allow detailed zoom
zoomControl: true
}).setView([20, 85], 5); // Slightly more zoomed out initial view
// Add the tile layer
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Add zoom level indicator
var zoomInfo = L.control({ position: 'topright' });
zoomInfo.onAdd = function() {
var div = L.DomUtil.create('div', 'lw-zoom-info');
div.innerHTML = 'Zoom: ' + map.getZoom();
map.on('zoomend', function() {
div.innerHTML = 'Zoom: ' + map.getZoom();
});
return div;
};
zoomInfo.addTo(map);
var cfg = {
regions: {
style: f => ({
color: statusColor(f.properties.status),
weight: 2,
fillOpacity: 0.2,
opacity: 0.8
})
},
populations: {
pointToLayer: (f, ll) => L.circleMarker(ll, {
radius: 7,
color: '#fff',
weight: 2,
fillColor: statusColor(f.properties.status),
fillOpacity: 0.8
})
},
accessions: {
pointToLayer: (f, ll) => L.circleMarker(ll, {
radius: 5,
color: '#fff',
weight: 2,
fillColor: statusColor(f.properties.status),
fillOpacity: 0.9
})
}
};
var layers = [];
var dataLoadCount = 0;
var expectedDataSources = 0;
var statusCounts = {
Stable: 0,
Vulnerable: 0,
Endangered: 0,
Critical: 0,
Lost: 0
};
// Count expected data sources
['regions','populations','accessions'].forEach(function(kind) {
if (el.dataset[kind]) expectedDataSources++;
});
function updateLegend() {
// Create enhanced legend with counts
var legend = L.control({ position:'bottomleft' });
legend.onAdd = function () {
var div = L.DomUtil.create('div', 'lw-legend-map');
var html = '<div class="lw-legend-title">Conservation Status</div>';
var statusItems = [
['Stable', '#27ae60'],
['Vulnerable', '#f1c40f'],
['Endangered', '#e67e22'],
['Critical', '#e74c3c'],
['Lost', '#95a5a6']
];
statusItems.forEach(function([status, color]) {
var count = statusCounts[status];
var countText = count > 0 ? `<span class="lw-legend-count">${count}</span>` : '';
html += `
<div class="lw-legend-item ${count === 0 ? 'inactive' : ''}">
<div class="lw-legend-dot" style="background-color: ${color}"></div>
<div class="lw-legend-label">${status}</div>
${countText}
</div>
`;
});
div.innerHTML = html;
return div;
};
// Remove existing legend if any
if (map.legendControl) {
map.removeControl(map.legendControl);
}
map.legendControl = legend;
legend.addTo(map);
}
function maybeFit() {
try {
if (layers.length > 0) {
var group = L.featureGroup(layers);
var b = group.getBounds();
if (b && b.isValid()) {
// Add more padding and respect zoom limits
var paddedBounds = b.pad(0.2);
map.fitBounds(paddedBounds, {
maxZoom: 12 // Don't zoom in too much when fitting
});
return;
}
}
// Fallback view - broader Southeast Asia view
map.setView([15, 105], 4);
} catch (e) {
console.error('Map fitting error:', e);
map.setView([15, 105], 4);
}
setTimeout(function(){
map.invalidateSize(true);
}, 100);
}
// Load data sources
['regions','populations','accessions'].forEach(function (kind) {
var url = el.dataset[kind];
if (!url) return;
console.log('Loading', kind, 'from', url);
fetch(url).then(function(r){
if (!r.ok) throw new Error(kind + ' fetch ' + r.status + ' ' + url);
return r.json();
}).then(function (g) {
console.log('Loaded', kind, '- features:', g.features ? g.features.length : 'unknown');
var layer = L.geoJSON(g, Object.assign({
onEachFeature: (f, ly) => {
var p = f.properties || {};
// Count status for legend
if (p.status && statusCounts.hasOwnProperty(p.status)) {
statusCounts[p.status]++;
}
ly.bindPopup(popup(kind, p));
var title = p.accession_id || p.name || '';
if (title) ly.bindTooltip(title, { direction:'top', offset:[0,-8], opacity:0.9 });
}
}, cfg[kind])).addTo(map);
layers.push(layer);
dataLoadCount++;
// Update legend with new counts
updateLegend();
// Only fit bounds after all expected data is loaded
if (dataLoadCount >= expectedDataSources) {
maybeFit();
}
}).catch(function(err){
console.error('[Landrace.wiki map]', kind, err);
dataLoadCount++;
if (dataLoadCount >= expectedDataSources) {
updateLegend();
maybeFit();
}
});
});
// If no data sources, show empty legend and set view
if (expectedDataSources === 0) {
console.log('No data sources found, using default view');
updateLegend();
map.setView([15, 105], 4);
setTimeout(function(){
map.invalidateSize(true);
}, 100);
}
}
function init(root) {
(root || document).querySelectorAll('.lw-map').forEach(initOne);
}
// Initialize everything
addLegendCSS();
addCSS(CDN + 'leaflet.css', 'leaflet-css');
addJS(CDN + 'leaflet.js', function () {
console.log('Leaflet loaded, initializing enhanced maps...');
init();
if (window.mw && mw.hook) {
mw.hook('wikipage.content').add(function ($c) {
init($c && $c[0] ? $c[0] : document);
});
}
});
})();