Adding Terrain to Maps with MapLibre: A Skill for Agents

Where this fits

You're building a web map for a hiking app, and the client wants elevation context—hillshade, maybe 3D terrain when pitched. You've got a raster DEM source, but configuring raster-dem encoding, hillshade passes, and dynamic contours is fiddly. This skill encodes the exact patterns and pitfalls from MapLibre's official docs, so an agent can implement terrain features correctly without a deep dive into the spec.

Why agents benefit

• Reduces trial-and-error on DEM encoding choices: distinguishes Terrarium vs. Mapbox RGB so the agent picks the right one for the source.
• Provides multi-pass hillshade recipes (single vs. dual) with concrete layer configs, avoiding washed-out or noisy results.
• Covers dynamic contour generation at runtime, so agents can add vector contours without pre-processing DEMs.
• Includes self-hosting guidance for DEM tiles, helping agents advise on tile generation and caching.
• Bundles checklists for combining hillshade with 3D terrain, ensuring the agent doesn't miss camera pitch or lighting interactions.

Practical scenarios

Elevation context for a trail map

Your agent adds a hillshade layer under trail lines to give depth. With the skill, it knows to use a raster-dem source with encoding: "terrarium" and configures a hillshade layer with proper hillshade-exaggeration to match the area's relief.

3D terrain for a flight planning dashboard

For a pilot briefing tool, the agent enables setTerrain with a DEM source and sets the camera pitch. The skill's notes on tile resolution and zoom levels prevent the agent from overloading the browser with high-res tiles.

Dynamic contour lines for a geology viewer

Instead of pre-generated contours, the agent uses the skill's pattern to create a line layer from a raster-dem source with a contour expression, adjusting interval based on zoom.

Add it to your agent workflow

Install the skill into your agent's toolset:

npx skills add maplibre/maplibre-agent-skills --skill maplibre-terrain-patterns

Then ask your agent: "Add hillshade and 3D terrain to this MapLibre map using the DEM from S3." The skill provides the exact layer definitions and encoding notes, so the agent can produce a working map in one pass.

Compare before adopting

Before committing, compare this skill against alternatives by checking: quality signals (stars, issue activity, PRs), maintenance freshness (last commit, MapLibre version compatibility), alternatives (e.g., deck.gl's TerrainLayer or Mapbox GL's terrain docs), and workflow fit—does your agent need to generate contours or just basic hillshade? The skill is focused and current, but verify it aligns with your MapLibre version.

Why it is worth tracking

This skill is maintained by the MapLibre team (137 stars, active repo), so it stays in sync with MapLibre GL JS releases. It's a solid reference for any agent that touches elevation data. Evaluate it when you're building map visualizations that need terrain context—it can save hours of debugging and is a strong candidate for your agent's default map toolkit. For more details, see the skill page on OpenAgentSkill.