IITC plugin: zoom-info

zoom-info.user.js

// ==UserScript==
// @id             iitc-plugin-zoom-info
// @name           IITC plugin: zoom-info
// @description    zoomcontrol plugin with map zoom level information
// @category       test
// @version        0.1.0
// @author         jd
// @namespace      https://gist.github.com/johnd0e
// @homepageURL    https://gist.github.com/johnd0e/%
// @supportURL     https://gist.github.com/johnd0e/%#new_comment_field
// @updateURL      https://gist.github.com/johnd0e/%/raw/zoom-info.meta.js
// @downloadURL    https://gist.github.com/johnd0e/%/raw/zoom-info.user.js
// @include        https://intel.ingress.com/intel*
// @grant          none
// @run-at         document-start
// ==/UserScript==


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 START ////////////////////////////////////////////////////////

// https://github.com/flaviocarmo/Leaflet.zoominfo

let css = "\
/** Slider **/\
.leaflet-control-zoominfo-wrap {\
  padding-top: 5px;\
  padding-bottom: 5px;\
  background-color: #fff;\
  border-bottom: 1px solid #ccc;\
}\
.leaflet-control-zoominfo-body {\
  width: 2px;\
  border: solid #fff;\
  border-width: 0px 9px 0px 9px;\
  background-color: black;\
  margin: 0 auto;\
}\
\
.leaflet-control-zoominfo-body:hover {\
  cursor: pointer;\
}\
\
.leaflet-dragging .leaflet-control-zoominfo,\
.leaflet-dragging .leaflet-control-zoominfo-wrap,\
.leaflet-dragging .leaflet-control-zoominfo-body,\
.leaflet-dragging .leaflet-control-zoominfo a,\
.leaflet-dragging .leaflet-control-zoominfo a.leaflet-control-zoominfo-disabled {\
  cursor: move;\
  cursor: -webkit-grabbing;\
  cursor:    -moz-grabbing;\
}\
\
/** Leaflet Zoom Styles **/\
.leaflet-container .leaflet-control-zoominfo {\
  margin-left: 10px;\
  margin-top: 10px;\
}\
.leaflet-control-zoominfo a {\
  width: 26px;\
  height: 26px;\
  text-align: center;\
  text-decoration: none;\
  color: black;\
  display: block;\
}\
.leaflet-control-zoominfo a:hover {\
  background-color: #f4f4f4;\
}\
.leaflet-control-zoominfo-in {\
  font: bold 18px 'Lucida Console', Monaco, monospace;\
}\
.leaflet-control-zoominfo-in:after{\
  content:'+'\
}\
.leaflet-control-zoominfo-out {\
  font: bold 22px 'Lucida Console', Monaco, monospace;\
}\
.leaflet-control-zoominfo-out:after{\
  content:'−'\
}\
.leaflet-control-zoominfo a.leaflet-control-zoominfo-disabled {\
  cursor: default;\
  color: #bbb;\
}\
\
/* Touch */\
.leaflet-touch .leaflet-control-zoominfo-body {\
  background-position: 10px 0px;\
}\
.leaflet-touch .leaflet-control-zoominfo a {\
  width: 30px;\
  line-height: 30px;\
}\
.leaflet-touch .leaflet-control-zoominfo a:hover {\
  width: 30px;\
  line-height: 30px;\
}\
.leaflet-touch .leaflet-control-zoominfo-in {\
  font-size: 24px;\
  line-height: 29px;\
}\
.leaflet-touch .leaflet-control-zoominfo-out {\
  font-size: 28px;\
  line-height: 30px;\
}\
.leaflet-touch .leaflet-control-zoominfo {\
  box-shadow: none;\
  border: 4px solid rgba(0,0,0,0.3);\
}\
\
.leaflet-control-zoominfo-info { \
  margin-left: -13px;\
  background-color: #fff;\
  border: none;\
  width: 22px;\
  height: 22px;\
  display: block;\
  text-align: center;\
  text-decoration: none;\
  color: black;\
  padding: 4px 4px 0px 3px;\
\
  border-radius: 4px; \
  cursor: default;\
}\
\
.leaflet-control-zoominfoinfo h4 { \
  margin: 0 0 0px 0px; \
  color: #000; \
}\
\
/* Old IE */\
\
.leaflet-oldie .leaflet-control-zoominfo-wrap {\
  width: 26px;\
}\
\
.leaflet-oldie .leaflet-control-zoominfo {\
  border: 1px solid #999;\
}\
\
.leaflet-oldie .leaflet-control-zoominfo-in {\
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '+');\
}\
.leaflet-oldie .leaflet-control-zoominfo-out {\
  *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '-');\
}}";

