How to get raw dem data for a tile?

[pcace]

Hi there,
is there any way to get to the raw dem data for a tile?
currently i query the elevation by const elevation = map.queryTerrainElevation(lngLatLike) and this for each point of a 512x512 px tile (i calculate the lat lng from each pixelvalue)
It works, but is everything but performant.

Is there any way to get to the raw data here? i would love to use something like: tile.demdata... as buffer.

any way to get this data?

Thanks a lot!

Cheers

[HarelM]

I'm using the following code:
https://github.com/IsraelHikingMap/Site/blob/7dabec453e23eac3110090f7c6be7c6f2f16c96f/IsraelHiking.Web/src/application/services/elevation.provider.ts#L105
It uses/duplicates some of the internal stuff that are in maplibre.

[pcace]

HI, thanks for the reply! But do i understand correctly that it does not use the terrain dem file/data from maplibre?
Thanks a lot!

[HarelM]

No, it doesn't. It copies the internal code of maplibre and uses it.
I think the only class you might be able to reuse is DEMData, but it can be done in 4 lines of code, I think...

[pcace]

No, it doesn't. It copies the internal code of maplibre and uses it. I think the only class you might be able to reuse is DEMData, but it can be done in 4 lines of code, I think...

Hi, maybe my question was not really clear. as i understand your code, you query the height data from png & valhalla. i was looking for a way to directly query the current (and already loaded) heigt data from map.terrain. preferably as an image buffer.

If i still not get your code, could you please describe where you get the coordinates from the maplibre terrain?

Thanks again!

[HarelM]

You are correct, and I believe I understood your question.
I'm not aware of a way to do it with the current code.
Note that when querying the currently loaded tiles you might get a "low" zoom level tile and thus receive less accurate results.
I think you might be able to get the cached tiles and elevation from them, but this will be a non-public API which is error prone.

[pcace]

Hi, its probably not the best way to do that, but i now have a worker wich get the png elevation image and makes its own DEM data from it like so:

const createDEMDataFromImageBuffer = async (tileImageBuffer: {
  buffer: ArrayBuffer
  tile: {
    tx: number
    ty: number
    zoom: number
  }
}): Promise<DEMData> => {
  // Konvertieren des ArrayBuffer in ein Blob-Objekt
  const blob = new Blob([tileImageBuffer.buffer], { type: 'image/png' })

  // Erstellen eines ImageBitmap-Objekts aus dem Blob
  const imageBitmap = await createImageBitmap(blob)

  // Erstellen eines Canvas-Elements
  const canvas = new OffscreenCanvas(imageBitmap.width, imageBitmap.height)
  canvas.width = imageBitmap.width
  canvas.height = imageBitmap.height

  // Zeichnen des ImageBitmap auf das Canvas
  const context = canvas.getContext('2d')
  if (!context) {
    throw new Error('Failed to get 2D context')
  }
  context.drawImage(imageBitmap, 0, 0)

  // Extrahieren der ImageData aus dem Canvas
  const imageData = context.getImageData(0, 0, canvas.width, canvas.height)

  // Erstellen eines RGBAImage-Objekts
  const rgbaImage = new RGBAImage(
    { width: imageData.width, height: imageData.height },
    new Uint8Array(imageData.data.buffer)
  )

  const demData = new DEMData(
    `${tileImageBuffer.tile.zoom}_${tileImageBuffer.tile.tx}_${tileImageBuffer.tile.ty}`,
    rgbaImage,
    'mapbox' as DEMEncoding
  )

  return demData
}

i can now use in my case to generate meshes from it. Since it is in a worker, its ok, that it needs some time ;)

Cheers and thanks again!