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
Renders a geolocate control component.
Attributes
id(required) - Unique identifier for the controlmap_id(required) - ID of the map to attach toposition- 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 tofalseshow_accuracy_circle- Show a circle representing location accuracy. Defaults totrueshow_user_heading- Show user's heading/direction as they move. Defaults totruefit_bounds_options- Options for fitting map bounds when location is found. Map with keys likemaxZoom,padding
Events
geolocate:location_found- Fired when user's location is foundgeolocate:location_error- Fired when there's an error getting locationgeolocate:tracking_started- Fired when location tracking startsgeolocate:tracking_stopped- Fired when location tracking stopsgeolocate: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 tofalse.show_accuracy_circle(:boolean) - Defaults totrue.show_user_heading(:boolean) - Defaults totrue.fit_bounds_options(:map) - Defaults to%{}.