Get started on environment generation

assets/scripts/script.js

@@ -1,8 +1,114 @@
-import "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"; // window.L
+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
+};
 
-var map = L.map('leaflet-map').setView([0, 0], 2);
+function moveBounds(polys, xoff = 0, yoff = xoff) {
+  return polys.map(([x, y]) => [y + yoff, x + xoff]);
+}
 
-L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+// Get tile data
-  maxZoom: 19,
+
-  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+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();

assets/styles/styles.css

@@ -7,8 +7,10 @@ body, html {
 }
 
 #leaflet-map {
+  background-color: #404040;
   display: inline-block;
   box-sizing: border-box;
   height: 100%;
   width: 100%;
 }
+