[CQ Map] Added full screen option

application/views/interface_assets/footer.php

@@ -16,6 +16,7 @@
 <script src="<?php echo base_url(); ?>assets/js/bootstrap.bundle.js"></script>
 <script src="<?php echo base_url(); ?>assets/js/jquery.jclock.js"></script>
 <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/leaflet/leaflet.js"></script>
+<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/leaflet/Control.FullScreen.js"></script>
 <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/leaflet/L.Maidenhead.qrb.js"></script>
 <?php if ($this->uri->segment(1) == "activators") { ?>
 <script type="text/javascript" src="<?php echo base_url();?>assets/js/leaflet/L.Maidenhead.activators.js"></script>

application/views/interface_assets/header.php

@@ -20,6 +20,7 @@
 
     <!-- Maps -->
     <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/js/leaflet/leaflet.css" />
+	<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/js/leaflet/Control.FullScreen.css" />
 
     <?php if ($this->uri->segment(1) == "search" && $this->uri->segment(2) == "filter") { ?>
     <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/query-builder.default.min.css" />

assets/js/leaflet/Control.FullScreen.css

@@ -0,0 +1,10 @@
+.fullscreen-icon { background-image: url(icon-fullscreen.svg); background-size:26px 52px; }
+.fullscreen-icon.leaflet-fullscreen-on { background-position:0 -26px; }
+.leaflet-touch .fullscreen-icon { background-position: 2px 2px; }
+.leaflet-touch .fullscreen-icon.leaflet-fullscreen-on { background-position: 2px -24px; }
+/* one selector per rule as explained here : http://www.sitepoint.com/html5-full-screen-api/ */
+.leaflet-container:-webkit-full-screen { width: 100% !important; height: 100% !important; z-index: 99999; }
+.leaflet-container:-ms-fullscreen { width: 100% !important; height: 100% !important; z-index: 99999; }
+.leaflet-container:full-screen { width: 100% !important; height: 100% !important; z-index: 99999; }
+.leaflet-container:fullscreen { width: 100% !important; height: 100% !important; z-index: 99999; }
+.leaflet-pseudo-fullscreen { position: fixed !important; width: 100% !important; height: 100% !important; top: 0px !important; left: 0px !important; z-index: 99999; }

assets/js/leaflet/Control.FullScreen.js

@@ -0,0 +1,345 @@
+/*!
+* Based on package 'screenfull'
+* v5.2.0 - 2021-11-03
+* (c) Sindre Sorhus; MIT License
+* Added definition for using screenfull as an amd module
+* Must be placed before the definition of leaflet.fullscreen
+* as it is required by that
+*/
+(function (root, factory) {
+	if (typeof define === 'function' && define.amd) {
+		define('screenfull', factory);
+  } else if (typeof module === 'object' && module.exports) {
+		module.exports.screenfull = factory();
+  } else {
+		// Save 'screenfull' into global window variable
+		root.screenfull = factory();
+	}
+}(typeof self !== 'undefined' ? self : this, function () {
+	'use strict';
+
+	var document = typeof window !== 'undefined' && typeof window.document !== 'undefined' ? window.document : {};
+
+	var fn = (function () {
+		var val;
+
+		var fnMap = [
+			[
+				'requestFullscreen',
+				'exitFullscreen',
+				'fullscreenElement',
+				'fullscreenEnabled',
+				'fullscreenchange',
+				'fullscreenerror'
+			],
+			// New WebKit
+			[
+				'webkitRequestFullscreen',
+				'webkitExitFullscreen',
+				'webkitFullscreenElement',
+				'webkitFullscreenEnabled',
+				'webkitfullscreenchange',
+				'webkitfullscreenerror'
+
+			],
+			// Old WebKit
+			[
+				'webkitRequestFullScreen',
+				'webkitCancelFullScreen',
+				'webkitCurrentFullScreenElement',
+				'webkitCancelFullScreen',
+				'webkitfullscreenchange',
+				'webkitfullscreenerror'
+
+			],
+			[
+				'mozRequestFullScreen',
+				'mozCancelFullScreen',
+				'mozFullScreenElement',
+				'mozFullScreenEnabled',
+				'mozfullscreenchange',
+				'mozfullscreenerror'
+			],
+			[
+				'msRequestFullscreen',
+				'msExitFullscreen',
+				'msFullscreenElement',
+				'msFullscreenEnabled',
+				'MSFullscreenChange',
+				'MSFullscreenError'
+			]
+		];
+
+		var i = 0;
+		var l = fnMap.length;
+		var ret = {};
+
+		for (; i < l; i++) {
+			val = fnMap[i];
+			if (val && val[1] in document) {
+				for (i = 0; i < val.length; i++) {
+					ret[fnMap[0][i]] = val[i];
+				}
+				return ret;
+			}
+		}
+
+		return false;
+	})();
+
+	var eventNameMap = {
+		change: fn.fullscreenchange,
+		error: fn.fullscreenerror
+	};
+
+	var screenfull = {
+		request: function (element, options) {
+			return new Promise(function (resolve, reject) {
+				var onFullScreenEntered = function () {
+					this.off('change', onFullScreenEntered);
+					resolve();
+				}.bind(this);
+
+				this.on('change', onFullScreenEntered);
+
+				element = element || document.documentElement;
+
+				var returnPromise = element[fn.requestFullscreen](options);
+
+				if (returnPromise instanceof Promise) {
+					returnPromise.then(onFullScreenEntered).catch(reject);
+				}
+			}.bind(this));
+		},
+		exit: function () {
+			return new Promise(function (resolve, reject) {
+				if (!this.isFullscreen) {
+					resolve();
+					return;
+				}
+
+				var onFullScreenExit = function () {
+					this.off('change', onFullScreenExit);
+					resolve();
+				}.bind(this);
+
+				this.on('change', onFullScreenExit);
+
+				var returnPromise = document[fn.exitFullscreen]();
+
+				if (returnPromise instanceof Promise) {
+					returnPromise.then(onFullScreenExit).catch(reject);
+				}
+			}.bind(this));
+		},
+		toggle: function (element, options) {
+			return this.isFullscreen ? this.exit() : this.request(element, options);
+		},
+		onchange: function (callback) {
+			this.on('change', callback);
+		},
+		onerror: function (callback) {
+			this.on('error', callback);
+		},
+		on: function (event, callback) {
+			var eventName = eventNameMap[event];
+			if (eventName) {
+				document.addEventListener(eventName, callback, false);
+			}
+		},
+		off: function (event, callback) {
+			var eventName = eventNameMap[event];
+			if (eventName) {
+				document.removeEventListener(eventName, callback, false);
+			}
+		},
+		raw: fn
+	};
+
+	if (!fn) {
+		return {isEnabled: false};
+	} else {
+		Object.defineProperties(screenfull, {
+			isFullscreen: {
+				get: function () {
+					return Boolean(document[fn.fullscreenElement]);
+				}
+			},
+			element: {
+				enumerable: true,
+				get: function () {
+					return document[fn.fullscreenElement];
+				}
+			},
+			isEnabled: {
+				enumerable: true,
+				get: function () {
+					// Coerce to boolean in case of old WebKit
+					return Boolean(document[fn.fullscreenEnabled]);
+				}
+			}
+		});
+		return screenfull;
+	}
+}));
+
+/*!
+* leaflet.fullscreen
+*/
+(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+		// define an AMD module that requires 'leaflet' and 'screenfull'
+		// and resolve to an object containing leaflet and screenfull
+		define('leafletFullScreen', ['leaflet', 'screenfull'], factory);
+  } else if (typeof module === 'object' && module.exports) {
+		// define a CommonJS module that requires 'leaflet' and 'screenfull'
+		module.exports = factory(require('leaflet'), require('screenfull'));
+  } else {
+		// Assume 'leaflet' and 'screenfull' are loaded into global variable already
+		factory(root.L, root.screenfull);
+	}
+}(typeof self !== 'undefined' ? self : this, function (leaflet, screenfull) {
+	'use strict';
+
+	leaflet.Control.FullScreen = leaflet.Control.extend({
+		options: {
+			position: 'topleft',
+			title: 'Full Screen',
+			titleCancel: 'Exit Full Screen',
+			forceSeparateButton: false,
+			forcePseudoFullscreen: false,
+			fullscreenElement: false
+		},
+
+		_screenfull: screenfull,
+
+		onAdd: function (map) {
+			var className = 'leaflet-control-zoom-fullscreen', container, content = '';
+
+			if (map.zoomControl && !this.options.forceSeparateButton) {
+				container = map.zoomControl._container;
+			} else {
+				container = leaflet.DomUtil.create('div', 'leaflet-bar');
+			}
+
+			if (this.options.content) {
+				content = this.options.content;
+			} else {
+				className += ' fullscreen-icon';
+			}
+
+			this._createButton(this.options.title, className, content, container, this.toggleFullScreen, this);
+			this._map.fullscreenControl = this;
+
+			this._map.on('enterFullscreen exitFullscreen', this._toggleState, this);
+
+			return container;
+		},
+
+		onRemove: function () {
+			leaflet.DomEvent
+				.off(this.link, 'click', leaflet.DomEvent.stop)
+				.off(this.link, 'click', this.toggleFullScreen, this);
+
+			if (this._screenfull.isEnabled) {
+				leaflet.DomEvent
+					.off(this._container, this._screenfull.raw.fullscreenchange, leaflet.DomEvent.stop)
+					.off(this._container, this._screenfull.raw.fullscreenchange, this._handleFullscreenChange, this);
+
+				leaflet.DomEvent
+					.off(document, this._screenfull.raw.fullscreenchange, leaflet.DomEvent.stop)
+					.off(document, this._screenfull.raw.fullscreenchange, this._handleFullscreenChange, this);
+			}
+		},
+
+		_createButton: function (title, className, content, container, fn, context) {
+			this.link = leaflet.DomUtil.create('a', className, container);
+			this.link.href = '#';
+			this.link.title = title;
+			this.link.innerHTML = content;
+
+			this.link.setAttribute('role', 'button');
+			this.link.setAttribute('aria-label', title);
+
+			L.DomEvent.disableClickPropagation(container);
+
+			leaflet.DomEvent
+				.on(this.link, 'click', leaflet.DomEvent.stop)
+				.on(this.link, 'click', fn, context);
+
+			if (this._screenfull.isEnabled) {
+				leaflet.DomEvent
+					.on(container, this._screenfull.raw.fullscreenchange, leaflet.DomEvent.stop)
+					.on(container, this._screenfull.raw.fullscreenchange, this._handleFullscreenChange, context);
+
+				leaflet.DomEvent
+					.on(document, this._screenfull.raw.fullscreenchange, leaflet.DomEvent.stop)
+					.on(document, this._screenfull.raw.fullscreenchange, this._handleFullscreenChange, context);
+			}
+
+			return this.link;
+		},
+
+		toggleFullScreen: function () {
+			var map = this._map;
+			map._exitFired = false;
+			if (map._isFullscreen) {
+				if (this._screenfull.isEnabled && !this.options.forcePseudoFullscreen) {
+					this._screenfull.exit();
+				} else {
+					leaflet.DomUtil.removeClass(this.options.fullscreenElement ? this.options.fullscreenElement : map._container, 'leaflet-pseudo-fullscreen');
+					map.invalidateSize();
+				}
+				map.fire('exitFullscreen');
+				map._exitFired = true;
+				map._isFullscreen = false;
+			}
+			else {
+				if (this._screenfull.isEnabled && !this.options.forcePseudoFullscreen) {
+					this._screenfull.request(this.options.fullscreenElement ? this.options.fullscreenElement : map._container);
+				} else {
+					leaflet.DomUtil.addClass(this.options.fullscreenElement ? this.options.fullscreenElement : map._container, 'leaflet-pseudo-fullscreen');
+					map.invalidateSize();
+				}
+				map.fire('enterFullscreen');
+				map._isFullscreen = true;
+			}
+		},
+
+		_toggleState: function () {
+			this.link.title = this._map._isFullscreen ? this.options.title : this.options.titleCancel;
+			this._map._isFullscreen ? L.DomUtil.removeClass(this.link, 'leaflet-fullscreen-on') : L.DomUtil.addClass(this.link, 'leaflet-fullscreen-on');
+		},
+
+		_handleFullscreenChange: function () {
+			var map = this._map;
+			map.invalidateSize();
+			if (!this._screenfull.isFullscreen && !map._exitFired) {
+				map.fire('exitFullscreen');
+				map._exitFired = true;
+				map._isFullscreen = false;
+			}
+		}
+	});
+
+	leaflet.Map.include({
+		toggleFullscreen: function () {
+			this.fullscreenControl.toggleFullScreen();
+		}
+	});
+
+	leaflet.Map.addInitHook(function () {
+		if (this.options.fullscreenControl) {
+			this.addControl(leaflet.control.fullscreen(this.options.fullscreenControlOptions));
+		}
+	});
+
+	leaflet.control.fullscreen = function (options) {
+		return new leaflet.Control.FullScreen(options);
+	};
+
+	// must return an object containing also screenfull to make screenfull
+	// available outside of this package, if used as an amd module,
+	// as webpack cannot handle amd define with moduleid
+	return {leaflet: leaflet, screenfull: screenfull};
+}));

