MediaWiki:Common.js: Difference between revisions

Revision as of 11:44, 24 August 2025

/* 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); 
      });
    }
  });
})();