fix: add key_query to static assets 🎉 (#730)

* fix: add `key_query` to static assets

Signed-off-by: Vinayak Kulkarni <19776877+vinayakkulkarni@users.noreply.github.com>

* style: fix lint issues in css

Signed-off-by: Vinayak Kulkarni <19776877+vinayakkulkarni@users.noreply.github.com>

* fix: issue with static images in `leaflet.css`

Signed-off-by: Vinayak Kulkarni <19776877+vinayakkulkarni@users.noreply.github.com>

Signed-off-by: Vinayak Kulkarni <19776877+vinayakkulkarni@users.noreply.github.com>

public/resources/index.css

@@ -17,38 +17,38 @@
   font-style: normal;
 }
 
-body{
+body {
   background-color: #fff;
   color: #212121;
-  font-family:'OpenSans', sans-serif, Arial;
+  font-family: 'OpenSans', sans-serif, Arial;
   font-size: 14px;
-  margin:0;
+  margin: 0;
-  background-repeat:no-repeat !important;
+  background-repeat: no-repeat !important;
   background-size: contain !important;
   background-image: url(/images/header-map-1280px.png);
 }
-a{
+a {
-  color: #499DCE;
+  color: #499dce;
-  transition: color .2s;
+  transition: color 0.2s;
 }
 a:hover {
-  color: #395D73;
+  color: #395d73;
 }
 .title {
   font-weight: bold;
   font-size: 32px;
-  text-align:center;
+  text-align: center;
-  margin:90px 0 0 0;
+  margin: 90px 0 0 0;
-  position:relative;
+  position: relative;
 }
 .title.light:after {
-  content: "light";
+  content: 'light';
   display: block;
   position: absolute;
   left: 50%;
   bottom: -5px;
-  color: #499DCE;
+  color: #499dce;
-  font-size:.8em;
+  font-size: 0.8em;
 }
 section {
   margin: 15px auto;
@@ -60,27 +60,27 @@ section {
 }
 .subtitle {
   font-size: 26px;
-  font-weight:normal;
+  font-weight: normal;
-  text-align:center;
+  text-align: center;
-  margin:10px 0 95px 0;
+  margin: 10px 0 95px 0;
 }
 .box-header {
-  text-align:left;
+  text-align: left;
-  text-transform:uppercase;
+  text-transform: uppercase;
-  border:1px solid #ededed;
+  border: 1px solid #ededed;
-  margin:25px 0 0 0;
+  margin: 25px 0 0 0;
-  padding:12px 30px;
+  padding: 12px 30px;
-  font-size:20px;
+  font-size: 20px;
-  background:#fff;
+  background: #fff;
 }
 .item {
-  background:#fff;
+  background: #fff;
   height: 191px;
   border: 1px solid #ededed;
-  border-top:none;
+  border-top: none;
 }
 .item:nth-child(odd) {
-  background-color:#fbfbfb;
+  background-color: #fbfbfb;
 }
 .item img {
   position: absolute;
@@ -91,27 +91,27 @@ section {
   border: 1px solid #ccc;
 }
 .details {
-  float:left;
+  float: left;
   height: 128px;
   padding: 20px 30px 20px 188px;
 }
 .details h3 {
-  font-size:18px;
+  font-size: 18px;
   margin-top: 25px;
 }
 .details p {
-  padding:0;
+  padding: 0;
-  margin:18px 0;
+  margin: 18px 0;
 }
 .viewers {
-  float:right;
+  float: right;
-  text-align:center;
+  text-align: center;
   width: 120px;
   margin-top: 25px;
   padding-right: 30px;
 }
 .btn {
-  display:block;
+  display: block;
   margin: 0;
   line-height: 36px;
 }
@@ -119,57 +119,58 @@ section {
   position: relative;
   padding: 0;
   overflow: hidden;
-  border-radius:4px;
+  border-radius: 4px;
-  background-color: #499DCE;
+  background-color: #499dce;
   background: linear-gradient(90deg, #5aaad8, #4a9ecf);
   color: #fff;
   text-decoration: none;
   font-weight: bold;
 }
 .btn:first-child:hover {
-  background: #395D73;
+  background: #395d73;
 }
 footer {
-  width:100%;
+  width: 100%;
-  border-top:1px solid #ededed;
+  border-top: 1px solid #ededed;
-  text-align:center;
+  text-align: center;
-  color:#d3d3d3;
+  color: #d3d3d3;
-  padding-top:10px;
+  padding-top: 10px;
-  font-size:12px;
+  font-size: 12px;
 }
 footer img {
   width: 113px;
   height: 31px;
 }
 footer .t {
-  display:none;
+  display: none;
 }
 footer p {
-  margin-top:0;
+  margin-top: 0;
 }
 footer a {
   color: #787878;
   text-decoration: none;
 }
-.details h3, .identifier {
+.details h3,
+.identifier {
   max-width: 550px;
   word-break: break-all;
 }
 
 /* Responsive */
 @media (max-width: 950px) {
-  section{
+  section {
     margin: 0;
     width: 96%;
     padding: 2%;
   }
 }
 @media (max-width: 600px) {
-  .title{
+  .title {
     margin: 25px 0 0 0;
   }
   .title.light:after {
-    font-size:.6em;
+    font-size: 0.6em;
   }
   .title img {
     width: 200px;

public/resources/leaflet.css

@@ -13,10 +13,10 @@
   position: absolute;
   left: 0;
   top: 0;
-	}
+}
 .leaflet-container {
   overflow: hidden;
-	}
+}
 .leaflet-tile,
 .leaflet-marker-icon,
 .leaflet-marker-shadow {
@@ -24,7 +24,7 @@
   -moz-user-select: none;
   user-select: none;
   -webkit-user-drag: none;
-	}
+}
 /* Prevents IE11 from highlighting tiles in blue */
 .leaflet-tile::selection {
   background: transparent;
@@ -32,23 +32,23 @@
 /* Safari renders non-retina tile on retina better with this, but Chrome is worse */
 .leaflet-safari .leaflet-tile {
   image-rendering: -webkit-optimize-contrast;
-	}
+}
 /* hack that prevents hw layers "stretching" when loading new tiles */
 .leaflet-safari .leaflet-tile-container {
   width: 1600px;
   height: 1600px;
   -webkit-transform-origin: 0 0;
-	}
+}
 .leaflet-marker-icon,
 .leaflet-marker-shadow {
   display: block;
-	}
+}
 /* .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 {
   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,
@@ -58,12 +58,12 @@
   max-height: none !important;
   width: auto;
   padding: 0;
-	}
+}
 
 .leaflet-container.leaflet-touch-zoom {
   -ms-touch-action: pan-x pan-y;
   touch-action: pan-x pan-y;
-	}
+}
 .leaflet-container.leaflet-touch-drag {
   -ms-touch-action: pinch-zoom;
   /* Fallback for FF which doesn't support pinch-zoom */
@@ -83,44 +83,61 @@
 .leaflet-tile {
   filter: inherit;
   visibility: hidden;
-	}
+}
 .leaflet-tile-loaded {
   visibility: inherit;
-	}
+}
 .leaflet-zoom-box {
   width: 0;
   height: 0;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   z-index: 800;
-	}
+}
 /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
 .leaflet-overlay-pane svg {
   -moz-user-select: none;
-	}
+}
 
