2024-05-29 15:15:05 +00:00
|
|
|
import "./leaflet.js"; // window.L
|
|
|
|
const options = {
|
|
|
|
lang: "en_US",
|
|
|
|
offs: 0,
|
|
|
|
viewportPadding: 20,
|
|
|
|
boundsPadding: 0.1,
|
|
|
|
}
|
|
|
|
const defaultPolyStyling = {
|
|
|
|
color: "#000000",
|
|
|
|
opacity: 1,
|
|
|
|
fill: true,
|
|
|
|
fillOpacity: 0.25,
|
|
|
|
weight: 3
|
|
|
|
};
|
2024-05-29 05:16:02 +00:00
|
|
|
|
2024-05-29 15:15:05 +00:00
|
|
|
function moveBounds(polys, xoff = 0, yoff = xoff) {
|
|
|
|
return polys.map(([x, y]) => [y + yoff, x + xoff]);
|
|
|
|
}
|
2024-05-29 05:16:02 +00:00
|
|
|
|
2024-05-29 15:15:05 +00:00
|
|
|
// Get tile data
|
|
|
|
|
|
|
|
async function getTileData(floor) {
|
|
|
|
let tileDataReq = await fetch(`/data/${options.lang}/map/${floor}`);
|
|
|
|
let tileData;
|
|
|
|
if (tileDataReq.ok)
|
|
|
|
tileData = await tileDataReq.json();
|
|
|
|
|
|
|
|
return tileData.map((room) =>
|
|
|
|
L.polygon(moveBounds(room.poly, options.offs), defaultPolyStyling)
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
// Get floor data
|
|
|
|
|
|
|
|
async function getFloorData() {
|
|
|
|
let floorDataReq = await fetch(`/data/${options.lang}/map/`);
|
|
|
|
let floorData;
|
|
|
|
if (floorDataReq.ok)
|
|
|
|
floorData = await floorDataReq.json();
|
|
|
|
|
|
|
|
// Add to Leaflet
|
|
|
|
|
|
|
|
const floors = await Promise.all(floorData.map(async (data) => {
|
|
|
|
const tileData = await getTileData(data.id);
|
|
|
|
|
|
|
|
const floorPoly = L.polygon(moveBounds(data.poly, options.offs), defaultPolyStyling)
|
|
|
|
|
|
|
|
return L.featureGroup([
|
|
|
|
floorPoly,
|
|
|
|
...tileData
|
|
|
|
]);
|
|
|
|
}));
|
|
|
|
|
|
|
|
return {
|
|
|
|
layers: floorData,
|
|
|
|
floors: floors
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Create map
|
|
|
|
|
|
|
|
async function createMap() {
|
|
|
|
const data = await getFloorData();
|
|
|
|
|
|
|
|
let map = L.map('leaflet-map', {
|
|
|
|
center: [0, 0],
|
|
|
|
zoom: 2,
|
|
|
|
crs: L.CRS.Simple
|
|
|
|
});
|
|
|
|
|
|
|
|
const mainLayer = L.tileLayer('', {
|
|
|
|
maxZoom: 4,
|
|
|
|
minZoom: 1,
|
|
|
|
attribution: 'Test data'
|
|
|
|
}).addTo(map);
|
|
|
|
|
|
|
|
const floor = data.floors[0].addTo(map);
|
|
|
|
const layerBounds = floor.getBounds();
|
|
|
|
|
|
|
|
const blb = layerBounds.pad(options.boundsPadding);
|
|
|
|
|
|
|
|
map.setMaxBounds(blb);
|
|
|
|
|
|
|
|
map.fitBounds(layerBounds, { padding: [options.viewportPadding, options.viewportPadding] });
|
|
|
|
|
|
|
|
const entries = Object.fromEntries(data.floors.map((floor, i) => [
|
|
|
|
`${data.layers[i].name}`,
|
|
|
|
floor
|
|
|
|
]));
|
|
|
|
|
|
|
|
let layerControl = L.control.layers(entries).addTo(map);
|
|
|
|
|
|
|
|
return {
|
|
|
|
floors: data.floors,
|
|
|
|
map,
|
|
|
|
mainLayer
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
async function mainFunction() {
|
|
|
|
const { floors, map, mainLayer } = await createMap();
|
|
|
|
|
|
|
|
map.on('baselayerchange', ({ layer, name }) => {
|
|
|
|
const layerBounds = layer.getBounds();
|
|
|
|
|
|
|
|
const blb = layerBounds.pad(options.boundsPadding);
|
|
|
|
|
|
|
|
map.setMaxBounds(blb);
|
|
|
|
|
|
|
|
map.fitBounds(layerBounds, { padding: [options.viewportPadding, options.viewportPadding] });
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
mainFunction();
|