MediaWiki:Common.js

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 – Leaflet map w/ SMW CSV export (ES5 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 && typeof window.L.map === 'function') return cb();
    var s = document.querySelector('script[data-lw-leaflet="1"]');
    if (s) { s.addEventListener('load', cb); return; }
    s = document.createElement('script');
    s.src = src;
    s.setAttribute('data-lw-leaflet', '1');
    s.onload = cb;
    s.onerror = function () { console.error('[lw-map] Leaflet failed to load:', src); };
    document.head.appendChild(s);
  }

  function esc(s) {
    return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) {
      return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]);
    });
  }

  function statusColor(s) {
    return ({ Critical:'#e74c3c', High:'#e67e22', Medium:'#f1c40f', Low:'#2ecc71' })[s] || '#3498db';
  }

  function popupForAccession(p) {
    var title = [p.id, p.name].filter(Boolean).join(' — ');
    var link = p.page_url ? '<br><a href="' + esc(p.page_url) + '">Open accession</a>' : '';
    return '<b>' + esc(title) + '</b><br>' + esc(p.status || '') + link;
  }

  // Parse coordinates from various formats
  function parseCoords(coordStr) {
    if (!coordStr) return null;
    
    // Try decimal format: "26.397389, 89.495417"
    var decimalMatch = coordStr.match(/(-?\d+\.?\d*)\s*,\s*(-?\d+\.?\d*)/);
    if (decimalMatch) {
      var lat = parseFloat(decimalMatch[1]);
      var lon = parseFloat(decimalMatch[2]);
      if (!isNaN(lat) && !isNaN(lon)) return { lat: lat, lon: lon };
    }
    
    // Try DMS format: "26° 23' 50.60" N, 89° 29' 43.50" E"
    var dmsRegex = /(\d+)[°]\s*(\d+)[′']\s*(\d+\.?\d*)[″"]?\s*([NSEW])/gi;
    var matches = [];
    var m;
    while ((m = dmsRegex.exec(coordStr)) !== null) {
      matches.push(m);
      if (matches.length >= 2) break;
    }
    
    if (matches.length >= 2) {
      var lat = dmsToDecimal(matches[0][1], matches[0][2], matches[0][3], matches[0][4]);
      var lon = dmsToDecimal(matches[1][1], matches[1][2], matches[1][3], matches[1][4]);
      
      // Swap if first is E/W
      var h0 = matches[0][4].toUpperCase();
      if (h0 === 'E' || h0 === 'W') {
        var tmp = lat; lat = lon; lon = tmp;
      }
      
      if (lat !== null && lon !== null) return { lat: lat, lon: lon };
    }
    
    return null;
  }
  
  function dmsToDecimal(deg, min, sec, hemi) {
    var d = parseFloat(deg);
    var m = parseFloat(min) || 0;
    var s = parseFloat(sec) || 0;
    if (isNaN(d)) return null;
    var dec = Math.abs(d) + (m / 60) + (s / 3600);
    hemi = String(hemi || '').toUpperCase();
    if (hemi === 'S' || hemi === 'W') dec = -dec;
    return dec;
  }

  // Parse CSV text into array of objects
  function parseCSV(text) {
    var lines = text.trim().split('\n');
    if (lines.length < 2) return [];
    
    // Parse header row
    var headers = parseCSVLine(lines[0]);
    
    var results = [];
    for (var i = 1; i < lines.length; i++) {
      var values = parseCSVLine(lines[i]);
      var obj = {};
      for (var j = 0; j < headers.length; j++) {
        obj[headers[j]] = values[j] || '';
      }
      results.push(obj);
    }
    return results;
  }
  
  // Parse a single CSV line (handles quoted fields)
  function parseCSVLine(line) {
    var result = [];
    var current = '';
    var inQuotes = false;
    
    for (var i = 0; i < line.length; i++) {
      var c = line[i];
      var next = line[i + 1];
      
      if (inQuotes) {
        if (c === '"' && next === '"') {
          current += '"';
          i++; // Skip next quote
        } else if (c === '"') {
          inQuotes = false;
        } else {
          current += c;
        }
      } else {
        if (c === '"') {
          inQuotes = true;
        } else if (c === ',') {
          result.push(current.trim());
          current = '';
        } else {
          current += c;
        }
      }
    }
    result.push(current.trim());
    return result;
  }

  // Convert CSV data to GeoJSON
  function csvToGeoJSON(data) {
    var features = [];
    
    data.forEach(function(row) {
      // Find coordinate column
      var coordStr = row['Has GPS coordinates'] || row['GPS coordinates'] || '';
      var coords = parseCoords(coordStr);
      if (!coords) {
        console.log('[lw-map] Skipping row, no valid coords:', coordStr);
        return;
      }
      
      // Get page name (first column is usually the page title)
      var pageName = row[''] || Object.values(row)[0] || '';
      
      var name = row['Has descriptive name'] || row['descriptive name'] || pageName;
      var status = row['Has conservation priority'] || row['conservation priority'] || '';
      var accessionId = row['Has accession ID'] || row['accession ID'] || '';
      
      features.push({
        type: 'Feature',
        properties: {
          id: accessionId,
          name: name,
          status: status,
          page_url: '/wiki/' + encodeURIComponent(pageName.replace(/ /g, '_'))
        },
        geometry: {
          type: 'Point',
          coordinates: [coords.lon, coords.lat]
        }
      });
    });
    
    console.log('[lw-map] Converted', features.length, 'features from CSV');
    return { type: 'FeatureCollection', features: features };
  }

  // Build Special:Ask CSV URL from query
  function buildCSVUrl(query) {
    // Encode for Special:Ask URL format
    // [[Has growing region::North Bengal Plains]]|?Has GPS coordinates
    // becomes: -5B-5BHas-20growing-20region::North-20Bengal-20Plains-5D-5D/-3FHas-20GPS-20coordinates
    
    var parts = query.split('|');
    var encodedParts = parts.map(function(part) {
      return part
        .replace(/\[/g, '-5B')
        .replace(/\]/g, '-5D')
        .replace(/\?/g, '-3F')
        .replace(/ /g, '-20');
    });
    
    var baseUrl = mw.config.get('wgScriptPath') || '';
    return baseUrl + '/wiki/Special:Ask/' + encodedParts.join('/') + '/format=csv';
  }

  // Fetch CSV from Special:Ask
  function fetchCSV(query, cb) {
    var url = buildCSVUrl(query);
    console.log('[lw-map] Fetching CSV from:', url);
    
    fetch(url)
      .then(function(r) {
        if (!r.ok) throw new Error('CSV fetch error: ' + r.status);
        return r.text();
      })
      .then(function(text) {
        console.log('[lw-map] CSV response length:', text.length);
        var data = parseCSV(text);
        console.log('[lw-map] Parsed', data.length, 'rows');
        var geojson = csvToGeoJSON(data);
        cb(null, geojson);
      })
      .catch(function(err) {
        console.error('[lw-map] CSV fetch error:', err);
        cb(err, null);
      });
  }

  function legendControl() {
    var legend = L.control({ position: 'bottomleft' });
    legend.onAdd = function () {
      var div = L.DomUtil.create('div', 'lw-legend-map');
      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:700;margin-bottom:8px;color:#333;">Conservation Priority</div>';
      var items = [['Critical','#e74c3c'],['High','#e67e22'],['Medium','#f1c40f'],['Low','#2ecc71']];
      items.forEach(function (it) {
        html += '<div style="display:flex;align-items:center;margin:6px 0;">' +
                '<div style="width:12px;height:12px;background:'+it[1]+';border-radius:50%;margin-right:8px;border:1px solid rgba(0,0,0,0.2);"></div>' +
                '<span style="color:#555;">'+esc(it[0])+'</span></div>';
      });
      div.innerHTML = html;
      return div;
    };
    return legend;
  }

  function initOne(el) {
    if (el.dataset.init) return;
    el.dataset.init = '1';
    if (el.clientHeight < 100) el.style.height = '70vh';

    var map = L.map(el, { minZoom: 2, maxZoom: 15 }).setView([26.4, 89.5], 8);
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OSM' }).addTo(map);
    legendControl().addTo(map);

    var query = el.dataset.smwQuery;
    if (!query) {
      console.log('[lw-map] No data-smw-query attribute found');
      return;
    }

    fetchCSV(query, function (err, geojson) {
      if (err || !geojson || !geojson.features || !geojson.features.length) {
        var msg = L.control({ position: 'topright' });
        msg.onAdd = function () {
          var d = L.DomUtil.create('div');
          d.style.cssText = 'background:rgba(255,255,255,0.95);padding:8px 10px;border-radius:6px;font-size:12px;color:#b00;border:1px solid #ccc;max-width:320px;';
          d.innerHTML = '<b>No accessions found</b><br>Query returned 0 mappable results.';
          return d;
        };
        msg.addTo(map);
        return;
      }

      var layer = L.geoJSON(geojson, {
        pointToLayer: function (f, ll) {
          var props = f.properties || {};
          return L.circleMarker(ll, { 
            radius: 6, 
            color: '#fff', 
            weight: 2, 
            fillColor: statusColor(props.status), 
            fillOpacity: 0.95 
          });
        },
        onEachFeature: function (f, ly) {
          var p = f.properties || {};
          ly.bindPopup(popupForAccession(p));
          var tip = p.id || p.name || '';
          if (tip) ly.bindTooltip(esc(tip), { direction: 'top', offset: [0, -8], opacity: 0.9 });
        }
      }).addTo(map);

      var b = layer.getBounds();
      if (b && b.isValid()) map.fitBounds(b.pad(0.2), { maxZoom: 12 });
      setTimeout(function () { map.invalidateSize(true); }, 100);
    });
  }

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

  addCSS(CDN + 'leaflet.css', 'leaflet-css');
  addJS(CDN + 'leaflet.js', function () {
    init();
    if (window.mw && mw.hook) {
      mw.hook('wikipage.content').add(function ($c) { 
        init($c && $c[0] ? $c[0] : document); 
      });
    }
  });
})();