function setup () {
  (function (factory) {
    // Packaging/modules magic dance
    var L;
    if (typeof define === 'function' && define.amd) {
      // AMD
      define(['leaflet'], factory);
    } else if (typeof module !== 'undefined') {
      // Node/CommonJS
      L = require('leaflet');
      module.exports = factory(L);
    } else {
      // Browser globals
      if (typeof window.L === 'undefined') {
        throw new Error('Leaflet must be loaded first');
          }
      factory(window.L);
    }
  }(function (L) {
    'use strict';

    L.Control.Zoominfo = (function () {

      var Zoominfo = L.Control.extend({
        options: {
          position: 'topleft',
          styleNS: 'leaflet-control-zoominfo'
        },

        onAdd: function (map) {
          this._map = map;
          this._ui = this._createUI();

          map.whenReady(this._initInfo,        this)
            .whenReady(this._initEvents,      this)
            .whenReady(this._updateInfoValue, this)
            .whenReady(this._updateDisabled,  this);
          return this._ui.bar;
        },

        onRemove: function (map) {
          map.off('zoomlevelschange',         this._updateSize,      this)
            .off('zoomend zoomlevelschange', this._updateInfoValue, this)
            .off('zoomend zoomlevelschange', this._updateDisabled,  this);
        },

        _createUI: function () {
          var ui = {},
            ns = this.options.styleNS;

          ui.bar     = L.DomUtil.create('div', ns + ' leaflet-bar');
          ui.zoomIn  = this._createZoomBtn('in', 'top', ui.bar);
          ui.wrap    = L.DomUtil.create('div', ns + '-wrap leaflet-bar-part', ui.bar);
          ui.zoomOut = this._createZoomBtn('out', 'bottom', ui.bar);
          ui.body    = L.DomUtil.create('div', ns + '-body', ui.wrap);
          ui.info    = L.DomUtil.create('div', ns + '-info');

          L.DomEvent.disableClickPropagation(ui.bar);
          L.DomEvent.disableClickPropagation(ui.info);

          return ui;
        },
        _createZoomBtn: function (zoomDir, end, container) {
          var classDef = this.options.styleNS + '-' + zoomDir +
              ' leaflet-bar-part' +
              ' leaflet-bar-part-' + end,
            link = L.DomUtil.create('a', classDef, container);

          link.href = '#';
          link.title = 'Zoom ' + zoomDir;

          L.DomEvent.on(link, 'click', L.DomEvent.preventDefault);

          return link;
        },

        _initInfo: function () {
          this._ui.body.appendChild(this._ui.info);
        },
        _initEvents: function () {
          this._map
            .on('zoomend zoomlevelschange', this._updateInfoValue, this)
            .on('zoomend zoomlevelschange', this._updateDisabled,  this);

          L.DomEvent.on(this._ui.zoomIn,  'click', this._zoomIn,        this);
          L.DomEvent.on(this._ui.zoomOut, 'click', this._zoomOut,       this);
        },

        _zoomIn: function (e) {
          this._map.zoomIn(e.shiftKey ? 3 : 1);
        },
        _zoomOut: function (e) {
          this._map.zoomOut(e.shiftKey ? 3 : 1);
        },

        _zoomLevels: function () {
          var zoomLevels = this._map.getMaxZoom() - this._map.getMinZoom() + 1;
          return zoomLevels < Infinity ? zoomLevels : 0;
        },
        _toZoomLevel: function (value) {
          return value + this._map.getMinZoom();
        },
        _toValue: function (zoomLevel) {
          return zoomLevel - this._map.getMinZoom();
        },

        _updateInfoValue: function () {
          this._ui.info.innerHTML = '<strong>'+ this._map.getZoom() + '</strong>';
        },
        _updateDisabled: function () {
          var zoomLevel = this._map.getZoom(),
            className = this.options.styleNS + '-disabled';

          L.DomUtil.removeClass(this._ui.zoomIn,  className);
          L.DomUtil.removeClass(this._ui.zoomOut, className);

          if (zoomLevel === this._map.getMinZoom()) {
            L.DomUtil.addClass(this._ui.zoomOut, className);
          }
          if (zoomLevel === this._map.getMaxZoom()) {
            L.DomUtil.addClass(this._ui.zoomIn, className);
          }
        }
      });

      return Zoominfo;
    })();

    L.Map.addInitHook(function () {
      if (this.options.zoominfoControl) {
        this.zoominfoControl = new L.Control.Zoominfo();
        this.addControl(this.zoominfoControl);
      }
    });

    L.control.zoominfo = function (options) {
      return new L.Control.Zoominfo(options);
    };
  }));

  $('<style>').prop('type', 'text/css').html(css).appendTo('head');
  L.control.zoominfo().addTo(map);
}

// 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);

This is really cool, but needs to remove the default zoom bar.

I'd love it if it incorporated "ZL" and "ZP" from other zoom plugins, which zooms to the furtherst 'all links' and 'all portals' zoom levels