working compat routes

static/js/compat.js

@@ -0,0 +1,15 @@
+
+export function hashCompat(){
+
+  if (window.location.hash) {
+    let match = window.location.hash.match(/^#\/(\d*)\/(\d*)\/(\d*)$/m);
+    if (match) {
+      window.location.hash = `#!/map/0/${match[1]}/${match[2]}/${match[3]}`
+    }
+
+    match = window.location.hash.match(/^#\/(\d*)\/(\d*)\/(\d*)\/(\d*)$/m);
+    if (match) {
+      window.location.hash = `#!/map/${match[1]}/${match[2]}/${match[3]}/${match[4]}`
+    }
+  }
+}

static/js/main.js

@@ -1,16 +1,15 @@
 
 import { getConfig } from './api.js';
-//import { setup } from './map.js';
 import routes from './routes.js';
 import wsChannel from './WebSocketChannel.js';
 import config from './config.js';
+import { hashCompat } from './compat.js';
 
-//TODO: migrate #/layer/zoom/lat/lon to #!/map/...
-//TODO: migrate #/zoom/lat/lon to #!/map/...
+// hash route compat
+hashCompat();
 
 getConfig().then(cfg => {
   config.set(cfg);
   wsChannel.connect();
-  m.route(document.getElementById("app"), "/map/0/13/0/0", routes);
-  //setup(cfg);
+  m.route(document.getElementById("app"), "/map/0/12/0/0", routes);
 });

static/js/map/Hashroute.js

@@ -1,59 +0,0 @@
-
-export default {
-
-  setup: function(map, layerMgr){
-    function updateHash(){
-      var center = map.getCenter();
-      window.location.hash =
-        layerMgr.getCurrentLayer().id + "/" +
-        center.lng + "/" + center.lat + "/" + map.getZoom();
-    }
-
-    map.on('zoomend', updateHash);
-    map.on('moveend', updateHash);
-    map.on('baselayerchange', updateHash);
-    updateHash();
-  },
-
-  getLayerId: function(){
-    var hashParts = window.location.hash.substring(1).split("/");
-    if (hashParts.length == 4){
-      //new format
-      return +hashParts[0];
-
-    }
-
-    return 0;
-  },
-
-  getZoom: function(){
-    var hashParts = window.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 = window.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];
-  }
-
-};

static/js/map/MapComponent.js

@@ -1,4 +1,4 @@
-import wsChannel from './WebSocketChannel.js';
+import wsChannel from '../WebSocketChannel.js';
 import SimpleCRS from './SimpleCRS.js';
 import CoordinatesDisplay from './CoordinatesDisplay.js';
 import WorldInfoDisplay from './WorldInfoDisplay.js';
@@ -13,7 +13,6 @@ export default {
   },
 
   oncreate(vnode){
-    console.log("oncreate", vnode);
     const cfg = config.get();
 
     var map = L.map(vnode.dom, {
@@ -45,22 +44,36 @@ export default {
     //layer control
     L.control.layers(layerManager.layerObjects, overlays, { position: "topright" }).addTo(map);
 
+    function updateHash(){
+      const center = map.getCenter();
+      const layerId = layerManager.getCurrentLayer().id;
+
+      m.route.set(`/map/${layerId}/${map.getZoom()}/${center.lng}/${center.lat}`);
+    }
+
+    map.on('zoomend', updateHash);
+    map.on('moveend', updateHash);
+    map.on('baselayerchange', updateHash);
+
     //TODO: overlay persistence (state, localstorage)
-    //TODO: update hash
   },
 
   onbeforeupdate(newVnode, oldVnode) {
-      return false;
+    const center = newVnode.state.map.getCenter();
+    const newAattrs = newVnode.attrs;
+
+    return newAattrs.layerId != layerManager.getCurrentLayer().id ||
+      newAattrs.zoom != newVnode.state.map.getZoom() ||
+      Math.abs(newAattrs.lat - center.lat) > 0.1 ||
+      Math.abs(newAattrs.lat - center.lat) > 0.1;
   },
 
   onupdate(vnode){
-    console.log("onupdate", vnode);
-
-    //TODO: compare and update center,zoom,layer
+    layerManager.switchLayer(+vnode.attrs.layerId);
+    vnode.state.map.setView([+vnode.attrs.lat, +vnode.attrs.lon], +vnode.attrs.zoom);
   },
 
   onremove(vnode){
-    console.log("onremove", vnode);
     vnode.state.map.remove();
   }
 }

static/js/map/overlays/AbstractGeoJsonOverlay.js

@@ -1,5 +1,5 @@
-import debounce from '../util/debounce.js';
-import { getMapObjects } from '../api.js';
+import debounce from '../../util/debounce.js';
+import { getMapObjects } from '../../api.js';
 
 export default L.LayerGroup.extend({
   initialize: function(wsChannel, layerMgr, type) {

static/js/map/overlays/AbstractIconOverlay.js

@@ -1,5 +1,5 @@
-import debounce from '../util/debounce.js';
-import { getMapObjects } from '../api.js';
+import debounce from '../../util/debounce.js';
+import { getMapObjects } from '../../api.js';
 
 export default L.LayerGroup.extend({
   initialize: function(wsChannel, layerMgr, type, icon) {

static/js/search/SearchResult.js

@@ -1,5 +1,5 @@
 import SearchStore from './SearchStore.js';
-import layerMgr from '../LayerManager.js';
+import layerMgr from '../map/LayerManager.js';
 
 export default {
   view: function(vnode){