MaplibreX.Components.TerrainControl (MaplibreX v0.1.0)

Copy Markdown View Source

Terrain Control component for toggling 3D terrain on/off in MapLibre maps.

This component provides a UI control button that allows users to easily enable or disable 3D terrain visualization. It requires a RasterDEMSource to be configured on the map.

Examples

Basic terrain control with Mapbox terrain:

<.raster_dem_source
  id="mapbox-dem"
  map_id="my-map"
  url="mapbox://mapbox.terrain-rgb"
  tile_size={512}
/>

<.terrain_control
  id="terrain-toggle"
  map_id="my-map"
  position="top-right"
  terrain_source_id="mapbox-dem"
  exaggeration={1.5}
/>

Custom styling:

<.terrain_control
  id="terrain-toggle"
  map_id="my-map"
  position="bottom-left"
  terrain_source_id="mapbox-dem"
  exaggeration={2.0}
  enabled={true}
/>

Events

The terrain control can emit the following events to LiveView:

def handle_event("terrain_control:toggled", %{"enabled" => enabled}, socket) do
  IO.inspect(enabled, label: "Terrain toggled")
  {:noreply, socket}
end

Notes

  • Requires a RasterDEMSource to be configured first
  • Shows a 3D/terrain icon button
  • Toggles between enabled/disabled states
  • Can be positioned like other map controls

Summary

Functions

Renders a terrain control component.

Functions

terrain_control(assigns)

Renders a terrain control component.

Attributes

  • id (required) - Unique identifier for the control
  • map_id (required) - ID of the map
  • position - Position on map: "top-left", "top-right", "bottom-left", "bottom-right" (default: "top-right")
  • terrain_source_id (required) - ID of the RasterDEMSource to use
  • exaggeration - Terrain exaggeration factor when enabled (default: 1.5)
  • enabled - Initial terrain state (default: false)

Events

  • terrain_control:toggled - Fired when terrain is toggled on/off
  • terrain_control:error - Fired when there's an error

Styling

The control uses standard MapLibre control styling and can be customized with CSS targeting the .maplibregl-ctrl-terrain class.

Attributes

  • id (:string) (required)
  • map_id (:string) (required)
  • position (:string) - Defaults to "top-right".
  • terrain_source_id (:string) (required)
  • exaggeration (:float) - Defaults to 1.5.
  • enabled (:boolean) - Defaults to false.