Dynamic Shaded Relief map with Leaflet and Cloud Optimized GeoTiff (GEBCO Global Bathymetry) — Client-side rendering

Example: COG range request


  1. GDAL: To generate COG and overviews for the raster data
  2. Other Client-side libraries: LeafletJs, Proj4Js & GeoTiffJs

Data Preparation:

gdal_translate original_bathymetry.tiff bathymetry_cog.tiff -co COMPRESS=DEFLATE -co TILED=YESgdaladdo -ro bathymetry_cog.tif 2 4 8 16 32 64 128 256 --config COMPRESS_OVERVIEW DEFLATE

Tile rendering:

Helper function: Tile coordinate to Geographic coordinate
Filtering tiff data using GeoTiffJs
HillShade Algorithm (Credit: OpenLayers)
Helper function: Nearest neighbour
Sample tile



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store