MaplibreX.Components.GeolocateControl (MaplibreX v0.1.0)

Copy Markdown View Source

Geolocate control component for MapLibre maps in Phoenix LiveView.

This component adds a geolocate button that allows users to find their current location and optionally track their movement in real-time.

Examples

Basic geolocate control:

<.geolocate_control
  id="geolocate-1"
  map_id="my-map"
  position="top-right"
/>

With tracking enabled:

<.geolocate_control
  id="geolocate-1"
  map_id="my-map"
  position="top-right"
  track_user_location={true}
  show_accuracy_circle={true}
  show_user_heading={true}
/>

With custom fit bounds options:

<.geolocate_control
  id="geolocate-1"
  map_id="my-map"
  position="top-right"
  fit_bounds_options={%{maxZoom: 15, padding: 50}}
/>

Events

The geolocate control emits the following events to LiveView:

def handle_event("geolocate:location_found", %{"coords" => coords}, socket) do
  # coords = %{"latitude" => lat, "longitude" => lng, "accuracy" => acc}
  IO.inspect(coords, label: "User location found")
  {:noreply, socket}
end

def handle_event("geolocate:location_error", %{"code" => code, "message" => msg}, socket) do
  IO.inspect({code, msg}, label: "Geolocation error")
  {:noreply, socket}
end

def handle_event("geolocate:tracking_started", _params, socket) do
  IO.puts("Location tracking started")
  {:noreply, socket}
end

def handle_event("geolocate:tracking_stopped", _params, socket) do
  IO.puts("Location tracking stopped")
  {:noreply, socket}
end

def handle_event("geolocate:user_location_updated", %{"coords" => coords}, socket) do
  IO.inspect(coords, label: "User location updated")
  {:noreply, socket}
end

Summary

Functions

Renders a geolocate control component.

Functions

geolocate_control(assigns)

Renders a geolocate control component.

Attributes

  • id (required) - Unique identifier for the control
  • map_id (required) - ID of the map to attach to
  • position - Position of the control. One of: ["top-left", "top-right", "bottom-left", "bottom-right"]. Defaults to "top-right"
  • track_user_location - If true, the control will actively track user's location. Defaults to false
  • show_accuracy_circle - Show a circle representing location accuracy. Defaults to true
  • show_user_heading - Show user's heading/direction as they move. Defaults to true
  • fit_bounds_options - Options for fitting map bounds when location is found. Map with keys like maxZoom, padding

Events

  • geolocate:location_found - Fired when user's location is found
  • geolocate:location_error - Fired when there's an error getting location
  • geolocate:tracking_started - Fired when location tracking starts
  • geolocate:tracking_stopped - Fired when location tracking stops
  • geolocate:user_location_updated - Fired when user's location is updated (during tracking)

Attributes

  • id (:string) (required)
  • map_id (:string) (required)
  • position (:string) - Defaults to "top-right". Must be one of "top-left", "top-right", "bottom-left", or "bottom-right".
  • track_user_location (:boolean) - Defaults to false.
  • show_accuracy_circle (:boolean) - Defaults to true.
  • show_user_heading (:boolean) - Defaults to true.
  • fit_bounds_options (:map) - Defaults to %{}.