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

cmd/mtwebmapper/subbaseline.go

@@ -28,6 +28,9 @@ func newSubBaseLine(mapDir string) *subBaseLine {
 }
 
 func (sb *subBaseLine) ServeHTTP(rw http.ResponseWriter, r *http.Request) {
+
+	rw.Header().Set("Cache-Control", "max-age=0, no-cache, no-store")
+
 	vars := mux.Vars(r)
 	xs := vars["x"]
 	ys := vars["y"]
@@ -51,8 +54,6 @@ func (sb *subBaseLine) ServeHTTP(rw http.ResponseWriter, r *http.Request) {
 	baseTile := filepath.Join(
 		sb.mapDir, "8", strconv.Itoa(int(tx)), fmt.Sprintf("%d.png", ty))
 
-	rw.Header().Set("Cache-Control", "private, max-age=0, no-cache")
-
 	var err error
 	var fi os.FileInfo
 	if fi, err = os.Stat(baseTile); err != nil {

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>

cmd/mtwebmapper/web/js/easy-button.js

@@ -0,0 +1,48 @@
+L.Control.EasyButtons = L.Control.extend({
+    options: {
+        position: 'topleft',
+        title: '',
+        intentedIcon: 'fa-circle-o'
+    },
+
+    onAdd: function () {
+        var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
+
+        this.link = L.DomUtil.create('a', 'leaflet-bar-part', container);
+        L.DomUtil.create('i', 'fa fa-lg ' + this.options.intentedIcon , this.link);
+        this.link.href = '#';
+
+        L.DomEvent.on(this.link, 'click', this._click, this);
+        this.link.title = this.options.title;
+
+        return container;
+    },
+
+    intendedFunction: function(){ alert('no function selected');},
+
+    _click: function (e) {
+        L.DomEvent.stopPropagation(e);
+        L.DomEvent.preventDefault(e);
+        this.intendedFunction();
+    },
+});
+
+L.easyButton = function( btnIcon , btnFunction , btnTitle , btnMap ) {
+  var newControl = new L.Control.EasyButtons;
+  if (btnIcon) newControl.options.intentedIcon = btnIcon;
+
+  if ( typeof btnFunction === 'function'){
+    newControl.intendedFunction = btnFunction;
+  }
+
+  if (btnTitle) newControl.options.title = btnTitle;
+
+  if ( btnMap == '' ){
+    // skip auto addition
+  } else if ( btnMap ) {
+    btnMap.addControl(newControl);
+  } else {
+    map.addControl(newControl);
+  }
+  return newControl;
+};