MediaWiki:Common.js: Difference between revisions

Latest revision as of 11:49, 24 August 2025

/* Landrace.wiki – Simple fixed map (MediaWiki compatible) */
(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);
  }

  function statusColor(s) {
    return ({
      Stable:'#2ecc71',
      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'; 
    }

    // FIXED: Set zoom limits directly in map options
    var map = L.map(el, {
      minZoom: 2,      // Can't zoom out past world view
      maxZoom: 15,     // Reasonable max zoom for this type of data
      zoomControl: true
    }).setView([15, 105], 5);  // Better initial view for Southeast Asia
    
    // Add the tile layer
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { 
      attribution:'© OSM' 
    }).addTo(map);

    // SIMPLE legend that works with MediaWiki CSS
    var legend = L.control({ position:'bottomleft' });
    legend.onAdd = function () {
      var div = L.DomUtil.create('div', 'lw-legend-map');
      
      // Use inline styles to avoid CSS conflicts
      div.style.cssText = `
        background: white;
        padding: 12px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        border: 1px solid #ccc;
        font-size: 12px;
        line-height: 1.4;
      `;
      
      var html = '<div style="font-weight: bold; margin-bottom: 8px; color: #333;">Conservation Status</div>';
      
      var items = [
        ['#2ecc71', 'Stable'],
        ['#f1c40f', 'Vulnerable'], 
        ['#e67e22', 'Endangered'],
        ['#e74c3c', 'Critical'],
        ['#95a5a6', 'Lost']
      ];
      
      items.forEach(function([color, label]) {
        html += `
          <div style="display: flex; align-items: center; margin: 6px 0;">
            <div style="
              width: 12px; 
              height: 12px; 
              background: ${color}; 
              border-radius: 50%; 
              margin-right: 8px;
              border: 1px solid rgba(0,0,0,0.2);
            "></div>
            <span style="color: #555;">${label}</span>
          </div>
        `;
      });
      
      div.innerHTML = html;
      return div;
    };
    legend.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: 6, 
          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;
    
    // Count expected data sources
    ['regions','populations','accessions'].forEach(function(kind) {
      if (el.dataset[kind]) expectedDataSources++;
    });

    function maybeFit() {
      try {
        if (layers.length > 0) {
          var group = L.featureGroup(layers);
          var b = group.getBounds();
          if (b && b.isValid()) {
            // Fit bounds but respect zoom limits
            map.fitBounds(b.pad(0.2), {
              maxZoom: 10  // Don't zoom in too much when auto-fitting
            });
            return;
          }
        }
        // Fallback view
        map.setView([15, 105], 5);
      } catch (e) {
        console.error('Map fitting error:', e);
        map.setView([15, 105], 5);
      }
      
      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 || {};
            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++;
        
        // 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) {
          maybeFit();
        }
      });
    });

    // If no data sources, immediately set view
    if (expectedDataSources === 0) {
      console.log('No data sources found, using default view');
      map.setView([15, 105], 5);
      setTimeout(function(){ 
        map.invalidateSize(true); 
      }, 100);
    }

    // Add a simple zoom level indicator in the corner
    var zoomDisplay = L.control({ position: 'topright' });
    zoomDisplay.onAdd = function() {
      var div = L.DomUtil.create('div');
      div.style.cssText = `
        background: rgba(255,255,255,0.9);
        padding: 5px 8px;
        border-radius: 4px;
        font-size: 11px;
        color: #666;
        border: 1px solid #ccc;
      `;
      div.innerHTML = 'Zoom: ' + map.getZoom();
      
      map.on('zoomend', function() {
        div.innerHTML = 'Zoom: ' + map.getZoom() + ' (min: 2, max: 15)';
      });
      
      return div;
    };
    zoomDisplay.addTo(map);
  }

  function init(root) {
    (root || document).querySelectorAll('.lw-map').forEach(initOne);
  }

  // Load Leaflet and initialize
  addCSS(CDN + 'leaflet.css', 'leaflet-css');
  addJS(CDN + 'leaflet.js', function () {
    console.log('Leaflet loaded, initializing maps...');
    init();
    
    // MediaWiki integration
    if (window.mw && mw.hook) {
      mw.hook('wikipage.content').add(function ($c) { 
        init($c && $c[0] ? $c[0] : document); 
      });
    }
  });
})();