Serverless rasters in MapLibre: the COG protocol extension

After our talk at FOSS4G about vector tiles and Deck.gl, an audience member raised an interesting question: we have the tools to publish and analyze vector data directly in the browser, but what about raster data?

In recent years, the way we load map data in web browsers has changed. Instead of using older methods like WMS/OGC, we now use vector tiles, which make maps load and run more smoothly. The same idea should apply to raster images: instead of processing them on a server first, a better approach is to load them directly as Cloud-Optimized GeoTIFFs (COGs).

During 2024, at Geomatico we have developed the MapLibre COG Protocol extension , a powerful library for visualizing COGs directly in MapLibre GL JS. By leveraging HTTP range requests, it efficiently loads only the necessary portions of large raster datasets, reducing bandwidth usage and improving performance.

Show me the code: https://github.com/geomatico/maplibre-cog-protocol

This makes it ideal for handling high-resolution satellite imagery, elevation models, and other geospatial data. Since it enables direct cloud access from MapLibre, organizations can serve large datasets without expensive infrastructure, making it a cost-effective and scalable solution.

Additionally, the library supports dynamic adjustments, such as color manipulation and band mixing directly on the browser, providing greater flexibility for dynamic data visualization. As an open-source, community-driven project, it aligns with other open geospatial tools, standards and practices ensuring adaptability to future scenarios.

Here you can find some live use of the library, with examples of RGB Image, Color Ramp, NDVI for multiband COG or a huge Digital Elevation Model (12 GB):
https://labs.geomatico.es/maplibre-cog-protocol

A 12GB elevation model loaded directly into MapLibre. See it live here

Limitations and roadmap

  • Optimized for simplicity on the browser: no reprojections, no resamplings. Only for GoogleMapsCompatible tilematrixset.
  • Based on geotiff.js, it inherits its pros and cons.
  • Symbolization done by the CPU (not the GPU).
  • In the future, we would like to render contour lines from DEM data directly, taking maplibre-contour as a base or extending it.

Do you have a project idea and want to turn it into reality? We would like to hear from you, tell us about it

The facts define us