working basic routing
This commit is contained in:
parent
8a534d7643
commit
38f519092e
@ -4,7 +4,11 @@ body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#image-map {
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.full-screen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #ccc;
|
||||
|
@ -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>
|
||||
|
66
static/js/components/Map.js
Normal file
66
static/js/components/Map.js
Normal 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
12
static/js/config.js
Normal file
@ -0,0 +1,12 @@
|
||||
|
||||
var config;
|
||||
|
||||
export default {
|
||||
get(){
|
||||
return config;
|
||||
},
|
||||
|
||||
set(cfg){
|
||||
config = cfg;
|
||||
}
|
||||
}
|
@ -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);
|
||||
});
|
||||
|
@ -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,
|
||||
|
@ -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
13
static/js/routes.js
Normal 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
|
||||
}
|
Loading…
Reference in New Issue
Block a user