MaplibreX.Components.Marker (MaplibreX v0.1.0)

Copy Markdown View Source

Marker component for adding markers to MapLibre maps.

Examples

Basic marker:

<.marker
  id="marker-1"
  map_id="my-map"
  lng_lat={[-74.5, 40]}
/>

Styled marker with popup:

<.marker
  id="marker-nyc"
  map_id="my-map"
  lng_lat={[-74.5, 40]}
  color="red"
  scale={1.2}
  popup_text="New York City - The Big Apple"
/>

Draggable marker with events:

<.marker
  id="draggable-marker"
  map_id="my-map"
  lng_lat={@marker_position}
  draggable
/>

def handle_event("marker:drag_end", %{"markerId" => id, "lngLat" => lngLat}, socket) do
  {:noreply, assign(socket, marker_position: lngLat)}
end

Summary

Functions

marker(assigns)

Renders a marker on the map.

Functions

marker(assigns)

Renders a marker on the map.

Attributes

  • id (required) - Unique identifier for the marker
  • map_id (required) - ID of the map to add the marker to
  • lng_lat (required) - Marker position as [longitude, latitude]
  • color - Marker color (hex or named color). Defaults to "#3FB1CE"
  • scale - Marker scale. Defaults to 1
  • rotation - Marker rotation in degrees. Defaults to 0
  • draggable - Whether the marker can be dragged. Defaults to false
  • anchor - Marker anchor point. One of: "center", "top", "bottom", "left", "right", etc.
  • offset - Pixel offset as [x, y]
  • pitch_alignment - How marker is aligned to pitch. One of: "map", "viewport", "auto"
  • rotation_alignment - How marker is aligned to rotation. One of: "map", "viewport", "auto"

Events

The marker emits the following events:

  • marker:clicked - Fired when the marker is clicked
  • marker:drag_start - Fired when drag starts (if draggable)
  • marker:dragging - Fired while dragging
  • marker:drag_end - Fired when drag ends

Slots

  • popup - Optional popup content to display when marker is clicked

Attributes

  • id (:string) (required)
  • map_id (:string) (required)
  • lng_lat (:list) (required)
  • color (:string) - Defaults to "#3FB1CE".
  • scale (:float) - Defaults to 1.0.
  • rotation (:integer) - Defaults to 0.
  • draggable (:boolean) - Defaults to false.
  • anchor (:string) - Defaults to nil.
  • offset (:list) - Defaults to nil.
  • pitch_alignment (:string) - Defaults to "auto".
  • rotation_alignment (:string) - Defaults to "auto".
  • popup_text (:string) - Defaults to nil.
  • popup_html (:string) - Defaults to nil.
  • Global attributes are accepted.