Map

Interactive map component for displaying locations and events. Uses OpenStreetMap tiles for rendering.

Basic Map

Map Loading...

Lat: 37.7749, Lng: -122.4194


          <.map latitude={37.7749} longitude={-122.4194} zoom={13} />

With Markers

Map Loading...

Lat: 40.7128, Lng: -74.006


          <.map
            latitude={40.7128}
            longitude={-74.0060}
            zoom={12}
            markers={[
              %{lat: 40.7128, lng: -74.0060, label: "New York"},
              %{lat: 40.7589, lng: -73.9851, label: "Times Square"}
            ]}
          />

Custom Size

Map Loading...

Lat: 51.5074, Lng: -0.1278


          <.map latitude={51.5074} longitude={-0.1278} zoom={10} width="600px" height="300px" />

Props

Prop	Type	Default	Description
latitude	float	-	Center latitude coordinate
longitude	float	-	Center longitude coordinate
zoom	integer	13	Zoom level (1-18)
markers	list	[]	List of marker maps with :lat, :lng, and optional :label
width	string	"100%"	Map width (CSS value)
height	string	"400px"	Map height (CSS value)

Note

The map component requires a JavaScript hook (MapHook) for full interactivity. For production use, consider integrating with Mapbox, Google Maps, or Leaflet.js for enhanced features.