tile image api

sh4rkman · Jan 6, 2025 · 05004d5 · 05004d5
1 parent dffe8c5
commit 05004d5
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 28 deletions.
diff --git a/config/webpack.config.js b/config/webpack.config.js
@@ -64,10 +64,7 @@ export default async (env) => {
         publicPath: '/',
       },
       watchFiles: {
-        paths: ['src/**/*'], // Watch only the source directory
-        options: {
-          ignored: path.join(__dirname, '../public'),
-        },
+        paths: ['src/**/*'],
       },
     },
     plugins: [

diff --git a/src/js/squadMinimap.js b/src/js/squadMinimap.js
@@ -109,43 +109,55 @@ export var squadMinimap = Map.extend({
         this.grid.setBounds([[0,0], [-this.pixelSize, this.pixelSize]]);
 
         // load map
-        this.changeLayer();
+        this.changeLayer(true);
     },
 
 
     /**
      * remove existing layer and replace it
      */
-    changeLayer: function(){
+    changeLayer: function(changemap = false) {
         const LAYERMODE = $("#mapLayerMenu .active").attr("value");
         const OLDLAYER = this.activeLayer;
-
-        // Image URL
-        const baseUrl = `maps${this.activeMap.mapURL}${LAYERMODE}`;
-        const suffix = App.userSettings.highQualityImages ? "_hq" : "";
-        const newImageUrl = `${baseUrl}${suffix}.webp`;
-
+
         // Show spinner
         this.spin(true, this.spinOptions);
 
         // Add the new layer but keep it hidden initially
-        this.activeLayer = new imageOverlay(newImageUrl, this.imageBounds);
-        this.activeLayer.addTo(this.layerGroup);
-        $(this.activeLayer.getElement()).css("opacity", 0);
-        this.decode();
-
-        // When the new image is loaded, fade it in & remove spinner
+        if (App.userSettings.highQualityImages) {
+            // Use TileLayer for high-quality images
+            let tilePath = `${process.env.API_URL}/img${this.activeMap.mapURL}${LAYERMODE}_hq/{z}_{x}_{y}.webp`;
+            this.activeLayer = new tileLayer(tilePath, {
+                bounds: this.imageBounds,
+                minNativeZoom: 0,
+                maxNativeZoom : 5,
+                edgeBufferTiles: 4,
+                tileSize: 256,
+            });
+            this.activeLayer.addTo(this.layerGroup);
+        } else {
+            // Use ImageOverlay for standard images
+            let imgPath = `maps${this.activeMap.mapURL}${LAYERMODE}.webp`;
+            this.activeLayer = new imageOverlay(imgPath, this.imageBounds);
+            this.activeLayer.addTo(this.layerGroup);
+            //$(this.activeLayer.getElement()).css("opacity", 0);
+        }
+
+        // Decode if necessary
+        //this.decode();
+
+        // When the new image (or tile) is loaded, fade it in & remove spinner
         this.activeLayer.on("load", () => {
             this.spin(false);
-            $(this.activeLayer.getElement()).animate({opacity: 1}, 500, () => {
-                // Remove the old layer after the fade-in is complete
-                if (OLDLAYER) OLDLAYER.remove();
-                // Show grid and heatmap
-                if (App.userSettings.grid) this.showGrid();
-                this.toggleHeatmap();
-            });
+            if (OLDLAYER) OLDLAYER.remove();
         });
 
+        // Show grid and heatmap
+        if (changemap) {
+            if (App.userSettings.grid) this.showGrid();
+            this.toggleHeatmap();
+        }
+
     },
 
 

diff --git a/src/js/tests/tileImages.js b/src/js/tests/tileImages.js
@@ -58,8 +58,6 @@ const generateTiles = async (imagePath, outputDir, baseImageName, maxZoom = 5) =
                         .resize(TILESIZE, TILESIZE)
                         .webp({ quality: WEBPQUALITY })
                         .toFile(tilePath);
-
-                    //console.log(`Tile saved at: ${tilePath}`);
                 }
             }
         }
@@ -114,7 +112,6 @@ const processAllMaps = async (mapsRootDir, maxZoom) => {
                 console.log(`Skipping non-folder: ${folder}`);
             }
         }
-
         const endTime = Date.now(); // Record the end time
         const elapsedTime = ((endTime - startTime) / 1000).toFixed(2); // Convert to seconds
         console.log(`All maps processed in ${elapsedTime} seconds.`);