fix wide-enhanced radar tiles #188 #196 #193 #194

This commit is contained in:
Matt Walsh
2026-04-06 16:53:11 -05:00
parent 97ac0a1656
commit 63d27d1a26
4 changed files with 18 additions and 13 deletions

View File

@@ -29,28 +29,33 @@ const setTiles = (data) => {
// determine the basemap images needed // determine the basemap images needed
const baseMapTiles = [ const baseMapTiles = [
pixelToFile(sourceXY.x, sourceXY.y), pixelToFile(sourceXY.x + TILE_SIZE.x * 0, sourceXY.y),
pixelToFile(sourceXY.x + TILE_SIZE.x, sourceXY.y), pixelToFile(sourceXY.x + TILE_SIZE.x * 1, sourceXY.y),
pixelToFile(sourceXY.x, sourceXY.y + TILE_SIZE.y), pixelToFile(sourceXY.x + TILE_SIZE.x * 2, sourceXY.y),
pixelToFile(sourceXY.x + TILE_SIZE.x, sourceXY.y + TILE_SIZE.y), pixelToFile(sourceXY.x + TILE_SIZE.x * 0, sourceXY.y + TILE_SIZE.y),
pixelToFile(sourceXY.x + TILE_SIZE.x * 1, sourceXY.y + TILE_SIZE.y),
pixelToFile(sourceXY.x + TILE_SIZE.x * 2, sourceXY.y + TILE_SIZE.y),
]; ];
// do some calculations // do some calculations
// the tiles are arranged as follows, with the horizontal axis as x, and correlating with the second set of digits in the image file number // the tiles are arranged as follows, with the horizontal axis as x, and correlating with the second set of digits in the image file number
// T[0] T[1] // T[0] T[1] T[2]
// T[2] T[3] // T[3] T[4] T[5]
// calculate the shift of tile 0 (upper left) // calculate the shift of tile 0 (upper left)
const tileShift = modTile(sourceXY.x, sourceXY.y); const tileShift = modTile(sourceXY.x, sourceXY.y);
// determine which tiles are used // determine which tiles are used
const secondRow = TILE_SIZE.y - tileShift.y < RADAR_FINAL_SIZE().width;
const usedTiles = [ const usedTiles = [
true, true,
TILE_SIZE.x - tileShift.x < RADAR_FINAL_SIZE().width, TILE_SIZE.x - tileShift.x < RADAR_FINAL_SIZE().width,
TILE_SIZE.y - tileShift.y < RADAR_FINAL_SIZE().width, TILE_SIZE.x - (tileShift.x * 2) < RADAR_FINAL_SIZE().width,
secondRow,
]; ];
// if we need t[1] and t[2] then we also need t[3] // second row is a copy of the first row when in use
usedTiles.push(usedTiles[1] && usedTiles[2]); // calculate T[4] and T[5]
usedTiles.push(secondRow && usedTiles[1], secondRow && usedTiles[2]);
// helper function for populating tiles // helper function for populating tiles
const populateTile = (tileName) => (elem, index) => { const populateTile = (tileName) => (elem, index) => {

View File

@@ -111,7 +111,7 @@
.tiles { .tiles {
position: absolute; position: absolute;
width: 1400px; width: 2040px;
img { img {
vertical-align: middle; vertical-align: middle;

File diff suppressed because one or more lines are too long

View File

@@ -32,7 +32,7 @@
<div class="main radar can-enhance"> <div class="main radar can-enhance">
<div class="container"> <div class="container">
<div class="map-tiles tiles"><img /><img /><img /><img /></div> <div class="map-tiles tiles"><img /><img /><img /><img /><img /><img /></div>
<div class="scroll-area"> <div class="scroll-area">
<div class="frame template"> <div class="frame template">
<div class="map"> <div class="map">
@@ -40,6 +40,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="overlay-tiles tiles"><img /><img /><img /><img /></div> <div class="overlay-tiles tiles"><img /><img /><img /><img /><img /></div>
</div> </div>
</div> </div>