mtwebmapper: Added a button to force a refresh of the loaded tiles.

cmd/mtwebmapper/web/index.html

@@ -5,6 +5,7 @@
 <meta charset="utf-8" />
     <link rel="stylesheet" href="css/leaflet.css" />
     <link rel="stylesheet" href="css/Leaflet.Coordinates-0.1.4.css" />
+    <link rel="stylesheet" href="css/font-awesome.css" />
     <style type="text/css">
         body {
             height: 100%;
@@ -35,8 +36,10 @@
     <div id="map"></div>
     <script src="js/leaflet.js"></script>
     <script src="js/Leaflet.Coordinates-0.1.4.min.js"></script>
+    <script src="js/easy-button.js"></script>
     <script>
 
+
 L.Projection.NoWrap = {
     project: function (latlng) {
         return new L.Point(latlng.lat, latlng.lng);
@@ -60,7 +63,8 @@ var world = new L.tileLayer('map/{z}/{x}/{y}.png', {
     continuousWorld: false,
     noWrap: true,
     //zoomReverse: true,
-    tms: true
+    tms: true,
+    unloadInvisibleTiles: true
 });
 
 var rasterMaps = {
@@ -101,6 +105,25 @@ L.control.coordinates({
 var layersControl = new L.Control.Layers(rasterMaps, overlayMaps, {collapsed: false});
 map.addControl(layersControl);
 
+L.easyButton('fa-refresh', 
+    function (){
+        var tiles = document.getElementsByTagName("img");
+        for (var i = 0; i < tiles.length; i++) {
+            var img = tiles[i];
+            var cl = img.getAttribute("class");
+            if (cl.contains("leaflet-tile-loaded")) {
+                var src = img.src;
+                var idx = src.lastIndexOf("#");
+                if (idx >= 0) {
+                    src = src.substring(0, idx);
+                }
+                img.src = src + "#" + Math.random();
+            }
+        }
+        //map._resetView(map.getCenter(), map.getZoom(), false);
+    },
+    'Update view'
+)
     </script>
 </body>
 </html>