assets/js/leaflet/icon-fullscreen.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 26 52" xmlns="http://www.w3.org/2000/svg"><path d="M20.6 36.7H16a.9.9 0 0 1-.8-.8v-4.5c0-.2.2-.4.4-.4h1.4c.3 0 .5.2.5.4v3h3c.2 0 .4.2.4.5v1.4c0 .2-.2.4-.4.4zm-9.9-.8v-4.5c0-.2-.2-.4-.4-.4H8.9c-.3 0-.5.2-.5.4v3h-3c-.2 0-.4.2-.4.5v1.4c0 .2.2.4.4.4H10c.4 0 .8-.4.8-.8zm0 10.7V42c0-.4-.4-.8-.8-.8H5.4c-.2 0-.4.2-.4.4v1.4c0 .3.2.5.4.5h3v3c0 .2.2.4.5.4h1.4c.2 0 .4-.2.4-.4zm6.9 0v-3h3c.2 0 .4-.2.4-.5v-1.4c0-.2-.2-.4-.4-.4H16c-.4 0-.8.4-.8.8v4.5c0 .2.2.4.4.4h1.4c.3 0 .5-.2.5-.4zM5 10.3V5.9c0-.5.4-.9.9-.9h4.4c.2 0 .4.2.4.4V7c0 .2-.2.4-.4.4h-3v3c0 .2-.2.4-.4.4H5.4a.4.4 0 0 1-.4-.4zm10.3-4.9V7c0 .2.2.4.4.4h3v3c0 .2.2.4.4.4h1.5c.2 0 .4-.2.4-.4V5.9c0-.5-.4-.9-.9-.9h-4.4c-.2 0-.4.2-.4.4zm5.3 9.9H19c-.2 0-.4.2-.4.4v3h-3c-.2 0-.4.2-.4.4v1.5c0 .2.2.4.4.4h4.4c.5 0 .9-.4.9-.9v-4.4c0-.2-.2-.4-.4-.4zm-9.9 5.3V19c0-.2-.2-.4-.4-.4h-3v-3c0-.2-.2-.4-.4-.4H5.4c-.2 0-.4.2-.4.4v4.4c0 .5.4.9.9.9h4.4c.2 0 .4-.2.4-.4z" fill="currentColor"/></svg>

assets/js/sections/cqmap.js

@@ -119,7 +119,13 @@ function load_cq_map2(data) {
         $("#cqmaptab").append('<div id="cqmap"></div>');
     }
 
-    var map = L.map('cqmap');
+    var map = new L.Map('cqmap', {
+        fullscreenControl: true,
+        fullscreenControlOptions: {
+          position: 'topleft'
+        },
+      });
+
     L.tileLayer(
         osmUrl,
         {