-.leaflet-pane         { z-index: 400; }
+.leaflet-pane {
+  z-index: 400;
+}
 
-.leaflet-tile-pane    { z-index: 200; }
+.leaflet-tile-pane {
-.leaflet-overlay-pane { z-index: 400; }
+  z-index: 200;
-.leaflet-shadow-pane  { z-index: 500; }
+}
-.leaflet-marker-pane  { z-index: 600; }
+.leaflet-overlay-pane {
-.leaflet-tooltip-pane   { z-index: 650; }
+  z-index: 400;
-.leaflet-popup-pane   { z-index: 700; }
+}
+.leaflet-shadow-pane {
+  z-index: 500;
+}
+.leaflet-marker-pane {
+  z-index: 600;
+}
+.leaflet-tooltip-pane {
+  z-index: 650;
+}
+.leaflet-popup-pane {
+  z-index: 700;
+}
 
-.leaflet-map-pane canvas { z-index: 100; }
+.leaflet-map-pane canvas {
-.leaflet-map-pane svg    { z-index: 200; }
+  z-index: 100;
+}
+.leaflet-map-pane svg {
+  z-index: 200;
+}
 
 .leaflet-vml-shape {
   width: 1px;
   height: 1px;
-	}
+}
 .lvml {
   behavior: url(#default#VML);
   display: inline-block;
   position: absolute;
-	}
+}
-
 
 /* control positioning */
 
