Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
IITC plugin: zoom-info
// ==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);
@ryantheleach
Copy link

ryantheleach commented Jul 2, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment