@spec fit_bounds(String.t(), bounds(), keyword()) :: Phoenix.LiveView.JS.t()

Creates a JS command to fit the map to specific bounds.

Examples

bounds = [[-74, 40], [-73, 41]]
<button phx-click={MaplibreX.Components.Map.fit_bounds("my-map", bounds)}>
  Fit to bounds
</button>

With padding and max zoom:

fit_bounds("my-map", bounds, padding: 50, max_zoom: 15)

@spec fly_to(String.t(), center(), integer(), keyword()) :: Phoenix.LiveView.JS.t()

Creates a JS command to fly the map to a specific location.

Examples

<button phx-click={MaplibreX.Components.Map.fly_to("my-map", [-74.5, 40], 12)}>
  Fly to NYC
</button>

With custom duration:

fly_to("my-map", [-74.5, 40], 12, duration: 3000)

@spec jump_to(String.t(), center(), integer(), keyword()) :: Phoenix.LiveView.JS.t()

Creates a JS command to jump the map to a specific location (no animation).

Examples

<button phx-click={MaplibreX.Components.Map.jump_to("my-map", [-74.5, 40], 12)}>
  Jump to NYC
</button>

Renders a MapLibre GL JS map component.

Attributes

• id (required) - Unique identifier for the map
• center - Map center coordinates as [longitude, latitude]. Defaults to [0, 0]
• zoom - Initial zoom level, fractional values allowed. Defaults to 10
• style - Map style URL or style object. Defaults to MaplibreX config
• min_zoom - Minimum zoom level. Optional
• max_zoom - Maximum zoom level. Optional
• min_pitch - Minimum pitch in degrees. Optional
• max_pitch - Maximum pitch in degrees, 0-85. Optional. MapLibre caps pitch at 60 by default and silently clamps anything above it, so a 3D terrain view that wants a steeper camera has to raise this
• bearing - Initial bearing (rotation). Defaults to 0
• pitch - Initial pitch (tilt). Defaults to 0
• bounds - Fit map to bounds [[west, south], [east, north]]. Optional
• max_bounds - Maximum bounds the map can be panned to. Optional
• interactive - Whether the map is interactive. Defaults to true
• attribution_control - Show attribution control. Defaults to true
• class - CSS classes for the map container
• testid - Test ID for the map element

Events

The map emits the following events to LiveView:

• map:moved - Fired when the map is moved (pan, zoom, rotate, pitch)
• map:clicked - Fired when the map is clicked
• map:loaded - Fired when the map finishes loading
• map:zoom_changed - Fired when zoom level changes
• map:error - Fired when an error occurs

Slots

• inner_block - Optional content to render inside the map container

Attributes

• id (:string) (required)
• center (:list) - Defaults to nil.
• zoom (:any) - number. Defaults to nil.
• style (:any) - Defaults to nil.
• min_zoom (:any) - number. Defaults to nil.
• max_zoom (:any) - number. Defaults to nil.
• min_pitch (:any) - number, degrees. Defaults to nil.
• max_pitch (:any) - number, degrees 0-85. Defaults to nil.
• bearing (:any) - number, degrees. Defaults to 0.
• pitch (:any) - number, degrees. Defaults to 0.
• bounds (:list) - Defaults to nil.
• max_bounds (:list) - Defaults to nil.
• interactive (:boolean) - Defaults to true.
• attribution_control (:boolean) - Defaults to true.
• class (:string) - Defaults to "maplibrex-map".
• testid (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block

@spec reset_north(String.t()) :: Phoenix.LiveView.JS.t()

Creates a JS command to reset the map's bearing to north.

@spec set_style(String.t(), String.t() | map()) :: Phoenix.LiveView.JS.t()

Creates a JS command to set the map style.

Examples

<button phx-click={MaplibreX.Components.Map.set_style("my-map", "new-style-url")}>
  Change Style
</button>

@spec zoom_in(String.t()) :: Phoenix.LiveView.JS.t()

Creates a JS command to zoom in.

@spec zoom_out(String.t()) :: Phoenix.LiveView.JS.t()

Creates a JS command to zoom out.