diff --git a/static/css/custom.css b/static/css/custom.css
index 343f9a5..0fa2fcc 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -4,7 +4,11 @@ body {
overflow: hidden;
}
-#image-map {
+#app {
+ height: 100%;
+}
+
+.full-screen {
width: 100%;
height: 100%;
border: 1px solid #ccc;
diff --git a/static/index.html b/static/index.html
index 5b98d85..f1d1e29 100644
--- a/static/index.html
+++ b/static/index.html
@@ -15,8 +15,7 @@
Minetest Mapserver
-
-
+
diff --git a/static/js/components/Map.js b/static/js/components/Map.js
new file mode 100644
index 0000000..9bb358b
--- /dev/null
+++ b/static/js/components/Map.js
@@ -0,0 +1,66 @@
+import wsChannel from '../WebSocketChannel.js';
+import SimpleCRS from '../SimpleCRS.js';
+import CoordinatesDisplay from '../CoordinatesDisplay.js';
+import WorldInfoDisplay from '../WorldInfoDisplay.js';
+import SearchControl from '../SearchControl.js';
+import Overlaysetup from '../Overlaysetup.js';
+import layerManager from '../LayerManager.js';
+import config from '../config.js';
+
+export default {
+ view(vnode){
+ return m("div", { class: "full-screen" });
+ },
+
+ oncreate(vnode){
+ console.log("oncreate", vnode);
+ const cfg = config.get();
+
+ var map = L.map(vnode.dom, {
+ minZoom: 2,
+ maxZoom: 12,
+ center: [+vnode.attrs.lat, +vnode.attrs.lon],
+ zoom: +vnode.attrs.zoom,
+ crs: SimpleCRS
+ });
+
+ vnode.state.map = map;
+
+ map.attributionControl.addAttribution('Minetest Mapserver');
+
+ var overlays = {};
+
+ layerManager.setup(wsChannel, cfg.layers, map, +vnode.attrs.layerId);
+
+ //All overlays
+ Overlaysetup(cfg, map, overlays, wsChannel, layerManager);
+
+ new CoordinatesDisplay({ position: 'bottomleft' }).addTo(map);
+ new WorldInfoDisplay(wsChannel, { position: 'bottomright' }).addTo(map);
+
+ if (cfg.enablesearch){
+ new SearchControl(wsChannel, { position: 'topright' }).addTo(map);
+ }
+
+ //layer control
+ L.control.layers(layerManager.layerObjects, overlays, { position: "topright" }).addTo(map);
+
+ //TODO: overlay persistence (state, localstorage)
+ //TODO: update hash
+ },
+
+ onbeforeupdate(newVnode, oldVnode) {
+ return false;
+ },
+
+ onupdate(vnode){
+ console.log("onupdate", vnode);
+
+ //TODO: compare and update center,zoom,layer
+ },
+
+ onremove(vnode){
+ console.log("onremove", vnode);
+ vnode.state.map.remove();
+ }
+}
diff --git a/static/js/config.js b/static/js/config.js
new file mode 100644
index 0000000..16cc3d5
--- /dev/null
+++ b/static/js/config.js
@@ -0,0 +1,12 @@
+
+var config;
+
+export default {
+ get(){
+ return config;
+ },
+
+ set(cfg){
+ config = cfg;
+ }
+}
diff --git a/static/js/main.js b/static/js/main.js
index 080e9ee..378adf1 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1,5 +1,16 @@
import { getConfig } from './api.js';
-import { setup } from './map.js';
+//import { setup } from './map.js';
+import routes from './routes.js';
+import wsChannel from './WebSocketChannel.js';
+import config from './config.js';
-getConfig().then(setup);
+//TODO: migrate #/layer/zoom/lat/lon to #!/map/...
+//TODO: migrate #/zoom/lat/lon to #!/map/...
+
+getConfig().then(cfg => {
+ config.set(cfg);
+ wsChannel.connect();
+ m.route(document.getElementById("app"), "/map/0/13/0/0", routes);
+ //setup(cfg);
+});
diff --git a/static/js/map.js b/static/js/map.js
index 882c015..9bf6705 100644
--- a/static/js/map.js
+++ b/static/js/map.js
@@ -9,8 +9,6 @@ import layerManager from './LayerManager.js';
export function setup(cfg){
- wsChannel.connect();
-
var map = L.map('image-map', {
minZoom: 2,
maxZoom: 12,
diff --git a/static/js/nomodule.js b/static/js/nomodule.js
index 4adba96..c46af90 100644
--- a/static/js/nomodule.js
+++ b/static/js/nomodule.js
@@ -1,5 +1,5 @@
-m.mount(document.getElementById("image-map"), {
+m.mount(document.getElementById("app"), {
view: function(){
return m("div", "I'm sorry, your browser is just too old ;)");
}
diff --git a/static/js/routes.js b/static/js/routes.js
new file mode 100644
index 0000000..376e4b1
--- /dev/null
+++ b/static/js/routes.js
@@ -0,0 +1,13 @@
+
+import Map from './components/Map.js';
+
+var Home = {
+ view: function() {
+ return "Home"
+ }
+}
+
+export default {
+ "/": Home,
+ "/map/:layerId/:zoom/:lon/:lat": Map
+}