IITC plugin: Show Configurable S2 Cells

IITC: Shows configurable S2 level cells on the map

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(У мене вже є менеджер скриптів, дайте мені встановити його!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @id             iitc-plugin-s2-cells@vib
// @name           IITC plugin: Show Configurable S2 Cells
// @author         vib+	Dragonsangel+nikolawannabe
// @category       Layer
// @version        0.1.11
// @namespace      https://github.com/nikolawannabe/s2-cells
// @description    IITC: Shows configurable S2 level cells on the map
// @include        https://*.ingress.com/intel*
// @include        http://*.ingress.com/intel*
// @match          https://*.ingress.com/intel*
// @match          http://*.ingress.com/intel*
// @include        https://*.ingress.com/mission/*
// @include        http://*.ingress.com/mission/*
// @match          https://*.ingress.com/mission/*
// @match          http://*.ingress.com/mission/*
// @grant          none
// @license        MIT
// ==/UserScript==
// This plugin is a simple fork of the Regions plugin by Jonatkins
//
// original plugin at:
// https://github.com/jonatkins/ingress-intel-total-conversion
function wrapper(plugin_info)
{
  // ensure plugin framework is there, even if iitc is not yet loaded
  if (typeof window.plugin !== 'function') window.plugin = function() {};

  //PLUGIN AUTHORS: writing a plugin outside of the IITC build environment? if so, delete these lines!!
  //(leaving them in place might break the 'About IITC' page or break update checks)
  plugin_info.buildName = 's2-cells';
  plugin_info.dateTimeVersion = '20180504.121800';
  plugin_info.pluginId = 's2-cells';
  //END PLUGIN AUTHORS NOTE

  // PLUGIN START ////////////////////////////////////////////////////////
// http://jsbeautifier.org/
  // use own namespace for plugin
  window.plugin.showcells = function() {};

  // SET THIS TO TRUE WHILE DEBUGGING
  window.plugin.showcells.debug = false;

  window.plugin.showcells.storage = { lightCell: 17, darkCell: 14, lightColor: '#f5fffa', darkColor: '#3cb371', lightWidth: 1, darkWidth: 8};
  window.plugin.showcells.storageKey = 'showcells-storage';

  // update the localStorage datas
  window.plugin.showcells.saveStorage = function()
  {
    localStorage[window.plugin.showcells.storageKey] = JSON.stringify(window.plugin.showcells.storage);
  };

  // load the localStorage datas
  window.plugin.showcells.loadStorage = function()
  {
    if (typeof localStorage[window.plugin.showcells.storageKey] != "undefined")
    {
      window.plugin.showcells.storage = JSON.parse(localStorage[window.plugin.showcells.storageKey]);
    }
  };

  window.plugin.showcells.setCellLevel = function()
  {
    window.plugin.showcells.loadStorage();
    var lightCell = window.plugin.showcells.storage.lightCell;
    var darkCell = window.plugin.showcells.storage.darkCell;
    var lightColor = window.plugin.showcells.storage.lightColor;
    var darkColor = window.plugin.showcells.storage.darkColor;
    var lightWidth = window.plugin.showcells.storage.lightWidth;
    var darkWidth = window.plugin.showcells.storage.darkWidth;
    if (lightCell == isNaN || darkCell == isNaN) {
        window.plugin.showcells.storage.lightCell = 17;
        lightCell = 17;
        window.plugin.showcells.storage.darkCell = 14;
        darkCell = 14;
        window.plugin.showcells.saveStorage();
    }
    if (lightWidth == isNaN || darkWidth == isNaN) {
        window.plugin.showcells.storage.lightWidth = 1;
        lightWidth = 1;
        window.plugin.showcells.storage.darkWidth = 8;
        darkWidth = 8;
        window.plugin.showcells.saveStorage();
    }
    var dialogHtml = 
        "<div id='cell-levels-dialog'>" +
        "Inner Cells<div><input type='text' id='light-cell' value='" + lightCell + "'/> " + 
          "Color: <input type='color' id='light-color' value='" + lightColor + "'/>" +
          "Width: <input type='text' id='light-width' value='" + lightWidth + "'/>" +
        "</div>" +
        "Outer Cells<div><input type='text' id='dark-cell' value='" + darkCell + "'/> " + 
          "Color: <input type='color' id='dark-color' value='" + darkColor + "'/>" +
          "Width: <input type='text' id='dark-width' value='" + darkWidth + "'/>" +
          "</div>" +
        "<div>Note that if your choices would cause too many cells to be rendered, we will try not to display them.</div>" +
        "<div>See the <a href='https://github.com/nikolawannabe/s2-cells/blob/master/cell-guidelines.md'>Cell Guidelines</a> " +  
        "for tips on what these numbers can be used for.</div>"
  ;
    var d =
    dialog({
        title: "Set Cell Levels",
        html: dialogHtml,
        width:'auto',
        buttons:{
          'Reset to Defaults': function() {
                window.plugin.showcells.storage = { lightCell: 17, darkCell: 14, lightColor: '#f5fffa', darkColor: '#3cb371', lightWidth: 1, darkWidth: 8};
                window.plugin.showcells.saveStorage();
                window.plugin.showcells.update();
                return;
          },
          'Save': function() {
                var darkCell = parseInt($("#dark-cell").val(), 10);
                var lightCell = parseInt($("#light-cell").val(), 10);
                var darkColor = $("#dark-color").val();
                var lightColor = $("#light-color").val();
                var lightWidth = parseInt($("#light-width").val(), 10);
                var darkWidth = parseInt($("#dark-width").val(), 10);
                console.log("light color: " + lightColor);
                console.log("dark color: " + darkColor);
               
                if (lightCell !== isNaN && darkCell !== isNaN  &&
                   lightCell >= 2 && lightCell < 21 &&
                   darkCell >= 2 && darkCell < 21)
                {
                    window.plugin.showcells.storage.darkCell = darkCell;
                    window.plugin.showcells.storage.lightCell = lightCell;
                    window.plugin.showcells.storage.lightColor = lightColor;
                    window.plugin.showcells.storage.darkColor = darkColor;
                    window.plugin.showcells.storage.lightWidth = lightWidth;
                    window.plugin.showcells.storage.darkWidth = darkWidth;
                  
                    window.plugin.showcells.saveStorage();
                    window.plugin.showcells.update();
                } 
                else
                {
                  alert("Invalid value(s). Cell levels must be numbers between 2 and 20");
                }
                return;
            }
        }
    });
  
  };

  window.plugin.showcells.setup = function()
  {
    window.plugin.showcells.loadStorage();
    // Add a link to the Toolbox to change S2 Level instead of a button
    $('#toolbox').append(' <a onclick="window.plugin.showcells.setCellLevel()" title="Change the level of S2 Cells displayed">Change S2 Level</a>');

    /// S2 Geometry functions
    // the regional scoreboard is based on a level 6 S2 Cell
    // - https://docs.google.com/presentation/d/1Hl4KapfAENAOf4gv-pSngKwvS_jwNVHRPZTTDzXXn6Q/view?pli=1#slide=id.i22
    // at the time of writing there's no actual API for the intel map to retrieve scoreboard data,
    // but it's still useful to plot the score cells on the intel map


    // the S2 geometry is based on projecting the earth sphere onto a cube, with some scaling of face coordinates to
    // keep things close to approximate equal area for adjacent cells
    // to convert a lat,lng into a cell id:
    // - convert lat,lng to x,y,z
    // - convert x,y,z into face,u,v
    // - u,v scaled to s,t with quadratic formula
    // - s,t converted to integer i,j offsets
    // - i,j converted to a position along a Hubbert space-filling curve
    // - combine face,position to get the cell id

    //NOTE: compared to the google S2 geometry library, we vary from their code in the following ways
    // - cell IDs: they combine face and the hilbert curve position into a single 64 bit number. this gives efficient space
    //             and speed. javascript doesn't have appropriate data types, and speed is not cricical, so we use
    //             as [face,[bitpair,bitpair,...]] instead
    // - i,j: they always use 30 bits, adjusting as needed. we use 0 to (1<<level)-1 instead
    //        (so GetSizeIJ for a cell is always 1)

    (function()
    {
      window.S2 = {};

      var LatLngToXYZ = function(latLng)
      {
        var d2r = Math.PI / 180.0;
        var phi = latLng.lat * d2r;
        var theta = latLng.lng * d2r;
        var cosphi = Math.cos(phi);
        return [Math.cos(theta) * cosphi, Math.sin(theta) * cosphi, Math.sin(phi)];
      };

      var XYZToLatLng = function(xyz)
      {
        var r2d = 180.0 / Math.PI;
        var lat = Math.atan2(xyz[2], Math.sqrt(xyz[0] * xyz[0] + xyz[1] * xyz[1]));
        var lng = Math.atan2(xyz[1], xyz[0]);
        return L.latLng(lat * r2d, lng * r2d);
      };

      var largestAbsComponent = function(xyz)
      {
        var temp = [Math.abs(xyz[0]), Math.abs(xyz[1]), Math.abs(xyz[2])];

        if (temp[0] > temp[1])
        {
          if (temp[0] > temp[2])
          {
            return 0;
          }
          else
          {
            return 2;
          }
        }
        else
        {
          if (temp[1] > temp[2])
          {
            return 1;
          }
          else
          {
            return 2;
          }
        }
      };

      var faceXYZToUV = function(face, xyz)
      {
        var u, v;

        switch (face)
        {
          case 0:
            u = xyz[1] / xyz[0];
            v = xyz[2] / xyz[0];
            break;
          case 1:
            u = -xyz[0] / xyz[1];
            v = xyz[2] / xyz[1];
            break;
          case 2:
            u = -xyz[0] / xyz[2];
            v = -xyz[1] / xyz[2];
            break;
          case 3:
            u = xyz[2] / xyz[0];
            v = xyz[1] / xyz[0];
            break;
          case 4:
            u = xyz[2] / xyz[1];
            v = -xyz[0] / xyz[1];
            break;
          case 5:
            u = -xyz[1] / xyz[2];
            v = -xyz[0] / xyz[2];
            break;
          default:
            throw {
              error: 'Invalid face'
            };
            break;
        }

        return [u, v];
      }

      var XYZToFaceUV = function(xyz)
      {
        var face = largestAbsComponent(xyz);

        if (xyz[face] < 0)
        {
          face += 3;
        }

        uv = faceXYZToUV(face, xyz);
        return [face, uv];
      };

      var FaceUVToXYZ = function(face, uv)
      {
        var u = uv[0];
        var v = uv[1];

        switch (face)
        {
          case 0:
            return [1, u, v];
          case 1:
            return [-u, 1, v];
          case 2:
            return [-u, -v, 1];
          case 3:
            return [-1, -v, -u];
          case 4:
            return [v, -1, -u];
          case 5:
            return [v, u, -1];
          default:
            throw {
              error: 'Invalid face'
            };
        };
      };

      var STToUV = function(st)
      {
        var singleSTtoUV = function(st)
        {
          if (st >= 0.5)
          {
            return (1 / 3.0) * (4 * st * st - 1);
          }
          else
          {
            return (1 / 3.0) * (1 - (4 * (1 - st) * (1 - st)));
          }
        };

        return [singleSTtoUV(st[0]), singleSTtoUV(st[1])];
      };

      var UVToST = function(uv)
      {
        var singleUVtoST = function(uv)
        {
          if (uv >= 0)
          {
            return 0.5 * Math.sqrt(1 + 3 * uv);
          }
          else
          {
            return 1 - 0.5 * Math.sqrt(1 - 3 * uv);
          }
        };

        return [singleUVtoST(uv[0]), singleUVtoST(uv[1])];
      };

      var STToIJ = function(st, order)
      {
        var maxSize = (1 << order);

        var singleSTtoIJ = function(st)
        {
          var ij = Math.floor(st * maxSize);
          return Math.max(0, Math.min(maxSize - 1, ij));
        };

        return [singleSTtoIJ(st[0]), singleSTtoIJ(st[1])];
      };

      var IJToST = function(ij, order, offsets)
      {
        var maxSize = (1 << order);

        return [
          (ij[0] + offsets[0]) / maxSize,
          (ij[1] + offsets[1]) / maxSize
        ];
      };

      // hilbert space-filling curve
      // based on http://blog.notdot.net/2009/11/Damn-Cool-Algorithms-Spatial-indexing-with-Quadtrees-and-Hilbert-Curves
      // note: rather then calculating the final integer hilbert position, we just return the list of quads
      // this ensures no precision issues whth large orders (S3 cell IDs use up to 30), and is more
      // convenient for pulling out the individual bits as needed later
      var pointToHilbertQuadList = function(x, y, order)
      {
        var hilbertMap = {
          'a': [
            [0, 'd'],
            [1, 'a'],
            [3, 'b'],
            [2, 'a']
          ],
          'b': [
            [2, 'b'],
            [1, 'b'],
            [3, 'a'],
            [0, 'c']
          ],
          'c': [
            [2, 'c'],
            [3, 'd'],
            [1, 'c'],
            [0, 'b']
          ],
          'd': [
            [0, 'a'],
            [3, 'c'],
            [1, 'd'],
            [2, 'd']
          ]
        };

        var currentSquare = 'a';
        var positions = [];

        for (var i = order - 1; i >= 0; i--)
        {
          var mask = 1 << i;
          var quad_x = x & mask ? 1 : 0;
          var quad_y = y & mask ? 1 : 0;
          var t = hilbertMap[currentSquare][quad_x * 2 + quad_y];
          positions.push(t[0]);
          currentSquare = t[1];
        }

        return positions;
      };

      // S2Cell class
      S2.S2Cell = function() {};

      //static method to construct
      S2.S2Cell.FromLatLng = function(latLng, level)
      {
        var xyz = LatLngToXYZ(latLng);
        var faceuv = XYZToFaceUV(xyz);
        var st = UVToST(faceuv[1]);
        var ij = STToIJ(st, level);
        return S2.S2Cell.FromFaceIJ(faceuv[0], ij, level);
      };

      S2.S2Cell.FromFaceIJ = function(face, ij, level)
      {
        var cell = new S2.S2Cell();
        cell.face = face;
        cell.ij = ij;
        cell.level = level;

        return cell;
      };

      S2.S2Cell.prototype.toString = function()
      {
        return 'F' + this.face + 'ij[' + this.ij[0] + ',' + this.ij[1] + ']@' + this.level;
      };

      S2.S2Cell.prototype.getLatLng = function()
      {
        var st = IJToST(this.ij, this.level, [0.5, 0.5]);
        var uv = STToUV(st);
        var xyz = FaceUVToXYZ(this.face, uv);

        return XYZToLatLng(xyz);
      };

      S2.S2Cell.prototype.getCornerLatLngs = function()
      {
        var result = [];
        var offsets = [
          [0.0, 0.0],
          [0.0, 1.0],
          [1.0, 1.0],
          [1.0, 0.0]
        ];

        for (var i = 0; i < 4; i++)
        {
          var st = IJToST(this.ij, this.level, offsets[i]);
          var uv = STToUV(st);
          var xyz = FaceUVToXYZ(this.face, uv);

          result.push(XYZToLatLng(xyz));
        }
        return result;
      };

      S2.S2Cell.prototype.getFaceAndQuads = function()
      {
        var quads = pointToHilbertQuadList(this.ij[0], this.ij[1], this.level);
        return [this.face, quads];
      };

      S2.S2Cell.prototype.getNeighbors = function()
      {
        var fromFaceIJWrap = function(face, ij, level)
        {
          var maxSize = (1 << level);
          if (ij[0] >= 0 && ij[1] >= 0 && ij[0] < maxSize && ij[1] < maxSize)
          {
            // no wrapping out of bounds
            return S2.S2Cell.FromFaceIJ(face, ij, level);
          }
          else
          {
            // the new i,j are out of range.
            // with the assumption that they're only a little past the borders we can just take the points as
            // just beyond the cube face, project to XYZ, then re-create FaceUV from the XYZ vector

            var st = IJToST(ij, level, [0.5, 0.5]);
            var uv = STToUV(st);
            var xyz = FaceUVToXYZ(face, uv);
            var faceuv = XYZToFaceUV(xyz);
            face = faceuv[0];
            uv = faceuv[1];
            st = UVToST(uv);
            ij = STToIJ(st, level);
            return S2.S2Cell.FromFaceIJ(face, ij, level);
          }
        };

        var face = this.face;
        var i = this.ij[0];
        var j = this.ij[1];
        var level = this.level;

        return [
          fromFaceIJWrap(face, [i - 1, j], level),
          fromFaceIJWrap(face, [i, j - 1], level),
          fromFaceIJWrap(face, [i + 1, j], level),
          fromFaceIJWrap(face, [i, j + 1], level)
        ];
      };
    })();

    window.plugin.showcells.regionLayer = L.layerGroup();

    $("<style>")
      .prop("type", "text/css")
      .html(".plugin-showcells-name {\
      font-size: 14px;\
      font-weight: bold;\
      color: gold;\
      opacity: 0.7;\
      text-align: center;\
      text-shadow: -1px -1px #000, 1px -1px #000, -1px 1px #000, 1px 1px #000, 0 0 2px #000; \
      pointer-events: none;\
    }")
      .appendTo("head");

    addLayerGroup('S2 Cells', window.plugin.showcells.regionLayer, true);

    map.on('moveend', window.plugin.showcells.update);

    addHook('search', window.plugin.showcells.search);

    window.plugin.showcells.update();
  };

  window.plugin.showcells.FACE_NAMES = ['AF', 'AS', 'NR', 'PA', 'AM', 'ST'];
  window.plugin.showcells.CODE_WORDS = [
    'ALPHA', 'BRAVO', 'CHARLIE', 'DELTA',
    'ECHO', 'FOXTROT', 'GOLF', 'HOTEL',
    'JULIET', 'KILO', 'LIMA', 'MIKE',
    'NOVEMBER', 'PAPA', 'ROMEO', 'SIERRA',
  ];

  // This regexp is quite forgiving. Dashes are allowed between all components, each dash and leading zero is optional.
  // All whitespace is removed in onSearch(). If the first or both the first and second component are omitted, they are
  // replaced with the current cell's coordinates (=the cell which contains the center point of the map). If the last
  // component is ommited, the 4x4 cell group is used.
  window.plugin.showcells.REGEXP = new RegExp('^(?:(?:(' + plugin.showcells.FACE_NAMES.join('|') + ')-?)?((?:1[0-6])|(?:0?[1-9]))-?)?(' +
    plugin.showcells.CODE_WORDS.join('|') + ')(?:-?((?:1[0-5])|(?:0?\\d)))?$', 'i');

  window.plugin.showcells.regionName = function(cell)
  {
    // ingress does some odd things with the naming. for some faces, the i and j coords are flipped when converting
    // (and not only the names - but the full quad coords too!). easiest fix is to create a temporary cell with the coords
    // swapped
    if (cell.face == 1 || cell.face == 3 || cell.face == 5)
    {
      cell = S2.S2Cell.FromFaceIJ(cell.face, [cell.ij[1], cell.ij[0]], cell.level);
    }

    // first component of the name is the face
    var name = window.plugin.showcells.FACE_NAMES[cell.face];

    if (cell.level >= 4)
    {
      // next two components are from the most signifitant four bits of the cell I/J
      var regionI = cell.ij[0] >> (cell.level - 4);
      var regionJ = cell.ij[1] >> (cell.level - 4);

      name += zeroPad(regionI + 1, 2) + '-' + window.plugin.showcells.CODE_WORDS[regionJ];
    }

    if (cell.level >= 6)
    {
      // the final component is based on the hibbert curve for the relevant cell
      var facequads = cell.getFaceAndQuads();
      var number = facequads[1][4] * 4 + facequads[1][5];

      name += '-' + zeroPad(number, 2);
    }

    return name;
  };

  window.plugin.showcells.search = function(query)
  {
    var terms = query.term.replace(/\s+/g, '').split(/[,;]/);
    var matches = terms.map(function(string)
    {
      return string.match(window.plugin.showcells.REGEXP);
    });
    if (!matches.every(function(match)
      {
        return match !== null;
      })) return;

    var currentCell = window.plugin.showcells.regionName(S2.S2Cell.FromLatLng(map.getCenter(), 6));

    matches.forEach(function(match)
    {
      if (!match[1])
        match[1] = currentCell.substr(0, 2);
      else
        match[1] = match[1].toUpperCase();

      if (!match[2])
        match[2] = currentCell.substr(2, 2);

      match[3] = match[3].toUpperCase();

      var result = window.plugin.showcells.getSearchResult(match);
      if (result) query.addResult(result);
    });
  };

  // rot and d2xy from Wikipedia
  window.plugin.showcells.rot = function(n, x, y, rx, ry)
  {
    if (ry == 0)
    {
      if (rx == 1)
      {
        x = n - 1 - x;
        y = n - 1 - y;
      }

      return [y, x];
    }
    return [x, y];
  }

  window.plugin.showcells.d2xy = function(n, d)
  {
    var rx, ry, s, t = d,
      xy = [0, 0];
    for (s = 1; s < n; s *= 2)
    {
      rx = 1 & (t / 2);
      ry = 1 & (t ^ rx);
      xy = window.plugin.showcells.rot(s, xy[0], xy[1], rx, ry);
      xy[0] += s * rx;
      xy[1] += s * ry;
      t /= 4;
    }
    return xy;
  };

  window.plugin.showcells.getSearchResult = function(match)
  {
    var faceId = window.plugin.showcells.FACE_NAMES.indexOf(match[1]);
    var id1 = parseInt(match[2]);
    var codeWordId = window.plugin.showcells.CODE_WORDS.indexOf(match[3]);
    var id2 = match[4] === undefined ? undefined : parseInt(match[4]);

    if (faceId === -1 || id1 < 1 && id1 > 16 || codeWordId === -1 || id2 < 0 || id2 > 15) return;

    // looks good. now we need the face/i/j values for this cell

    // face is used as-is

    // id1 is the region 'i' value (first 4 bits), codeword is the 'j' value (first 4 bits)
    var regionI = id1 - 1;
    var regionJ = codeWordId;

    var result = {},
      level;

    if (id2 === undefined)
    {
      result.description = 'Regional score cells (cluster of 16 cells)';
      result.icon = 'data:image/svg+xml;base64,' + btoa('<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" version="1.1">\n	<path style="fill:orange;stroke:none" d="M 1,3.5 9,0 11,8.5 3,12 z"/>\n</svg>\n'.replace(/orange/, 'gold'));
      level = 4;
    }
    else
    {
      result.description = 'Regional score cell';
      result.icon = 'data:image/svg+xml;base64,' + btoa('<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" version="1.1">\n	<path style="fill:orange;stroke:none" d="M 1,3.5 9,0 11,8.5 3,12 z"/>\n</svg>\n');
      level = 6;

      var xy = window.plugin.showcells.d2xy(4, id2);
      regionI = (regionI << 2) + xy[0];
      regionJ = (regionJ << 2) + xy[1];
    }

    // as in the name-construction above, for odd numbered faces, the I and J need swapping
    var cell = (faceId % 2 == 1) ?
      S2.S2Cell.FromFaceIJ(faceId, [regionJ, regionI], level) :
      S2.S2Cell.FromFaceIJ(faceId, [regionI, regionJ], level);

    var corners = cell.getCornerLatLngs();

    result.title = window.plugin.showcells.regionName(cell);
    result.layer = L.geodesicPolygon(corners,
    {
      fill: false,
      color: 'red',
      clickable: false
    });
    result.bounds = L.latLngBounds(corners);

    return result;
  };

  window.plugin.showcells.update = function()
  {
    try
    {
      window.plugin.showcells.regionLayer.clearLayers();
    }
    catch (err)
    {
      if (window.plugin.showcells.debug)
      {
        console.log('Error while clearing old boxes: ' + err.message)
      }
    }

    var bounds = map.getBounds();
    var seenCells = {};

    var drawCellAndNeighbors = function(cell, color, selectedWeight)
    {
      var cellStr = cell.toString();

      if (!seenCells[cellStr])
      {
        // cell not visited - flag it as visited now
        seenCells[cellStr] = true;

        // is it on the screen?
        var corners = cell.getCornerLatLngs();
        var cellBounds = L.latLngBounds([corners[0], corners[1]]).extend(corners[2]).extend(corners[3]);

        if (cellBounds.intersects(bounds))
        {
          // on screen - draw it
          window.plugin.showcells.drawCell(cell, color, selectedWeight);

          // and recurse to our neighbors
          var neighbors = cell.getNeighbors();
          for (var i = 0; i < neighbors.length; i++)
          {
            drawCellAndNeighbors(neighbors[i], color, selectedWeight);
          }
        }
      }
    };

    // centre cell
    var zoom = map.getZoom();
    
    var darkCell = window.plugin.showcells.storage.darkCell;
    var lightCell = window.plugin.showcells.storage.lightCell;
    var lightColor = window.plugin.showcells.storage.lightColor;
    var darkColor = window.plugin.showcells.storage.darkColor;
    var darkCellWidth = window.plugin.showcells.storage.darkWidth;
    var lightCellWidth = window.plugin.showcells.storage.lightWidth;
    var maxzoom = 5;
    var greaterCell = 0;
    if (darkCell > lightCell) {
      greaterCell = darkCell;
    } else {
      greaterCell = lightCell;
    }
    
    //FIXME:  This works great with my screen resolution, but may not for others! Needs to be
    //calculated, but I am too lazy.
    if (greaterCell > 10 && greaterCell < 11) {
      maxzoom  = 6;
    }
   
    if (greaterCell > 10 && greaterCell < 13) {
      maxzoom  = 10;
    }
    
    if (greaterCell > 12 && greaterCell < 16) {
      maxzoom  = 12;
    }
    
    if (greaterCell > 15 && greaterCell < 18) {
      maxzoom  = 15;
    }
   
    if (greaterCell > 17 && greaterCell < 20) {
      maxzoom  = 18;
      
    }
    console.log("Set maxzoom to " + maxzoom +", greater cell is " + greaterCell + " and zoom is " + zoom + ".");
   
    if (zoom >= maxzoom)
    { 
      var cellStop = S2.S2Cell.FromLatLng(map.getCenter(), lightCell);
      var cellGym = S2.S2Cell.FromLatLng(map.getCenter(), darkCell);
      
      drawCellAndNeighbors(cellStop, lightColor, lightCellWidth);
      drawCellAndNeighbors(cellGym, darkColor, darkCellWidth );
    }
    
    // the six cube side boundaries. we cheat by hard-coding the coords as it's simple enough
    var latLngs = [
      [45, -180],
      [35.264389682754654, -135],
      [35.264389682754654, -45],
      [35.264389682754654, 45],
      [35.264389682754654, 135],
      [45, 180]
    ];

    var globalCellOptions = {
      color: 'red',
      weight: 7,
      opacity: 0.5,
      clickable: false
    };

    for (var i = 0; i < latLngs.length - 1; i++)
    {
      // the geodesic line code can't handle a line/polyline spanning more than (or close to?) 180 degrees, so we draw
      // each segment as a separate line
      var poly1 = L.geodesicPolyline([latLngs[i], latLngs[i + 1]], globalCellOptions);
      window.plugin.showcells.regionLayer.addLayer(poly1);

      //southern mirror of the above
      var poly2 = L.geodesicPolyline([
        [-latLngs[i][0], latLngs[i][1]],
        [-latLngs[i + 1][0], latLngs[i + 1][1]]
      ], globalCellOptions);
      window.plugin.showcells.regionLayer.addLayer(poly2);
    }

    // and the north-south lines. no need for geodesic here
    for (var i = -135; i <= 135; i += 90)
    {
      var poly = L.polyline([
        [35.264389682754654, i],
        [-35.264389682754654, i]
      ], globalCellOptions);
      window.plugin.showcells.regionLayer.addLayer(poly);
    }
  }

  window.plugin.showcells.drawCell = function(cell, color, selectedWeight)
  {
    //TODO: move to function - then call for all cells on screen

    // corner points
    var corners = cell.getCornerLatLngs();

    // center point
    var center = cell.getLatLng();

    // name
    var name = window.plugin.showcells.regionName(cell);

    // the level 6 cells have noticible errors with non-geodesic lines - and the larger level 4 cells are worse
    // NOTE: we only draw two of the edges. as we draw all cells on screen, the other two edges will either be drawn
    // from the other cell, or be off screen so we don't care
    var region = L.geodesicPolyline([corners[0], corners[1], corners[2]],
    {
      fill: false,
      color: color,
      opacity: 0.5,
      weight: selectedWeight,
      clickable: false
    });

    window.plugin.showcells.regionLayer.addLayer(region);

    // move the label if we're at a high enough zoom level and it's off screen
    if (map.getZoom() >= 9)
    {
      var namebounds = map.getBounds().pad(-0.1); // pad 10% inside the screen bounds
      if (!namebounds.contains(center))
      {
        // name is off-screen. pull it in so it's inside the bounds
        var newlat = Math.max(Math.min(center.lat, namebounds.getNorth()), namebounds.getSouth());
        var newlng = Math.max(Math.min(center.lng, namebounds.getEast()), namebounds.getWest());

        var newpos = L.latLng(newlat, newlng);

        // ensure the new position is still within the same cell
        var newposcell = S2.S2Cell.FromLatLng(newpos, 6);
        if (newposcell.toString() == cell.toString())
        {
          center = newpos;
        }
        // else we leave the name where it was - offscreen
      }
    }

    var marker = L.marker(center,
    {
      icon: L.divIcon(
      {
        className: 'plugin-showcells-name',
        iconAnchor: [100, 5],
        iconSize: [200, 10],
        html: name,
      })
    });
    //window.plugin.showcells.regionLayer.addLayer(marker);  // ;;;;vib
  };

  var setup = window.plugin.showcells.setup;
  // PLUGIN END //////////////////////////////////////////////////////////

  setup.info = plugin_info; //add the script info data to the function as a property
  if (!window.bootPlugins) window.bootPlugins = [];
  window.bootPlugins.push(setup);
  // if IITC has already booted, immediately run the 'setup' function
  if (window.iitcLoaded && typeof setup === 'function') setup();
} // wrapper end

// inject code into site context
var script = document.createElement('script');
var info = {};
if (typeof GM_info !== 'undefined' && GM_info && GM_info.script) info.script = {
  version: GM_info.script.version,
  name: GM_info.script.name,
  description: GM_info.script.description
};
script.appendChild(document.createTextNode('(' + wrapper + ')(' + JSON.stringify(info) + ');'));
(document.body || document.head || document.documentElement).appendChild(script);