@@ -129,45 +146,44 @@
   z-index: 800;
   pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
   pointer-events: auto;
-	}
+}
 .leaflet-top,
 .leaflet-bottom {
   position: absolute;
   z-index: 1000;
   pointer-events: none;
-	}
+}
 .leaflet-top {
   top: 0;
-	}
+}
 .leaflet-right {
   right: 0;
-	}
+}
 .leaflet-bottom {
   bottom: 0;
-	}
+}
 .leaflet-left {
   left: 0;
-	}
+}
 .leaflet-control {
   float: left;
   clear: both;
-	}
+}
 .leaflet-right .leaflet-control {
   float: right;
-	}
+}
 .leaflet-top .leaflet-control {
   margin-top: 10px;
-	}
+}
 .leaflet-bottom .leaflet-control {
   margin-bottom: 10px;
-	}
+}
 .leaflet-left .leaflet-control {
   margin-left: 10px;
-	}
+}
 .leaflet-right .leaflet-control {
   margin-right: 10px;
-	}
+}
-
 
 /* zoom and fade animations */
 
@@ -176,54 +192,53 @@
   -webkit-transition: opacity 0.2s linear;
   -moz-transition: opacity 0.2s linear;
   transition: opacity 0.2s linear;
-	}
+}
 .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
   opacity: 1;
-	}
+}
 .leaflet-zoom-animated {
   -webkit-transform-origin: 0 0;
   -ms-transform-origin: 0 0;
   transform-origin: 0 0;
-	}
+}
 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);
+  -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);
+  -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
-	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
+  transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1);
-	}
+}
 .leaflet-zoom-anim .leaflet-tile,
 .leaflet-pan-anim .leaflet-tile {
   -webkit-transition: none;
   -moz-transition: none;
   transition: none;
-	}
+}
 
 .leaflet-zoom-anim .leaflet-zoom-hide {
   visibility: hidden;
-	}
+}
-
 
 /* cursors */
 
 .leaflet-interactive {
   cursor: pointer;
-	}
+}
 .leaflet-grab {
   cursor: -webkit-grab;
   cursor: -moz-grab;
   cursor: grab;
-	}
+}
 .leaflet-crosshair,
 .leaflet-crosshair .leaflet-interactive {
   cursor: crosshair;
-	}
+}
 .leaflet-popup-pane,
 .leaflet-control {
   cursor: auto;
-	}
+}
 .leaflet-dragging .leaflet-grab,
 .leaflet-dragging .leaflet-grab .leaflet-interactive,
 .leaflet-dragging .leaflet-marker-draggable {
@@ -231,7 +246,7 @@ svg.leaflet-zoom-animated {
   cursor: -webkit-grabbing;
   cursor: -moz-grabbing;
   cursor: grabbing;
-	}
+}
 
 /* marker & overlays interactivity */
 .leaflet-marker-icon,
@@ -240,7 +255,7 @@ svg.leaflet-zoom-animated {
 .leaflet-pane > svg path,
 .leaflet-tile-container {
   pointer-events: none;
-	}
+}
 
 .leaflet-marker-icon.leaflet-interactive,
 .leaflet-image-layer.leaflet-interactive,
