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}
endNotes
- 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
Renders a terrain control component.
Attributes
id(required) - Unique identifier for the controlmap_id(required) - ID of the mapposition- Position on map: "top-left", "top-right", "bottom-left", "bottom-right" (default: "top-right")terrain_source_id(required) - ID of the RasterDEMSource to useexaggeration- Terrain exaggeration factor when enabled (default: 1.5)enabled- Initial terrain state (default: false)
Events
terrain_control:toggled- Fired when terrain is toggled on/offterrain_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 to1.5.enabled(:boolean) - Defaults tofalse.