hash route

server/static/index.html

@@ -46,6 +46,10 @@
     <script src="js/overlays/TechnicSwitchOverlay.js"></script>
     <script src="js/overlays/MissionOverlay.js"></script>
 
+    <!-- helpers -->
+    <script src="js/Overlaysetup.js"></script>
+    <script src="js/Hashroute.js"></script>
+
     <!-- bootstrap -->
     <script src="js/main.js"></script>
 

server/static/js/Hashroute.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var Hashroute = {
+
+  setup: function(map, layerMgr){
+    function updateHash(){
+      var center = map.getCenter();
+      location.hash =
+        layerMgr.getCurrentLayer().id + "/" +
+        center.lng + "/" + center.lat + "/" + map.getZoom();
+    }
+
+    map.on('zoomend', updateHash)
+    map.on('moveend', updateHash)
+    updateHash();
+  },
+
+  getLayerId: function(){
+    var hashParts = location.hash.substring(1).split("/");
+    if (hashParts.length == 4){
+      //new format
+      return +hashParts[0]
+
+    }
+
+    return 0;
+  },
+
+  getZoom: function(){
+    var hashParts = location.hash.substring(1).split("/");
+    if (hashParts.length == 3){
+      //old format
+      return +hashParts[2]
+
+    } else if (hashParts.length == 4){
+      //new format
+      return +hashParts[3]
+
+    }
+
+    return 11;
+  },
+
+  getCenter: function(){
+    var hashParts = location.hash.substring(1).split("/");
+    if (hashParts.length == 3){
+      //old format
+      return [+hashParts[1], +hashParts[0]];
+
+    } else if (hashParts.length == 4){
+      //new format
+      return [+hashParts[2], +hashParts[1]];
+
+    }
+
+    return [0, 0];
+  }
+
+};

server/static/js/LayerManager.js

@@ -3,6 +3,7 @@
 function LayerManager(layers, map){
   this.listeners = [];
   this.currentLayer = layers[0];
+  this.layers = layer;
 
   map.on('baselayerchange', function (e) {
       console.log("baselayerchange", e.layer);
@@ -11,6 +12,16 @@ function LayerManager(layers, map){
 
 }
 
+LayerManager.prototype.setLayerId = function(layerId){
+  var self = this;
+  this.layers.forEach(function(layer){
+    if (layer.id == layerId){
+      self.currentLayer = layer;
+    }
+  });
+},
+
+
 LayerManager.prototype.addListener = function(listener){
   this.listeners.push(listener);
 };

server/static/js/main.js

@@ -5,14 +5,11 @@ api.getConfig().then(function(cfg){
   var wsChannel = new WebSocketChannel();
   wsChannel.connect();
 
-  var initialZoom = 11;
-  var initialCenter = [0, 0];
-
   var map = L.map('image-map', {
     minZoom: 2,
     maxZoom: 12,
-    center: initialCenter,
+    center: Hashroute.getCenter(),
-    zoom: initialZoom,
+    zoom: Hashroute.getZoom(),
     crs: SimpleCRS
   });
 
@@ -22,6 +19,7 @@ api.getConfig().then(function(cfg){
   var overlays = {}
 
   var layerMgr = new LayerManager(cfg.layers, map);
+  layerMgr.setLayerId( Hashroute.getLayerId() );
 
   //All layers
   cfg.layers.forEach(function(layer){
@@ -39,6 +37,8 @@ api.getConfig().then(function(cfg){
   new CoordinatesDisplay({ position: 'bottomleft' }).addTo(map);
   new WorldInfoDisplay(wsChannel, { position: 'bottomright' }).addTo(map);
 
+  Hashroute.setup(map, layerMgr);
+
 }).catch(function(e){
   console.error(e);
 });