working basic routing

This commit is contained in:
NatureFreshMilk 2019-08-26 10:17:08 +02:00
parent 8a534d7643
commit 38f519092e
8 changed files with 111 additions and 8 deletions

View File

@ -4,7 +4,11 @@ body {
overflow: hidden;
}
#image-map {
#app {
height: 100%;
}
.full-screen {
width: 100%;
height: 100%;
border: 1px solid #ccc;

View File

@ -15,8 +15,7 @@
<title>Minetest Mapserver</title>
</head>
<body>
<div id="image-map"></div>
<div id="search-content"></div>
<div id="app"></div>
<!-- libraries -->
<script src="js/lib/mithril.min.js"></script>

View File

@ -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('<a href="https://github.com/minetest-tools/mapserver">Minetest Mapserver</a>');
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();
}
}

12
static/js/config.js Normal file
View File

@ -0,0 +1,12 @@
var config;
export default {
get(){
return config;
},
set(cfg){
config = cfg;
}
}

View File

@ -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);
});

View File

@ -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,

View File

@ -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 ;)");
}

13
static/js/routes.js Normal file
View File

@ -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
}