viewer: update to leaflet 1.9.4

viewer/MinedMap.js

@@ -17,103 +17,47 @@ function contains(array, elem) {
 	return false;
 }
 
-const MinedMapLayer = L.GridLayer.extend({
+const MinedMapLayer = L.TileLayer.extend({
 	initialize: function (mipmaps, layer) {
+		L.TileLayer.prototype.initialize.call(this, '', {
+			detectRetina: true,
+			tileSize: 512,
+			zoomReverse: true,
+			minZoom: -(mipmaps.length-1),
+			maxZoom: 0,
+			attribution: 'Generated by <a href="https://github.com/neocturne/MinedMap">MinedMap</a>',
+		});
+
+		this.options.maxNativeZoom = this.options.maxZoom;
+		this.options.maxZoom = undefined;
+
 		this.mipmaps = mipmaps;
 		this.layer = layer;
-
-		this.zoomOffset = L.Browser.retina ? 1 : 0;
-
-		this.options.tileSize = L.Browser.retina ? 256 : 512;
-		this.options.attribution = 'Generated by <a href="https://github.com/neocturne/MinedMap">MinedMap</a>';
-
-		this.options.minZoom = -(mipmaps.length-1 + this.zoomOffset);
-		this.options.maxNativeZoom = -this.zoomOffset;
-
-		// for https://github.com/Leaflet/Leaflet/issues/137
-		if (!L.Browser.android) {
-			this.on('tileunload', this._onTileRemove);
-		}
 	},
 
 	createTile: function (coords, done) {
-		const tile = document.createElement('img');
+		const tile = L.TileLayer.prototype.createTile.call(this, coords, done);
 
-		tile.onload = L.bind(this._tileOnLoad, this, done, tile);
+		if (coords.z - this.options.zoomOffset >= 0)
-		tile.onerror = L.bind(this._tileOnError, this, done, tile);
-
-		/*
-		 Alt tag is set to empty string to keep screen readers from reading URL and for compliance reasons
-		 http://www.w3.org/TR/WCAG20-TECHS/H67
-		*/
-		tile.alt = '';
-
-		/*
-		 Set role="presentation" to force screen readers to ignore this
-		 https://www.w3.org/TR/wai-aria/roles#textalternativecomputation
-		*/
-		tile.setAttribute('role', 'presentation');
-
-		let z = -(coords.z + this.zoomOffset);
-		if (z < 0)
-			z = 0;
-
-		const mipmap = this.mipmaps[z];
-
-		if (coords.x >= mipmap.bounds.minX && coords.x <= mipmap.bounds.maxX &&
-		    coords.y >= mipmap.bounds.minZ && coords.y <= mipmap.bounds.maxZ &&
-		    contains(mipmap.regions[coords.y] || [], coords.x))
-			tile.src = 'data/'+this.layer+'/'+z+'/r.'+coords.x+'.'+coords.y+'.png';
-
-		if (z === 0)
 			L.DomUtil.addClass(tile, 'overzoomed');
 
 		return tile;
 	},
 
-	_tileOnLoad: function (done, tile) {
+	getTileUrl: function (coords) {
-		if (L.Browser.ielt9)
+		let z = -coords.z + this.options.zoomOffset;
-			setTimeout(Util.bind(done, this, null, tile), 0);
+		if (z < 0)
-		else
+			z = 0;
-			done(null, tile);
-	},
 
-	_tileOnError: function (done, tile, e) {
+		const mipmap = this.mipmaps[z];
-		done(e, tile);
-	},
 
-	_onTileRemove: function (e) {
+		if (coords.x < mipmap.bounds.minX || coords.x > mipmap.bounds.maxX ||
-		e.tile.onload = null;
+		    coords.y < mipmap.bounds.minZ || coords.y > mipmap.bounds.maxZ ||
-	},
+		    !contains(mipmap.regions[coords.y] || [], coords.x))
+			return L.Util.emptyImageUrl;
 
-	_abortLoading: function () {
-		for (const i in this._tiles) {
-			if (this._tiles[i].coords.z !== this._tileZoom) {
-				const tile = this._tiles[i].el;
 
-				tile.onload = L.Util.falseFn;
+		return 'data/'+this.layer+'/'+z+'/r.'+coords.x+'.'+coords.y+'.png';
-				tile.onerror = L.Util.falseFn;
-
-				if (!tile.complete) {
-					tile.src = L.Util.emptyImageUrl;
-					L.DomUtil.remove(tile);
-				}
-			}
-		}
-	},
-
-	_removeTile: function (key) {
-		const tile = this._tiles[key];
-		if (!tile) { return; }
-
-		// Cancels any pending http requests associated with the tile
-		// unless we're on Android's stock browser,
-		// see https://github.com/Leaflet/Leaflet/issues/137
-		if (!L.Browser.androidStock) {
-			tile.el.setAttribute('src', L.Util.emptyImageUrl);
-		}
-
-		return L.GridLayer.prototype._removeTile.call(this, key);
 	},
 });
 

viewer/index.html

@@ -4,8 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <title>MinedMap</title>
-    <link rel="stylesheet" href="leaflet-1.6.0/leaflet.css" />
+    <link rel="stylesheet" href="leaflet-1.9.4/leaflet.css" />
-    <script src="leaflet-1.6.0/leaflet.js"></script>
+    <script src="leaflet-1.9.4/leaflet.js"></script>
     <script src="MinedMap.js"></script>
 
     <style type="text/css">

viewer/leaflet-1.9.4/leaflet.css

@@ -45,7 +45,10 @@
 	}
 /* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
 /* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
-.leaflet-container .leaflet-overlay-pane svg,
+.leaflet-container .leaflet-overlay-pane svg {
+	max-width: none !important;
+	max-height: none !important;
+	}
 .leaflet-container .leaflet-marker-pane img,
 .leaflet-container .leaflet-shadow-pane img,
 .leaflet-container .leaflet-tile-pane img,
@@ -53,8 +56,15 @@
 .leaflet-container .leaflet-tile {
 	max-width: none !important;
 	max-height: none !important;
+	width: auto;
+	padding: 0;
 	}
 
+.leaflet-container img.leaflet-tile {
+	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
+	mix-blend-mode: plus-lighter;
+}
+
 .leaflet-container.leaflet-touch-zoom {
 	-ms-touch-action: pan-x pan-y;
 	touch-action: pan-x pan-y;
@@ -166,9 +176,6 @@
 
 /* zoom and fade animations */
 
-.leaflet-fade-anim .leaflet-tile {
-	will-change: opacity;
-	}
 .leaflet-fade-anim .leaflet-popup {
 	opacity: 0;
 	-webkit-transition: opacity 0.2s linear;
@@ -183,9 +190,10 @@
 	    -ms-transform-origin: 0 0;
 	        transform-origin: 0 0;
 	}
-.leaflet-zoom-anim .leaflet-zoom-animated {
+svg.leaflet-zoom-animated {
 	will-change: transform;
-	}
+}
+
 .leaflet-zoom-anim .leaflet-zoom-animated {
 	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
 	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
@@ -251,14 +259,11 @@ svg.leaflet-image-layer.leaflet-interactive path {
 
 .leaflet-container {
 	background: #ddd;
-	outline: 0;
+	outline-offset: 1px;
 	}
 .leaflet-container a {
 	color: #0078A8;
 	}
-.leaflet-container a.leaflet-active {
-	outline: 2px solid orange;
-	}
 .leaflet-zoom-box {
 	border: 2px dotted #38f;
 	background: rgba(255,255,255,0.5);
@@ -267,7 +272,10 @@ svg.leaflet-image-layer.leaflet-interactive path {
 
 /* general typography */
 .leaflet-container {
-	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
+	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+	font-size: 0.75rem;
+	line-height: 1.5;
 	}
 
 
@@ -277,8 +285,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
 	border-radius: 4px;
 	}
-.leaflet-bar a,
+.leaflet-bar a {
-.leaflet-bar a:hover {
 	background-color: #fff;
 	border-bottom: 1px solid #ccc;
 	width: 26px;
@@ -295,7 +302,8 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	background-repeat: no-repeat;
 	display: block;
 	}
-.leaflet-bar a:hover {
+.leaflet-bar a:hover,
+.leaflet-bar a:focus {
 	background-color: #f4f4f4;
 	}
 .leaflet-bar a:first-child {
@@ -385,6 +393,8 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	}
 .leaflet-control-layers label {
 	display: block;
+	font-size: 13px;
+	font-size: 1.08333em;
 	}
 .leaflet-control-layers-separator {
 	height: 0;
@@ -393,7 +403,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	}
 
 /* Default icon URLs */
-.leaflet-default-icon-path {
+.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
 	background-image: url(images/marker-icon.png);
 	}
 
@@ -402,23 +412,27 @@ svg.leaflet-image-layer.leaflet-interactive path {
 
 .leaflet-container .leaflet-control-attribution {
 	background: #fff;
-	background: rgba(255, 255, 255, 0.7);
+	background: rgba(255, 255, 255, 0.8);
 	margin: 0;
 	}
 .leaflet-control-attribution,
 .leaflet-control-scale-line {
 	padding: 0 5px;
 	color: #333;
+	line-height: 1.4;
 	}
 .leaflet-control-attribution a {
 	text-decoration: none;
 	}
-.leaflet-control-attribution a:hover {
+.leaflet-control-attribution a:hover,
+.leaflet-control-attribution a:focus {
 	text-decoration: underline;
 	}
-.leaflet-container .leaflet-control-attribution,
+.leaflet-attribution-flag {
-.leaflet-container .leaflet-control-scale {
+	display: inline !important;
-	font-size: 11px;
+	vertical-align: baseline !important;
+	width: 1em;
+	height: 0.6669em;
 	}
 .leaflet-left .leaflet-control-scale {
 	margin-left: 5px;
@@ -431,14 +445,11 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	border-top: none;
 	line-height: 1.1;
 	padding: 2px 5px 1px;
-	font-size: 11px;
 	white-space: nowrap;
-	overflow: hidden;
 	-moz-box-sizing: border-box;
 	     box-sizing: border-box;
-
+	background: rgba(255, 255, 255, 0.8);
-	background: #fff;
+	text-shadow: 1px 1px #fff;
-	background: rgba(255, 255, 255, 0.5);
 	}
 .leaflet-control-scale-line:not(:first-child) {
 	border-top: 2px solid #777;
@@ -474,17 +485,22 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	border-radius: 12px;
 	}
 .leaflet-popup-content {
-	margin: 13px 19px;
+	margin: 13px 24px 13px 20px;
-	line-height: 1.4;
+	line-height: 1.3;
+	font-size: 13px;
+	font-size: 1.08333em;
+	min-height: 1px;
 	}
 .leaflet-popup-content p {
-	margin: 18px 0;
+	margin: 17px 0;
+	margin: 1.3em 0;
 	}
 .leaflet-popup-tip-container {
 	width: 40px;
 	height: 20px;
 	position: absolute;
 	left: 50%;
+	margin-top: -1px;
 	margin-left: -20px;
 	overflow: hidden;
 	pointer-events: none;
@@ -495,6 +511,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	padding: 1px;
 
 	margin: -10px auto 0;
+	pointer-events: auto;
 
 	-webkit-transform: rotate(45deg);
 	   -moz-transform: rotate(45deg);
@@ -511,28 +528,25 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	position: absolute;
 	top: 0;
 	right: 0;
-	padding: 4px 4px 0 0;
 	border: none;
 	text-align: center;
-	width: 18px;
+	width: 24px;
-	height: 14px;
+	height: 24px;
-	font: 16px/14px Tahoma, Verdana, sans-serif;
+	font: 16px/24px Tahoma, Verdana, sans-serif;
-	color: #c3c3c3;
+	color: #757575;
 	text-decoration: none;
-	font-weight: bold;
 	background: transparent;
 	}
-.leaflet-container a.leaflet-popup-close-button:hover {
+.leaflet-container a.leaflet-popup-close-button:hover,
-	color: #999;
+.leaflet-container a.leaflet-popup-close-button:focus {
+	color: #585858;
 	}
 .leaflet-popup-scrolled {
 	overflow: auto;
-	border-bottom: 1px solid #ddd;
-	border-top: 1px solid #ddd;
 	}
 
 .leaflet-oldie .leaflet-popup-content-wrapper {
-	zoom: 1;
+	-ms-zoom: 1;
 	}
 .leaflet-oldie .leaflet-popup-tip {
 	width: 24px;
@@ -541,9 +555,6 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
 	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
 	}
-.leaflet-oldie .leaflet-popup-tip-container {
-	margin-top: -1px;
-	}
 
 .leaflet-oldie .leaflet-control-zoom,
 .leaflet-oldie .leaflet-control-layers,
@@ -578,7 +589,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	pointer-events: none;
 	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
 	}
-.leaflet-tooltip.leaflet-clickable {
+.leaflet-tooltip.leaflet-interactive {
 	cursor: pointer;
 	pointer-events: auto;
 	}
@@ -638,3 +649,13 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	margin-left: -12px;
 	border-right-color: #fff;
 	}
+
+/* Printing */
+
+@media print {
+	/* Prevent printers from removing background-images of controls. */
+	.leaflet-control {
+		-webkit-print-color-adjust: exact;
+		print-color-adjust: exact;
+		}
+	}