diff options
| -rw-r--r-- | tw/services/files/mcmap-index.html | 37 |
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); |