diff --git a/static/js/compat.js b/static/js/compat.js new file mode 100644 index 0000000..00bf0ea --- /dev/null +++ b/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]}` + } + } +} diff --git a/static/js/main.js b/static/js/main.js index 378adf1..c7f88a0 100644 --- a/static/js/main.js +++ b/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); }); diff --git a/static/js/map/Hashroute.js b/static/js/map/Hashroute.js deleted file mode 100644 index f3b3777..0000000 --- a/static/js/map/Hashroute.js +++ /dev/null @@ -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]; - } - -}; diff --git a/static/js/map/MapComponent.js b/static/js/map/MapComponent.js index 4458d54..7b3f8e1 100644 --- a/static/js/map/MapComponent.js +++ b/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(); } } diff --git a/static/js/map/overlays/AbstractGeoJsonOverlay.js b/static/js/map/overlays/AbstractGeoJsonOverlay.js index 1827d32..2be845a 100644 --- a/static/js/map/overlays/AbstractGeoJsonOverlay.js +++ b/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) { diff --git a/static/js/map/overlays/AbstractIconOverlay.js b/static/js/map/overlays/AbstractIconOverlay.js index dc5aa12..560486b 100644 --- a/static/js/map/overlays/AbstractIconOverlay.js +++ b/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) { diff --git a/static/js/search/SearchResult.js b/static/js/search/SearchResult.js index 88de72e..8364668 100644 --- a/static/js/search/SearchResult.js +++ b/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){