tileserver-gl-light 5.5.0-pre.1 → 5.5.0-pre.2

package/src/serve_rendered.js

@@ -24,7 +24,6 @@ import { SphericalMercator } from '@mapbox/sphericalmercator';
 import mlgl from '@maplibre/maplibre-gl-native';
 import polyline from '@mapbox/polyline';
 import proj4 from 'proj4';
-import axios from 'axios';
 import {
   allowedScales,
   allowedTileSizes,
@@ -62,8 +61,7 @@ const staticTypeRegex = new RegExp(
 );
 
 const PATH_PATTERN =
-  // eslint-disable-next-line security/detect-unsafe-regex -- Simple path pattern validation, no nested quantifiers
-  /^((fill|stroke|width)\:[^\|]+\|)*(enc:.+|-?\d+(\.\d*)?,-?\d+(\.\d*)?(\|-?\d+(\.\d*)?,-?\d+(\.\d*)?)+)/;
+  /^((fill|stroke|width|border|borderwidth):[^|]+\|)*(enc:.+|-?\d+(\.\d*)?,-?\d+(\.\d*)?(\|-?\d+(\.\d*)?,-?\d+(\.\d*)?)+)/;
 
 const mercator = new SphericalMercator();
 
@@ -165,7 +163,7 @@ function parseCoordinatePair(coordinates, query) {
   }
 
   // Check if coordinates have been provided as lat/lng pair instead of the
-  // ususal lng/lat pair and ensure resulting pair is lng/lat
+  // usual lng/lat pair and ensure resulting pair is lng/lat
   if (query.latlng === '1' || query.latlng === 'true') {
     return [secondCoordinate, firstCoordinate];
   }
@@ -183,9 +181,18 @@ function parseCoordinatePair(coordinates, query) {
 function parseCoordinates(coordinatePair, query, transformer) {
   const parsedCoordinates = parseCoordinatePair(coordinatePair, query);
 
+  if (!parsedCoordinates) {
+    return null;
+  }
+
   // Transform coordinates
   if (transformer) {
-    return transformer(parsedCoordinates);
+    try {
+      return transformer(parsedCoordinates);
+    } catch (error) {
+      console.error('Error transforming coordinates:', error);
+      return null;
+    }
   }
 
   return parsedCoordinates;
@@ -209,12 +216,37 @@ function extractPathsFromQuery(query, transformer) {
     const providedPaths = Array.isArray(query.path) ? query.path : [query.path];
     // Iterate through paths, parse and validate them
     for (const providedPath of providedPaths) {
+      let geometryString = providedPath;
+
+      // Logic to strip style options (like stroke:red) from the front
+      const parts = providedPath.split('|');
+      let firstGeometryIndex = 0;
+      for (const [index, part] of parts.entries()) {
+        // A part is considered a style option if it contains ':' but is NOT an 'enc:' string or a coordinate
+        if (part.includes(':') && !part.startsWith('enc:')) {
+          // This is a style option, continue
+          continue;
+        } else {
+          // This is the start of the geometry (enc: or coordinate)
+          firstGeometryIndex = index;
+          break;
+        }
+      }
+
+      // If we found a geometry, set the geometryString to the rest of the path
+      if (firstGeometryIndex > 0) {
+        geometryString = parts.slice(firstGeometryIndex).join('|');
+      }
+
       // Logic for pushing coords to path when path includes google polyline
-      if (providedPath.includes('enc:') && PATH_PATTERN.test(providedPath)) {
+      if (
+        geometryString.includes('enc:') &&
+        PATH_PATTERN.test(geometryString)
+      ) {
         // +4 because 'enc:' is 4 characters, everything after 'enc:' is considered to be part of the polyline
-        const encIndex = providedPath.indexOf('enc:') + 4;
+        const encIndex = geometryString.indexOf('enc:') + 4;
         const coords = polyline
-          .decode(providedPath.substring(encIndex))
+          .decode(geometryString.substring(encIndex))
           .map(([lat, lng]) => [lng, lat]);
         paths.push(coords);
       } else {
@@ -222,7 +254,7 @@ function extractPathsFromQuery(query, transformer) {
         const currentPath = [];
 
         // Extract coordinate-list from path
-        const pathParts = (providedPath || '').split('|');
+        const pathParts = (geometryString || '').split('|');
 
         // Iterate through coordinate-list, parse the coordinates and validate them
         for (const pair of pathParts) {
@@ -250,6 +282,7 @@ function extractPathsFromQuery(query, transformer) {
   }
   return paths;
 }
+
 /**
  * Parses marker options provided via query and sets corresponding attributes
  * on marker object.
@@ -269,21 +302,38 @@ function parseMarkerOptions(optionsList, marker) {
 
     switch (optionParts[0]) {
       // Scale factor to up- or downscale icon
-      case 'scale':
-        // Scale factors must not be negative
-        marker.scale = Math.abs(parseFloat(optionParts[1]));
+      case 'scale': {
+        // Scale factors must not be negative and should have reasonable bounds
+        const scale = parseFloat(optionParts[1]);
+        if (!isNaN(scale) && scale > 0 && scale < 10) {
+          marker.scale = scale;
+        } else {
+          console.warn(`Invalid marker scale: ${optionParts[1]}`);
+        }
         break;
+      }
       // Icon offset as positive or negative pixel value in the following
       // format [offsetX],[offsetY] where [offsetY] is optional
-      case 'offset':
+      case 'offset': {
         const providedOffset = optionParts[1].split(',');
+        const offsetX = parseFloat(providedOffset[0]);
+
         // Set X-axis offset
-        marker.offsetX = parseFloat(providedOffset[0]);
+        if (!isNaN(offsetX) && Math.abs(offsetX) < 1000) {
+          marker.offsetX = offsetX;
+        }
+
         // Check if an offset has been provided for Y-axis
         if (providedOffset.length > 1) {
-          marker.offsetY = parseFloat(providedOffset[1]);
+          const offsetY = parseFloat(providedOffset[1]);
+          if (!isNaN(offsetY) && Math.abs(offsetY) < 1000) {
+            marker.offsetY = offsetY;
+          }
         }
         break;
+      }
+      default:
+        console.warn(`Unknown marker option: ${optionParts[0]}`);
     }
   }
 }
@@ -304,25 +354,32 @@ function extractMarkersFromQuery(query, options, transformer) {
   const markers = [];
 
   // Check if multiple markers have been provided and mimic a list if it's a
-  // single maker.
+  // single marker.
   const providedMarkers = Array.isArray(query.marker)
     ? query.marker
     : [query.marker];
 
-  // Iterate through provided markers which can have one of the following
-  // formats
-  // [location]|[pathToFileTelativeToConfiguredIconPath]
+  // Iterate through provided markers which can have one of the following formats:
+  // [location]|[pathToFileRelativeToConfiguredIconPath]
   // [location]|[pathToFile...]|[option]|[option]|...
   for (const providedMarker of providedMarkers) {
+    if (typeof providedMarker !== 'string') {
+      continue;
+    }
+
     const markerParts = providedMarker.split('|');
+
     // Ensure we got at least a location and an icon uri
     if (markerParts.length < 2) {
+      console.warn('Marker requires at least location and icon path');
       continue;
     }
 
     const locationParts = markerParts[0].split(',');
+
     // Ensure the locationParts contains two items
     if (locationParts.length !== 2) {
+      console.warn('Marker location must have exactly 2 coordinates');
       continue;
     }
 
@@ -338,6 +395,7 @@ function extractMarkersFromQuery(query, options, transformer) {
 
       // If the selected icon is not part of available icons skip it
       if (!options.paths.availableIcons.includes(iconURI)) {
+        console.warn(`Icon not in available icons: ${iconURI}`);
         continue;
       }
 
@@ -345,21 +403,24 @@ function extractMarkersFromQuery(query, options, transformer) {
 
       // When we encounter a remote icon check if the configuration explicitly allows them.
     } else if (isRemoteURL && options.allowRemoteMarkerIcons !== true) {
+      console.warn('Remote marker icons not allowed');
       continue;
     } else if (isDataURL && options.allowInlineMarkerImages !== true) {
+      console.warn('Inline marker images not allowed');
       continue;
     }
 
     // Ensure marker location could be parsed
     const location = parseCoordinates(locationParts, query, transformer);
     if (location === null) {
+      console.warn('Failed to parse marker location');
       continue;
     }
 
-    const marker = {};
-
-    marker.location = location;
-    marker.icon = iconURI;
+    const marker = {
+      location,
+      icon: iconURI,
+    };
 
     // Check if options have been provided
     if (markerParts.length > 2) {
@@ -453,6 +514,7 @@ async function respondImage(
   }
 
   if (format === 'png' || format === 'webp') {
+    /* empty */
   } else if (format === 'jpg' || format === 'jpeg') {
     format = 'jpeg';
   } else {
@@ -470,6 +532,31 @@ async function respondImage(
   }
 
   pool.acquire(async (err, renderer) => {
+    // Check if pool.acquire failed or returned null/invalid renderer
+    if (err) {
+      console.error('Failed to acquire renderer from pool:', err);
+      return res.status(503).send('Renderer pool error');
+    }
+
+    if (!renderer) {
+      console.error(
+        'Renderer is null - likely crashed or failed to initialize',
+      );
+      return res.status(503).send('Renderer unavailable');
+    }
+
+    // Validate renderer has required methods (basic health check)
+    if (typeof renderer.render !== 'function') {
+      console.error('Renderer is invalid - missing render method');
+      // Destroy the bad renderer and remove from pool
+      try {
+        pool.destroy(renderer);
+      } catch (e) {
+        console.error('Error destroying invalid renderer:', e);
+      }
+      return res.status(503).send('Renderer invalid');
+    }
+
     // For 512px tiles, use the actual maplibre-native zoom. For 256px tiles, use zoom - 1
     let mlglZ;
     if (width === 512) {
@@ -499,111 +586,154 @@ async function respondImage(
       params.height += tileMargin * 2;
     }
 
-    renderer.render(params, (err, data) => {
-      pool.release(renderer);
-      if (err) {
-        console.error(err);
-        return res.status(500).header('Content-Type', 'text/plain').send(err);
+    // Set a timeout for the render operation to detect hung renderers
+    const renderTimeout = setTimeout(() => {
+      console.error('Renderer timeout - destroying potentially hung renderer');
+      try {
+        // Don't release back to pool, destroy it
+        pool.destroy(renderer);
+      } catch (e) {
+        console.error('Error destroying timed-out renderer:', e);
       }
+      if (!res.headersSent) {
+        res.status(503).send('Renderer timeout');
+      }
+    }, 30000); // 30 second timeout
 
-      const image = sharp(data, {
-        raw: {
-          premultiplied: true,
-          width: params.width * scale,
-          height: params.height * scale,
-          channels: 4,
-        },
-      });
+    try {
+      renderer.render(params, (err, data) => {
+        clearTimeout(renderTimeout);
 
-      if (z > 0 && tileMargin > 0) {
-        const y = mercator.px(params.center, z)[1];
-        const yoffset = Math.max(
-          Math.min(0, y - 128 - tileMargin),
-          y + 128 + tileMargin - Math.pow(2, z + 8),
-        );
-        image.extract({
-          left: tileMargin * scale,
-          top: (tileMargin + yoffset) * scale,
-          width: width * scale,
-          height: height * scale,
+        if (err) {
+          console.error('Render error:', err);
+          // Destroy renderer instead of releasing it back to pool since it may be corrupted
+          try {
+            pool.destroy(renderer);
+          } catch (e) {
+            console.error('Error destroying failed renderer:', e);
+          }
+          if (!res.headersSent) {
+            return res
+              .status(500)
+              .header('Content-Type', 'text/plain')
+              .send(err);
+          }
+          return;
+        }
+
+        // Only release if render was successful
+        pool.release(renderer);
+
+        const image = sharp(data, {
+          raw: {
+            premultiplied: true,
+            width: params.width * scale,
+            height: params.height * scale,
+            channels: 4,
+          },
         });
-      }
-      // HACK(Part 2) 256px tiles are a zoom level lower than maplibre-native default tiles. this hack allows tileserver-gl to support zoom 0 256px tiles, which would actually be zoom -1 in maplibre-native. Since zoom -1 isn't supported, a double sized zoom 0 tile is requested and resized here.
 
-      if (z === 0 && width === 256) {
-        image.resize(width * scale, height * scale);
-      }
-      // END HACK(Part 2)
+        if (z > 0 && tileMargin > 0) {
+          const y = mercator.px(params.center, z)[1];
+          const yoffset = Math.max(
+            Math.min(0, y - 128 - tileMargin),
+            y + 128 + tileMargin - Math.pow(2, z + 8),
+          );
+          image.extract({
+            left: tileMargin * scale,
+            top: (tileMargin + yoffset) * scale,
+            width: width * scale,
+            height: height * scale,
+          });
+        }
+        // HACK(Part 2) 256px tiles are a zoom level lower than maplibre-native default tiles. this hack allows tileserver-gl to support zoom 0 256px tiles, which would actually be zoom -1 in maplibre-native. Since zoom -1 isn't supported, a double sized zoom 0 tile is requested and resized here.
 
-      const composites = [];
-      if (overlay) {
-        composites.push({ input: overlay });
-      }
-      if (item.watermark) {
-        const canvas = renderWatermark(width, height, scale, item.watermark);
+        if (z === 0 && width === 256) {
+          image.resize(width * scale, height * scale);
+        }
+        // END HACK(Part 2)
 
-        composites.push({ input: canvas.toBuffer() });
-      }
+        const composites = [];
+        if (overlay) {
+          composites.push({ input: overlay });
+        }
+        if (item.watermark) {
+          const canvas = renderWatermark(width, height, scale, item.watermark);
 
-      if (mode === 'static' && item.staticAttributionText) {
-        const canvas = renderAttribution(
-          width,
-          height,
-          scale,
-          item.staticAttributionText,
-        );
+          composites.push({ input: canvas.toBuffer() });
+        }
 
-        composites.push({ input: canvas.toBuffer() });
-      }
+        if (mode === 'static' && item.staticAttributionText) {
+          const canvas = renderAttribution(
+            width,
+            height,
+            scale,
+            item.staticAttributionText,
+          );
 
-      if (composites.length > 0) {
-        image.composite(composites);
-      }
+          composites.push({ input: canvas.toBuffer() });
+        }
 
-      // Legacy formatQuality is deprecated but still works
-      const formatQualities = options.formatQuality || {};
-      if (Object.keys(formatQualities).length !== 0) {
-        console.log(
-          'WARNING: The formatQuality option is deprecated and has been replaced with formatOptions. Please see the documentation. The values from formatQuality will be used if a quality setting is not provided via formatOptions.',
-        );
-      }
-      // eslint-disable-next-line security/detect-object-injection -- format is validated above
-      const formatQuality = formatQualities[format];
-
-      // eslint-disable-next-line security/detect-object-injection -- format is validated above
-      const formatOptions = (options.formatOptions || {})[format] || {};
-
-      if (format === 'png') {
-        image.png({
-          progressive: formatOptions.progressive,
-          compressionLevel: formatOptions.compressionLevel,
-          adaptiveFiltering: formatOptions.adaptiveFiltering,
-          palette: formatOptions.palette,
-          quality: formatOptions.quality,
-          effort: formatOptions.effort,
-          colors: formatOptions.colors,
-          dither: formatOptions.dither,
-        });
-      } else if (format === 'jpeg') {
-        image.jpeg({
-          quality: formatOptions.quality || formatQuality || 80,
-          progressive: formatOptions.progressive,
-        });
-      } else if (format === 'webp') {
-        image.webp({ quality: formatOptions.quality || formatQuality || 90 });
-      }
-      image.toBuffer((err, buffer, info) => {
-        if (!buffer) {
-          return res.status(404).send('Not found');
+        if (composites.length > 0) {
+          image.composite(composites);
         }
 
-        res.set({
-          'Last-Modified': item.lastModified,
-          'Content-Type': `image/${format}`,
+        // Legacy formatQuality is deprecated but still works
+        const formatQualities = options.formatQuality || {};
+        if (Object.keys(formatQualities).length !== 0) {
+          console.log(
+            'WARNING: The formatQuality option is deprecated and has been replaced with formatOptions. Please see the documentation. The values from formatQuality will be used if a quality setting is not provided via formatOptions.',
+          );
+        }
+        // eslint-disable-next-line security/detect-object-injection -- format is validated above
+        const formatQuality = formatQualities[format];
+
+        // eslint-disable-next-line security/detect-object-injection -- format is validated above
+        const formatOptions = (options.formatOptions || {})[format] || {};
+
+        if (format === 'png') {
+          image.png({
+            progressive: formatOptions.progressive,
+            compressionLevel: formatOptions.compressionLevel,
+            adaptiveFiltering: formatOptions.adaptiveFiltering,
+            palette: formatOptions.palette,
+            quality: formatOptions.quality,
+            effort: formatOptions.effort,
+            colors: formatOptions.colors,
+            dither: formatOptions.dither,
+          });
+        } else if (format === 'jpeg') {
+          image.jpeg({
+            quality: formatOptions.quality || formatQuality || 80,
+            progressive: formatOptions.progressive,
+          });
+        } else if (format === 'webp') {
+          image.webp({ quality: formatOptions.quality || formatQuality || 90 });
+        }
+        image.toBuffer((err, buffer, info) => {
+          if (!buffer) {
+            return res.status(404).send('Not found');
+          }
+
+          res.set({
+            'Last-Modified': item.lastModified,
+            'Content-Type': `image/${format}`,
+          });
+          return res.status(200).send(buffer);
         });
-        return res.status(200).send(buffer);
       });
-    });
+    } catch (error) {
+      clearTimeout(renderTimeout);
+      console.error('Unexpected error during render:', error);
+      try {
+        pool.destroy(renderer);
+      } catch (e) {
+        console.error('Error destroying renderer after error:', e);
+      }
+      if (!res.headersSent) {
+        return res.status(500).send('Render failed');
+      }
+    }
   });
 }
 
@@ -998,7 +1128,6 @@ export const serve_rendered = {
      * @returns {void}
      */
     app.get('{/:tileSize}/:id.json', (req, res, next) => {
-      // eslint-disable-next-line security/detect-object-injection -- req.params.id is route parameter, validated by Express
       const item = repo[req.params.id];
       if (!item) {
         return res.sendStatus(404);
@@ -1192,61 +1321,90 @@ export const serve_rendered = {
               callback(null, response);
             } else if (protocol === 'http' || protocol === 'https') {
               try {
-                const response = await axios.get(req.url, {
-                  responseType: 'arraybuffer', // Get the response as raw buffer
-                  // Axios handles gzip by default, so no need for a gzip flag
+                // Add timeout to prevent hanging on unreachable hosts
+                const controller = new AbortController();
+                const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
+
+                const response = await fetch(req.url, {
+                  signal: controller.signal,
                 });
 
+                clearTimeout(timeoutId);
+
+                // Handle 410 Gone as sparse response
+                if (response.status === 410) {
+                  if (verbose) {
+                    console.log(
+                      'fetchTile warning on %s, sparse response due to 410 Gone',
+                      req.url,
+                    );
+                  }
+                  callback();
+                  return;
+                }
+
+                // Check for other non-ok responses
+                if (!response.ok) {
+                  throw new Error(
+                    `HTTP ${response.status}: ${response.statusText}`,
+                  );
+                }
+
                 const responseHeaders = response.headers;
-                const responseData = response.data;
+                const responseData = await response.arrayBuffer();
 
                 const parsedResponse = {};
-                if (responseHeaders['last-modified']) {
+                if (responseHeaders.get('last-modified')) {
                   parsedResponse.modified = new Date(
-                    responseHeaders['last-modified'],
+                    responseHeaders.get('last-modified'),
                   );
                 }
-                if (responseHeaders.expires) {
-                  parsedResponse.expires = new Date(responseHeaders.expires);
+                if (responseHeaders.get('expires')) {
+                  parsedResponse.expires = new Date(
+                    responseHeaders.get('expires'),
+                  );
                 }
-                if (responseHeaders.etag) {
-                  parsedResponse.etag = responseHeaders.etag;
+                if (responseHeaders.get('etag')) {
+                  parsedResponse.etag = responseHeaders.get('etag');
                 }
 
-                parsedResponse.data = responseData;
+                parsedResponse.data = Buffer.from(responseData);
                 callback(null, parsedResponse);
               } catch (error) {
-                if (error.response && error.response.status === 410) {
-                  // This is the 410 "Gone" error, treat as sparse
-                  if (verbose) {
-                    console.log(
-                      'fetchTile warning on %s, sparse response due to 410 Gone',
-                      req.url,
-                    );
-                  }
-                  callback();
-                } else {
-                  // For all other errors (e.g., network errors, 404, 500, etc.) return empty content.
+                // Log DNS failures more prominently as they often indicate config issues
+                // Native fetch wraps DNS errors in error.cause
+                if (error.cause?.code === 'ENOTFOUND') {
                   console.error(
-                    `Error fetching remote URL ${req.url}:`,
-                    error.message || error,
-                    error.response
-                      ? `Status: ${error.response.status}`
-                      : 'No response received',
+                    `DNS RESOLUTION FAILED for ${req.url}. ` +
+                      `This domain may be unreachable or misconfigured in your style. ` +
+                      `Consider removing it or fixing the DNS.`,
                   );
+                }
 
-                  const parts = url.parse(req.url);
-                  const extension = path.extname(parts.pathname).toLowerCase();
-                  // eslint-disable-next-line security/detect-object-injection -- extension is from path.extname, limited set
-                  const format = extensionToFormat[extension] || '';
-                  createEmptyResponse(format, '', callback);
+                // Handle AbortController timeout
+                if (error.name === 'AbortError') {
+                  console.error(
+                    `FETCH TIMEOUT for ${req.url}. ` +
+                      `The request took longer than 10 seconds to complete.`,
+                  );
                 }
+
+                // For all other errors (e.g., network errors, 404, 500, etc.) return empty content.
+                console.error(
+                  `Error fetching remote URL ${req.url}:`,
+                  error.message || error,
+                );
+
+                const parts = url.parse(req.url);
+                const extension = path.extname(parts.pathname).toLowerCase();
+                // eslint-disable-next-line security/detect-object-injection -- extension is from path.extname, limited set
+                const format = extensionToFormat[extension] || '';
+                createEmptyResponse(format, '', callback);
               }
             } else if (protocol === 'file') {
               const name = decodeURI(req.url).substring(protocol.length + 3);
               const file = path.join(options.paths['files'], name);
               if (await existsP(file)) {
-                // eslint-disable-next-line security/detect-non-literal-fs-filename -- file path constructed from configured base path and URL-decoded filename
                 const inputFileStats = await fsp.stat(file);
                 if (!inputFileStats.isFile() || inputFileStats.size === 0) {
                   throw Error(
@@ -1451,7 +1609,6 @@ export const serve_rendered = {
 
         // PMTiles supports remote URLs (HTTP and S3), skip file check for those
         if (!isValidRemoteUrl(inputFile)) {
-          // eslint-disable-next-line security/detect-non-literal-fs-filename -- inputFile is from dataResolver, which validates against config
           const inputFileStats = await fsp.stat(inputFile);
           if (!inputFileStats.isFile() || inputFileStats.size === 0) {
             throw Error(`Not valid PMTiles file: "${inputFile}"`);
@@ -1504,7 +1661,7 @@ export const serve_rendered = {
           }
         } else {
           // MBTiles does not support remote URLs
-          // eslint-disable-next-line security/detect-non-literal-fs-filename -- inputFile is from dataResolver, which validates against config
+
           const inputFileStats = await fsp.stat(inputFile);
           if (!inputFileStats.isFile() || inputFileStats.size === 0) {
             throw Error(`Not valid MBTiles file: "${inputFile}"`);
@@ -1623,68 +1780,78 @@ export const serve_rendered = {
    * @returns {Promise<object>} Promise resolving to elevation data
    */
   getTerrainElevation: async function (data, param) {
-    return await new Promise(async (resolve, reject) => {
-      const image = new Image();
-      image.onload = async () => {
-        const canvas = createCanvas(param['tile_size'], param['tile_size']);
-        const context = canvas.getContext('2d');
-        context.drawImage(image, 0, 0);
-
-        // calculate pixel coordinate of tile,
-        // see https://developers.google.com/maps/documentation/javascript/examples/map-coordinates
-        let siny = Math.sin((param['lat'] * Math.PI) / 180);
-        // Truncating to 0.9999 effectively limits latitude to 89.189. This is
-        // about a third of a tile past the edge of the world tile.
-        siny = Math.min(Math.max(siny, -0.9999), 0.9999);
-        const xWorld = param['tile_size'] * (0.5 + param['long'] / 360);
-        const yWorld =
-          param['tile_size'] *
-          (0.5 - Math.log((1 + siny) / (1 - siny)) / (4 * Math.PI));
-
-        const scale = 1 << param['z'];
-
-        const xTile = Math.floor((xWorld * scale) / param['tile_size']);
-        const yTile = Math.floor((yWorld * scale) / param['tile_size']);
-
-        const xPixel = Math.floor(xWorld * scale) - xTile * param['tile_size'];
-        const yPixel = Math.floor(yWorld * scale) - yTile * param['tile_size'];
-        if (
-          xPixel < 0 ||
-          yPixel < 0 ||
-          xPixel >= param['tile_size'] ||
-          yPixel >= param['tile_size']
-        ) {
-          return reject('Out of bounds Pixel');
-        }
-        const imgdata = context.getImageData(xPixel, yPixel, 1, 1);
-        const red = imgdata.data[0];
-        const green = imgdata.data[1];
-        const blue = imgdata.data[2];
-        let elevation;
-        if (param['encoding'] === 'mapbox') {
-          elevation = -10000 + (red * 256 * 256 + green * 256 + blue) * 0.1;
-        } else if (param['encoding'] === 'terrarium') {
-          elevation = red * 256 + green + blue / 256 - 32768;
-        } else {
-          elevation = 'invalid encoding';
+    return new Promise((resolve, reject) => {
+      const image = new Image(); // Create a new Image object
+      image.onload = () => {
+        try {
+          const canvas = createCanvas(param['tile_size'], param['tile_size']);
+          const context = canvas.getContext('2d');
+          context.drawImage(image, 0, 0);
+
+          // calculate pixel coordinate of tile,
+          // see https://developers.google.com/maps/documentation/javascript/examples/map-coordinates
+          let siny = Math.sin((param['lat'] * Math.PI) / 180);
+          // Truncating to 0.9999 effectively limits latitude to 89.189. This is
+          // about a third of a tile past the edge of the world tile.
+          siny = Math.min(Math.max(siny, -0.9999), 0.9999);
+          const xWorld = param['tile_size'] * (0.5 + param['long'] / 360);
+          const yWorld =
+            param['tile_size'] *
+            (0.5 - Math.log((1 + siny) / (1 - siny)) / (4 * Math.PI));
+
+          const scale = 1 << param['z'];
+
+          const xTile = Math.floor((xWorld * scale) / param['tile_size']);
+          const yTile = Math.floor((yWorld * scale) / param['tile_size']);
+
+          const xPixel =
+            Math.floor(xWorld * scale) - xTile * param['tile_size'];
+          const yPixel =
+            Math.floor(yWorld * scale) - yTile * param['tile_size'];
+          if (
+            xPixel < 0 ||
+            yPixel < 0 ||
+            xPixel >= param['tile_size'] ||
+            yPixel >= param['tile_size']
+          ) {
+            return reject('Out of bounds Pixel');
+          }
+          const imgdata = context.getImageData(xPixel, yPixel, 1, 1);
+          const red = imgdata.data[0];
+          const green = imgdata.data[1];
+          const blue = imgdata.data[2];
+          let elevation;
+          if (param['encoding'] === 'mapbox') {
+            elevation = -10000 + (red * 256 * 256 + green * 256 + blue) * 0.1;
+          } else if (param['encoding'] === 'terrarium') {
+            elevation = red * 256 + green + blue / 256 - 32768;
+          } else {
+            elevation = 'invalid encoding';
+          }
+          param['elevation'] = elevation;
+          param['red'] = red;
+          param['green'] = green;
+          param['blue'] = blue;
+          resolve(param);
+        } catch (error) {
+          reject(error); // Catch any errors during canvas operations
         }
-        param['elevation'] = elevation;
-        param['red'] = red;
-        param['green'] = green;
-        param['blue'] = blue;
-        resolve(param);
       };
       image.onerror = (err) => reject(err);
-      if (param['format'] === 'webp') {
+
+      // Load the image data - handle the sharp conversion outside the Promise
+      (async () => {
         try {
-          const img = await sharp(data).toFormat('png').toBuffer();
-          image.src = img;
+          if (param['format'] === 'webp') {
+            const img = await sharp(data).toFormat('png').toBuffer();
+            image.src = `data:image/png;base64,${img.toString('base64')}`; // Set data URL
+          } else {
+            image.src = data;
+          }
         } catch (err) {
-          reject(err);
+          reject(err); // Reject promise on sharp error
         }
-      } else {
-        image.src = data;
-      }
+      })();
     });
   },
 };