Simplify map loading by importing JSON firstHEADmaster

1 files changed, 14 insertions, 23 deletions

diff --git a/tw/services/files/mcmap-index.html b/tw/services/files/mcmap-index.html
index d0af7593..6c992b21 100644
--- a/tw/services/files/mcmap-index.html
+++ b/tw/services/files/mcmap-index.html
@@ -18,13 +18,11 @@
     <script type="module">
      import { LeafletMap, Control, CRS, LatLngBounds, TileLayer }
      from 'https://unpkg.com/leaflet@2.0.0-alpha.1/dist/leaflet.js';
+     import overworld from './overworld/mapinfo.json' with { type: 'json' };
+     import nether from './nether/mapinfo.json' with { type: 'json' };
+     import end from './end/mapinfo.json' with { type: 'json' };
 
-     async function makeLayer(slug, priority) {
-         const { tileSize, imageDimensions: [width, height] } =
-             await fetch(`${slug}/mapinfo.json`, {
-                 priority: priority || 'low',
-                 headers: {'Accept': 'application/json'},
-             }).then((resp) => resp.json());
+     function makeLayer(slug, { tileSize, imageDimensions: [width, height] }) {
          return new TileLayer('{dimension}/{x}/{y}.png', {
              dimension: slug,
              tileSize: tileSize,
@@ -41,41 +39,34 @@
          });
      }
 
-     async function viewMap() {
+     function viewMap() {
          const map = new LeafletMap('map', {
              crs: CRS.Simple,
              /* We only have tiles at zoom level 0 and autoscale the others.
                 Every zoom level is a factor of two size difference.
                 Limit the minZoom so that the browser doesn't try to request
                 all 90 MiB of tiles at once. */
-             zoom: 0, minZoom: -3, maxZoom: 3,
+             zoom: -1, minZoom: -3, maxZoom: 3,
          });
 
          /* Recenter the map each time the layer is changed, because dimensions
             are different scales and sizes and only share a corner at [0, 0].
             TODO: Panning to an overworld portal and switching layers won't
             reliably show the nether end of the portal. */
-         function recenter({layer}) {
+         function recenter({ layer }) {
              map.setMaxBounds(layer.options.bounds)
-                .panTo(layer.options.bounds.getCenter(), {animate: false});
+                .panTo(layer.options.bounds.getCenter(), { animate: false });
          }
          map.on('baselayerchange', recenter);
 
-         /* Load overworld (initially displayed) with high prio, then other
-            layers with low prio. */
-         const overworld = await makeLayer('overworld', 'high');
          // Only the initially-displayed layer should be .addTo(map)'ed.
-         const layers = new Control.Layers({
-             'Overworld': overworld.addTo(map),
+         const overworldLayer = makeLayer('overworld', overworld).addTo(map);
+         recenter({ layer: overworldLayer });
+         new Control.Layers({
+             'Overworld': overworldLayer,
+             'Nether': makeLayer('nether', nether),
+             'End': makeLayer('end', end),
          }).addTo(map);
-         recenter({layer: overworld});
-         await Promise.all([
-             makeLayer('nether'),
-             makeLayer('end'),
-         ]).then(([nether, end]) => {
-             layers.addBaseLayer(nether, 'Nether');
-             layers.addBaseLayer(end, 'End');
-         });
      }
 
      window.addEventListener('DOMContentLoaded', viewMap);