search

mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
11.18k stars 2.22k forks source link

"raster-dem" source doesn't work with custom dem tiles. #11870

Open starwarcat opened 2 years ago

starwarcat commented 2 years ago

mapbox-gl-js version: v2.8.2

browser: Any

Steps to Trigger Behavior

  1. I am trying to use my own 1 meter high resolution RGB tiles to setTerrain, rather than using mapbox://mapbox.mapbox-terrain-dem-v1, for a small area.
  2. The code is: map.addSource("rwanda-dem", { "type": "raster-dem", "tiles": ["/public/images/raster-dem/{z}/{x}/{y}.webp"], "tileSize": 514, "maxzoom": 18, "minzoom": 1, });
  3. The area's terrain was generated correctly with elevation, excep the whole area is floating from other part of the map where no elevation covered.

area

fr-an-k commented 2 years ago

Haven't tried myself yet, but supposedly it needs this pixel encoding: https://github.com/tilezen/joerd/blob/master/docs/formats.md#terrarium Possibly limited to PNG

abrman commented 2 years ago

I just fixed something like this an hour ago.

What is happening is that the entire map is at sea level as it has no height data, your data probably accurate hovers in the 150-500m range? What you need to do is adjust your entire heightmap so that ideally your lowest point is at 0. I'm assuming you're following the elevation = -10000 + (({R} * 256 * 256 + {G} * 256 + {B}) * 0.1) formula.

So basically you get the elevation of your lowest point and subtract it from your tile-set.