MapLibre Terrain Patterns

MapLibre GL JS can render terrain in several ways: hillshade (a 2D lighting effect from elevation data), 3D terrain (extruded mesh that uses elevation values and camera pitch), color-relief (direct coloring based on elevation values), and dynamic contour lines (vector contours generated at runtime).[1], [7] These methods are often combined in the same map to create rich terrain visualizations.

All of these methods use a raster-dem source, colloquially referred to as “terrain tiles”, which encodes elevation values into PNG/WebP pixel values.[1], [3]

There are additional earth observation analysis layers traditionally derived from a DEM, like slope, aspect, and curvature.[11], [14] When these are needed, they are typically precomputed in GIS workflows and served as raster layers, rather than computed client-side in MapLibre.

When to Use This Skill

• Adding hillshade, color-relief, contours, or 3D terrain to a MapLibre map
• Choosing a raster-dem source and understanding encoding formats
• Migrating from Mapbox terrain tiles to an open alternative
• Adding dynamic contour lines from terrain data
• Self-hosting terrain tiles in raster-dem format
• Troubleshooting terrain that looks flat, inverted, or visually wrong

Differences Between DEM, raster-dem, and Hillshade