MediaWiki:LocMaps.js

Note: After saving, 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)
• Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Clear the cache in Tools → Preferences

    (function() {

    var zones = {
      'Eastern Wastes': {
          height: 452,
          image: 'Map_eastern_wastes.jpg', 
          modifier: -.0380,
          test: {
            maxX: 7000,
            maxY: 1000,
            minX: -6000,
            minY: -9000
          },
          width: 550,
          zeroX: 284,
          zeroY: 62
      }
    };


    var makeX = function(x, y, zone) {
      $('img[alt="' + zone.image + '"]')
        .parent()
        .css({position: 'absolute'})
        .append(
          $('<div class="x">x</div>')
            .css({
              color: 'red',
              fontSize: '2em',
              fontWeight: 'bold',
              left: zone.zeroX + x * zone.modifier,
              position: 'absolute',
              top: zone.zeroY + y * zone.modifier
            }));
    };

    var testMakeX = function(zone) {
      for (var x = zone.test.maxX; x >= zone.test.minX; x -= 1000) {
        for (var y = zone.test.maxY; y >= zone.test.minY; y -= 1000) {
          makeX(x, y, zone);
        }
      };
    }


    var addMap = function($locTd, imageName, width, height) {
      if ($('.map-wrapper').length) return;

      $locTd.append(
        '<div class="map-wrapper" style="position:relative">'+
          '<img alt="' + imageName + '" ' +
               'src="/images/'+ imageName + '" ' +
               'width="' + width + '" ' +
               'height="'+ height + '" ' +
               'class="thumbborder" ' +
               'title="' + imageName + '">' +
        '</div>'
      );
    }

    var showLocOnMap = function($locTd, zone, x, y) {
      addMap($locTd, zone.image, zone.width, zone.height);
      makeX(x, y, zone);
      // uncomment this to produce a series of x's for checking the alignment
      //testMakeX(zone)
    };

    try {
      var $locTd = $('b:contains("Location:")').parent();
      var match = $locTd.text().match(/\( *(\-?\d+), *(\-?\d+)\)/);
      var y = match[1]
      var x = match[2];
      var $zoneTd = $('b:contains("Zone:")').parent().text();
      var zoneName = $zoneTd.split('Zone:')[1].trim();
      var zone = zones[zoneName];
      if (!zone) return;

      var $link = $(' <a href="#">(Show on Map)</a>');
      $link
        .on('mouseover', function(e) {
          showLocOnMap($locTd, zone, x, y);
        })
        .on('mouseleave', function(e) {
          $('.map-wrapper').remove();
        });
      $locTd.append($link) 
    } catch (err) {/* Didn't work, move on */}


    })();