BlueMapWeb/public/index.html
Blue (Lukas Rieger) eda14d3c32
Move lots of data to deticated data fields and more tweaks
The data fields now contain and syncronize all the data that might be important for libraries like VueJS. They can safely be made reactive without fear to make the whole ThreeJS object-stack reactive (which would blow up the ram usage and destroy performance)
2021-02-25 22:53:42 +01:00

85 lines
3.2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<title>BlueMap Lib Test</title>
<link rel="shortcut icon" href="favicon.png">
</head>
<body style="margin: 0; padding: 0;">
<div id="map-container" style="position: absolute; width: 100%; height: 100%;"></div>
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/hammer.js"></script>
<script type="text/javascript" src="js/bluemap.js"></script>
<script type="text/javascript">
let bluemap = new BlueMap.MapViewer(document.getElementById("map-container"));
// show stats panel
bluemap.stats.showPanel(1);
let mapControls = new BlueMap.MapControls(bluemap.rootElement);
let freeControls = new BlueMap.FreeFlightControls(bluemap.rootElement);
bluemap.controlsManager.controls = mapControls;
// load map
const loadMaps = (dataUrl, events = null) => {
function loadSettings() {
return new Promise((resolve, reject) => {
let loader = new THREE.FileLoader();
loader.setResponseType("json");
loader.load(dataUrl + "settings.json",
resolve,
() => {},
() => reject("Failed to load the settings.json!")
);
});
}
return loadSettings().then(settings => {
let maps = [];
// create maps
if (settings.maps !== undefined){
for (let mapId in settings.maps) {
if (!settings.maps.hasOwnProperty(mapId)) continue;
let mapSettings = settings.maps[mapId];
if (mapSettings.enabled)
maps.push(new BlueMap.Map(mapId, dataUrl + mapId + "/", dataUrl + "settings.json", dataUrl + "textures.json", events));
}
}
// sort maps
maps.sort((map1, map2) => {
let sort = settings.maps[map1.id].ordinal - settings.maps[map2.id].ordinal;
if (isNaN(sort)) return 0;
return sort;
});
return maps;
});
}
let maps = [];
let markerManager = null;
let playerManager = null;
loadMaps("data/", bluemap.events).then(loadedMaps => {
maps = loadedMaps;
markerManager = new BlueMap.MarkerFileManager(bluemap.markers, "data/markers.json", maps[0].data.id, bluemap.events);
markerManager.update();
markerManager.setAutoUpdateInterval(1000 * 10);
playerManager = new BlueMap.PlayerMarkerManager(bluemap.markers, "live/players", "", bluemap.events);
playerManager.update();
playerManager.setAutoUpdateInterval(1000);
bluemap.switchMap(maps[0]).then(() => {
playerManager.worldId = maps[0].data.world;
});
});
</script>
</body>
</html>