@@ -248,38 +263,36 @@ svg.leaflet-zoom-animated {
 svg.leaflet-image-layer.leaflet-interactive path {
   pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
   pointer-events: auto;
-	}
+}
 
 /* visual tweaks */
 
 .leaflet-container {
   background: #ddd;
   outline-offset: 1px;
-	}
+}
 .leaflet-container a {
-	color: #0078A8;
+  color: #0078a8;
-	}
+}
 .leaflet-zoom-box {
   border: 2px dotted #38f;
-	background: rgba(255,255,255,0.5);
+  background: rgba(255, 255, 255, 0.5);
-	}
+}
-
 
 /* general typography */
 .leaflet-container {
-	font-family: "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;
-	}
+}
-
 
 /* general toolbar styles */
 
 .leaflet-bar {
-	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
   border-radius: 4px;
-	}
+}
 .leaflet-bar a {
   background-color: #fff;
   border-bottom: 1px solid #ccc;
@@ -290,45 +303,45 @@ svg.leaflet-image-layer.leaflet-interactive path {
   text-align: center;
   text-decoration: none;
   color: black;
-	}
+}
 .leaflet-bar a,
 .leaflet-control-layers-toggle {
   background-position: 50% 50%;
   background-repeat: no-repeat;
   display: block;
-	}
+}
 .leaflet-bar a:hover,
 .leaflet-bar a:focus {
   background-color: #f4f4f4;
-	}
+}
 .leaflet-bar a:first-child {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
-	}
+}
 .leaflet-bar a:last-child {
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   border-bottom: none;
-	}
+}
 .leaflet-bar a.leaflet-disabled {
   cursor: default;
   background-color: #f4f4f4;
   color: #bbb;
-	}
+}
 
 .leaflet-touch .leaflet-bar a {
   width: 30px;
   height: 30px;
   line-height: 30px;
-	}
+}
 .leaflet-touch .leaflet-bar a:first-child {
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
-	}
+}
 .leaflet-touch .leaflet-bar a:last-child {
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
-	}
+}
 
 /* zoom control */
 
@@ -336,72 +349,72 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .leaflet-control-zoom-out {
   font: bold 18px 'Lucida Console', Monaco, monospace;
   text-indent: 1px;
-	}
+}
 
-.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
+.leaflet-touch .leaflet-control-zoom-in,
+.leaflet-touch .leaflet-control-zoom-out {
   font-size: 22px;
-	}
+}
-
 
 /* layers control */
 
 .leaflet-control-layers {
-	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
   background: #fff;
   border-radius: 5px;
-	}
+}
 .leaflet-control-layers-toggle {
   background-image: url(images/layers.png);
   width: 36px;
   height: 36px;
-	}
+}
 .leaflet-retina .leaflet-control-layers-toggle {
   background-image: url(images/layers-2x.png);
   background-size: 26px 26px;
-	}
+}
 .leaflet-touch .leaflet-control-layers-toggle {
   width: 44px;
   height: 44px;
-	}
+}
 .leaflet-control-layers .leaflet-control-layers-list,
 .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
   display: none;
-	}
+}
 .leaflet-control-layers-expanded .leaflet-control-layers-list {
   display: block;
   position: relative;
-	}
+}
 .leaflet-control-layers-expanded {
   padding: 6px 10px 6px 6px;
   color: #333;
   background: #fff;
-	}
+}
 .leaflet-control-layers-scrollbar {
   overflow-y: scroll;
   overflow-x: hidden;
   padding-right: 5px;
-	}
+}
 .leaflet-control-layers-selector {
   margin-top: 2px;
   position: relative;
   top: 1px;
-	}
+}
 .leaflet-control-layers label {
   display: block;
   font-size: 13px;
   font-size: 1.08333em;
-	}
+}
 .leaflet-control-layers-separator {
   height: 0;
   border-top: 1px solid #ddd;
   margin: 5px -10px 5px -6px;
-	}
+}
 
 /* Default icon URLs */
-.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
+.leaflet-default-icon-path {
+  /* used only in path-guessing heuristic, see L.Icon.Default */
   background-image: url(images/marker-icon.png);
-	}
+}
-
 
 /* attribution and scale controls */
 
