MapLibre Terrain Visualization Example¶

This notebook demonstrates how to use the set_terrain method to add 3D terrain visualization to MapLibre GL JS maps. The terrain visualization uses elevation data from AWS terrain tiles to create a 3D effect.

In [1]:

from anymap import MapLibreMap

from anymap import MapLibreMap

Basic Terrain Example¶

Let's create a map with terrain visualization enabled using the default terrain source (AWS elevation tiles).

In [2]:

# Create a map centered on the Swiss Alps
m = MapLibreMap(
    center=[8.2275, 46.8182],  # Swiss Alps
    zoom=12,
    pitch=60,  # Tilt the map to show 3D effect
    bearing=20,  # Rotate the map slightly
    height="600px",
    width="100%",
)

# Add a satellite basemap for better terrain visualization
m.add_basemap("Esri.WorldImagery")

# Enable terrain with default settings
m.set_terrain()

m

# Create a map centered on the Swiss Alps m = MapLibreMap( center=[8.2275, 46.8182], # Swiss Alps zoom=12, pitch=60, # Tilt the map to show 3D effect bearing=20, # Rotate the map slightly height="600px", width="100%", ) # Add a satellite basemap for better terrain visualization m.add_basemap("Esri.WorldImagery") # Enable terrain with default settings m.set_terrain() m

Out[2]:

Terrain with Custom Exaggeration¶

You can adjust the terrain exaggeration to make the 3D effect more or less pronounced.

In [3]:

# Create a map of the Grand Canyon with enhanced terrain
m2 = MapLibreMap(
    center=[-112.1401, 36.0544],  # Grand Canyon
    zoom=13,
    pitch=70,
    bearing=0,
    height="600px",
    width="100%",
)

# Add satellite imagery
m2.add_basemap("Esri.WorldImagery")

# Enable terrain with increased exaggeration
m2.set_terrain(exaggeration=1.5)

m2

# Create a map of the Grand Canyon with enhanced terrain m2 = MapLibreMap( center=[-112.1401, 36.0544], # Grand Canyon zoom=13, pitch=70, bearing=0, height="600px", width="100%", ) # Add satellite imagery m2.add_basemap("Esri.WorldImagery") # Enable terrain with increased exaggeration m2.set_terrain(exaggeration=1.5) m2

Out[3]:

Terrain with Custom Source¶

You can also use a custom terrain source if you have your own elevation data tiles.

In [4]:

# Create a map of Mount Fuji with custom terrain source
m3 = MapLibreMap(
    center=[138.7274, 35.3606],  # Mount Fuji
    zoom=11,
    pitch=50,
    bearing=45,
    height="600px",
    width="100%",
)

# Add OpenStreetMap basemap
m3.add_basemap("OpenStreetMap.Mapnik")

# Enable terrain with custom source and source ID
m3.set_terrain(
    source="https://elevation-tiles-prod.s3.amazonaws.com/terrarium/{z}/{x}/{y}.png",
    exaggeration=1.2,
    source_id="custom-terrain",
)

m3

# Create a map of Mount Fuji with custom terrain source m3 = MapLibreMap( center=[138.7274, 35.3606], # Mount Fuji zoom=11, pitch=50, bearing=45, height="600px", width="100%", ) # Add OpenStreetMap basemap m3.add_basemap("OpenStreetMap.Mapnik") # Enable terrain with custom source and source ID m3.set_terrain( source="https://elevation-tiles-prod.s3.amazonaws.com/terrarium/{z}/{x}/{y}.png", exaggeration=1.2, source_id="custom-terrain", ) m3

Out[4]:

Terrain with Minimal Exaggeration¶

For subtle terrain effects, you can use minimal exaggeration.

In [5]:

# Create a map of the Appalachian Mountains with subtle terrain
m4 = MapLibreMap(
    center=[-82.5515, 35.5951],  # Great Smoky Mountains
    zoom=11,
    pitch=45,
    bearing=0,
    height="600px",
    width="100%",
)

# Add OpenStreetMap basemap
m4.add_basemap("OpenStreetMap.Mapnik")

# Enable terrain with minimal exaggeration
m4.set_terrain(exaggeration=0.5)

m4

# Create a map of the Appalachian Mountains with subtle terrain m4 = MapLibreMap( center=[-82.5515, 35.5951], # Great Smoky Mountains zoom=11, pitch=45, bearing=0, height="600px", width="100%", ) # Add OpenStreetMap basemap m4.add_basemap("OpenStreetMap.Mapnik") # Enable terrain with minimal exaggeration m4.set_terrain(exaggeration=0.5) m4

Out[5]:

Terrain Settings Information¶

Let's examine the terrain configuration stored in the map.

In [6]:

# Check the terrain configuration
print("Terrain configuration:")
print(f"  Source: {m4._terrain['source'] if m4._terrain else 'None'}")
print(f"  Exaggeration: {m4._terrain['exaggeration'] if m4._terrain else 'None'}")

# Check the terrain source configuration
print("\nTerrain source configuration:")
terrain_source = m4._sources.get("terrain-dem")
if terrain_source:
    print(f"  Type: {terrain_source['type']}")
    print(f"  Encoding: {terrain_source['encoding']}")
    print(f"  Tile Size: {terrain_source['tileSize']}")
    print(f"  Tiles: {terrain_source['tiles']}")
else:
    print("  No terrain source found")

# Check the terrain configuration print("Terrain configuration:") print(f" Source: {m4._terrain['source'] if m4._terrain else 'None'}") print(f" Exaggeration: {m4._terrain['exaggeration'] if m4._terrain else 'None'}") # Check the terrain source configuration print("\nTerrain source configuration:") terrain_source = m4._sources.get("terrain-dem") if terrain_source: print(f" Type: {terrain_source['type']}") print(f" Encoding: {terrain_source['encoding']}") print(f" Tile Size: {terrain_source['tileSize']}") print(f" Tiles: {terrain_source['tiles']}") else: print(" No terrain source found")

Terrain configuration:
  Source: terrain-dem
  Exaggeration: 0.5

Terrain source configuration:
  Type: raster-dem
  Encoding: terrarium
  Tile Size: 256
  Tiles: ['https://elevation-tiles-prod.s3.amazonaws.com/terrarium/{z}/{x}/{y}.png']

Export to HTML¶

You can export a terrain-enabled map to HTML for sharing.

In [7]:

# Export the Grand Canyon terrain map to HTML
m2.to_html("terrain_grand_canyon.html", title="Grand Canyon Terrain Visualization")
print("Map exported to terrain_grand_canyon.html")

# Export the Grand Canyon terrain map to HTML m2.to_html("terrain_grand_canyon.html", title="Grand Canyon Terrain Visualization") print("Map exported to terrain_grand_canyon.html")

Map exported to terrain_grand_canyon.html

Summary¶

The set_terrain method provides a simple way to add 3D terrain visualization to MapLibre GL JS maps:

• Default usage: m.set_terrain() uses AWS elevation tiles with 1.0 exaggeration
• Custom exaggeration: m.set_terrain(exaggeration=1.5) for more pronounced terrain
• Custom source: m.set_terrain(source="your-terrain-url") for custom elevation data
• Custom source ID: m.set_terrain(source_id="custom-id") for custom source identification

Tips for best results:

• Use pitch values between 30-70 degrees to show the 3D effect
• Combine with satellite imagery basemaps for realistic terrain visualization
• Adjust exaggeration based on the terrain type (higher for dramatic landscapes, lower for subtle hills)
• Use appropriate zoom levels (typically 10-15) for terrain visualization