@@ -409,29 +422,29 @@ svg.leaflet-image-layer.leaflet-interactive path {
   background: #fff;
   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:focus {
   text-decoration: underline;
-	}
+}
 .leaflet-control-attribution svg {
   display: inline !important;
-	}
+}
 .leaflet-left .leaflet-control-scale {
   margin-left: 5px;
-	}
+}
 .leaflet-bottom .leaflet-control-scale {
   margin-bottom: 5px;
-	}
+}
 .leaflet-control-scale-line {
   border: 2px solid #777;
   border-top: none;
@@ -444,27 +457,26 @@ svg.leaflet-image-layer.leaflet-interactive path {
 
   background: #fff;
   background: rgba(255, 255, 255, 0.5);
-	}
+}
 .leaflet-control-scale-line:not(:first-child) {
   border-top: 2px solid #777;
   border-bottom: none;
   margin-top: -2px;
-	}
+}
 .leaflet-control-scale-line:not(:first-child):not(:last-child) {
   border-bottom: 2px solid #777;
-	}
+}
 
 .leaflet-touch .leaflet-control-attribution,
 .leaflet-touch .leaflet-control-layers,
 .leaflet-touch .leaflet-bar {
   box-shadow: none;
-	}
+}
 .leaflet-touch .leaflet-control-layers,
 .leaflet-touch .leaflet-bar {
-	border: 2px solid rgba(0,0,0,0.2);
+  border: 2px solid rgba(0, 0, 0, 0.2);
   background-clip: padding-box;
-	}
+}
-
 
 /* popup */
 
@@ -472,23 +484,23 @@ svg.leaflet-image-layer.leaflet-interactive path {
   position: absolute;
   text-align: center;
   margin-bottom: 20px;
-	}
+}
 .leaflet-popup-content-wrapper {
   padding: 1px;
   text-align: left;
   border-radius: 12px;
-	}
+}
 .leaflet-popup-content {
   margin: 13px 24px 13px 20px;
   line-height: 1.3;
   font-size: 13px;
   font-size: 1.08333em;
   min-height: 1px;
-	}
+}
 .leaflet-popup-content p {
   margin: 17px 0;
   margin: 1.3em 0;
-	}
+}
 .leaflet-popup-tip-container {
   width: 40px;
   height: 20px;
@@ -498,7 +510,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
   margin-left: -20px;
   overflow: hidden;
   pointer-events: none;
-	}
+}
 .leaflet-popup-tip {
   width: 17px;
   height: 17px;
@@ -511,13 +523,13 @@ svg.leaflet-image-layer.leaflet-interactive path {
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
-	}
+}
 .leaflet-popup-content-wrapper,
 .leaflet-popup-tip {
   background: white;
   color: #333;
-	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
-	}
+}
 .leaflet-container a.leaflet-popup-close-button {
   position: absolute;
   top: 0;
@@ -530,43 +542,41 @@ svg.leaflet-image-layer.leaflet-interactive path {
   color: #757575;
   text-decoration: none;
   background: transparent;
-	}
+}
 .leaflet-container a.leaflet-popup-close-button:hover,
 .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 {
   -ms-zoom: 1;
-	}
+}
 .leaflet-oldie .leaflet-popup-tip {
   width: 24px;
   margin: 0 auto;
 
-	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
+  -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-control-zoom,
 .leaflet-oldie .leaflet-control-layers,
 .leaflet-oldie .leaflet-popup-content-wrapper,
 .leaflet-oldie .leaflet-popup-tip {
   border: 1px solid #999;
-	}
+}
-
 
 /* div icon */
 
 .leaflet-div-icon {
   background: #fff;
   border: 1px solid #666;
-	}
+}
-
 
 /* Tooltip */
 /* Base styles for the element that has a tooltip */
@@ -583,12 +593,12 @@ svg.leaflet-image-layer.leaflet-interactive path {
   -ms-user-select: none;
   user-select: none;
   pointer-events: none;
-	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-	}
+}
 .leaflet-tooltip.leaflet-interactive {
   cursor: pointer;
   pointer-events: auto;
-	}
+}
 .leaflet-tooltip-top:before,
 .leaflet-tooltip-bottom:before,
 .leaflet-tooltip-left:before,
@@ -597,8 +607,8 @@ svg.leaflet-image-layer.leaflet-interactive path {
   pointer-events: none;
   border: 6px solid transparent;
   background: transparent;
-	content: "";
+  content: '';
-	}
+}
 
 /* Directions */
 
@@ -612,18 +622,18 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .leaflet-tooltip-top:before {
   left: 50%;
   margin-left: -6px;
-	}
+}
 .leaflet-tooltip-top:before {
   bottom: 0;
   margin-bottom: -12px;
   border-top-color: #fff;
-	}
+}
 .leaflet-tooltip-bottom:before {
   top: 0;
   margin-top: -12px;
   margin-left: -6px;
   border-bottom-color: #fff;
-	}
+}
 .leaflet-tooltip-left {
   margin-left: -6px;
 }
@@ -634,17 +644,17 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .leaflet-tooltip-right:before {
   top: 50%;
   margin-top: -6px;
-	}
+}
 .leaflet-tooltip-left:before {
   right: 0;
   margin-right: -12px;
   border-left-color: #fff;
-	}
+}
 .leaflet-tooltip-right:before {
   left: 0;
   margin-left: -12px;
   border-right-color: #fff;
-	}
+}
 
 /* Printing */
 
@@ -654,4 +664,4 @@ svg.leaflet-image-layer.leaflet-interactive path {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
-	}
+}

public/templates/data.tmpl

@@ -5,10 +5,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{{name}} - TileServer GL</title>
   {{#is_vector}}
-  <link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl.css" />
+  <link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl.css{{&key_query}}" />
-  <link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl-inspect.css" />
+  <link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl-inspect.css{{&key_query}}" />
-  <script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl.js"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-compat.js"><\/script>'); }</script>
+  <script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl.js{{&key_query}}"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-compat.js{{&key_query}}"><\/script>'); }</script>
-  <script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl-inspect.min.js"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-inspect-compat.min.js"><\/script>'); }</script>
+  <script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl-inspect.min.js{{&key_query}}"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-inspect-compat.min.js{{&key_query}}"><\/script>'); }</script>
   <style>
     body {background:#fff;color:#333;font-family:Arial, sans-serif;}
     #map {position:absolute;top:0;left:0;right:250px;bottom:0;}
@@ -18,13 +18,25 @@
   </style>
   {{/is_vector}}
   {{^is_vector}}
-  <link rel="stylesheet" type="text/css" href="{{public_url}}leaflet.css" />
+  <link rel="stylesheet" type="text/css" href="{{public_url}}leaflet.css{{&key_query}}" />
-  <script src="{{public_url}}leaflet.js"></script>
+  <script src="{{public_url}}leaflet.js{{&key_query}}"></script>
-  <script src="{{public_url}}leaflet-hash.js"></script>
+  <script src="{{public_url}}leaflet-hash.js{{&key_query}}"></script>
-  <script src="{{public_url}}L.TileLayer.NoGap.js"></script>
+  <script src="{{public_url}}L.TileLayer.NoGap.js{{&key_query}}"></script>
   <style>
     body { margin:0; padding:0; }
     #map { position:absolute; top:0; bottom:0; width:100%; }
+    .leaflet-control-layers-toggle {
+      background-image: url({{public_url}}images/layers.png{{&key_query}});
+      width: 36px;
+      height: 36px;
+    }
+    .leaflet-retina .leaflet-control-layers-toggle {
+      background-image: url({{public_url}}images/layers-2x.png{{&key_query}});
+      background-size: 26px 26px;
+    }
+    .leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
+      background-image: url({{public_url}}images/marker-icon.png{{&key_query}});
+    }
   </style>
   {{/is_vector}}
 </head>

public/templates/index.tmpl

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>TileServer GL - Server for vector and raster maps with GL styles</title>
-  <link rel="stylesheet" type="text/css" href="{{public_url}}index.css" />
+  <link rel="stylesheet" type="text/css" href="{{public_url}}index.css{{&key_query}}" />
   <script>
     function toggle_xyz(id) {
       var el = document.getElementById(id);
@@ -17,7 +17,7 @@
 </head>
 <body>
   <section>
-    <h1 class="title {{#if is_light}}light{{/if}}"><img src="{{public_url}}images/logo.png" alt="TileServer GL" /></h1>
+    <h1 class="title {{#if is_light}}light{{/if}}"><img src="{{public_url}}images/logo.png{{&key_query}}" alt="TileServer GL" /></h1>
     <h2 class="subtitle">Vector {{#if is_light}}<s>and raster</s>{{else}}and raster{{/if}} maps with GL styles</h2>
     {{#if styles}}
       <h2 class="box-header">Styles</h2>
@@ -27,7 +27,7 @@
           {{#if thumbnail}}
             <img src="{{public_url}}styles/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" />
           {{else}}
-            <img src="{{public_url}}images/placeholder.png" alt="{{name}} preview" />
+            <img src="{{public_url}}images/placeholder.png{{&key_query}}" alt="{{name}} preview" />
           {{/if}}
           <div class="details">
             <h3>{{name}}</h3>
@@ -74,7 +74,7 @@
           {{#if thumbnail}}
             <img src="{{public_url}}data/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" />
           {{else}}
-            <img src="{{public_url}}images/placeholder.png" alt="{{name}} preview" />
+            <img src="{{public_url}}images/placeholder.png{{&key_query}}" alt="{{name}} preview" />
           {{/if}}
           <div class="details">
             <h3>{{name}}</h3>
@@ -104,7 +104,7 @@
     {{/if}}
   </section>
   <footer>
-    <a href="https://www.maptiler.com/" target="_blank"><img src="{{public_url}}images/maptiler-logo.svg" /></a>
+    <a href="https://www.maptiler.com/" target="_blank"><img src="{{public_url}}images/maptiler-logo.svg{{&key_query}}" /></a>
     <p>
       <a href="https://github.com/maptiler/tileserver-gl" target="_blank">Powered by TileServer GL ({{server_version}})</a> – <a href="https://www.maptiler.com/" target="_blank">an open-source project from MapTiler.</a>
     </p>

public/templates/viewer.tmpl

@@ -4,17 +4,29 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{{name}} - TileServer GL</title>
-  <link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl.css" />
+  <link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl.css{{&key_query}}" />
-  <link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl-inspect.css" />
+  <link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl-inspect.css{{&key_query}}" />
-  <link rel="stylesheet" type="text/css" href="{{public_url}}leaflet.css" />
+  <link rel="stylesheet" type="text/css" href="{{public_url}}leaflet.css{{&key_query}}" />
-  <script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl.js"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-compat.js"><\/script>'); }</script>
+  <script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl.js{{&key_query}}"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-compat.js{{&key_query}}"><\/script>'); }</script>
-  <script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl-inspect.min.js"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-inspect-compat.min.js"><\/script>'); }</script>
+  <script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl-inspect.min.js{{&key_query}}"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-inspect-compat.min.js{{&key_query}}"><\/script>'); }</script>
-  <script src="{{public_url}}leaflet.js"></script>
+  <script src="{{public_url}}leaflet.js{{&key_query}}"></script>
-  <script src="{{public_url}}leaflet-hash.js"></script>
+  <script src="{{public_url}}leaflet-hash.js{{&key_query}}"></script>
-  <script src="{{public_url}}L.TileLayer.NoGap.js"></script>
+  <script src="{{public_url}}L.TileLayer.NoGap.js{{&key_query}}"></script>
   <style>
     body { margin:0; padding:0; }
     #map { position:absolute; top:0; bottom:0; width:100%; }
+    .leaflet-control-layers-toggle {
+      background-image: url({{public_url}}images/layers.png{{&key_query}});
+      width: 36px;
+      height: 36px;
+    }
+    .leaflet-retina .leaflet-control-layers-toggle {
+      background-image: url({{public_url}}images/layers-2x.png{{&key_query}});
+      background-size: 26px 26px;
+    }
+    .leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
+      background-image: url({{public_url}}images/marker-icon.png{{&key_query}});
+    }
   </style>
 </head>
 <body>