Regsoft design system

Map

Renders an interactive Google Map with support for markers, info windows, custom icons, click events, polygons, and multiple map types.

Basic map

A simple map centred on Canberra with default settings. Requires only an id, center, and optional zoom.

Example

Markup

Source markup is unavailable in this environment. Markup extraction relies on debug_heex_annotations and the project source files, which are only present during development.

Markers with info windows

Add markers using the :marker slot. Each marker accepts a position and optional title. Inner content renders as a rich info window on click.

Example

Markup

Source markup is unavailable in this environment. Markup extraction relies on debug_heex_annotations and the project source files, which are only present during development.

Map types

The map_type attribute controls the base layer. Options are roadmap (default), satellite, hybrid, and terrain.

Satellite

Example

Markup

Source markup is unavailable in this environment. Markup extraction relies on debug_heex_annotations and the project source files, which are only present during development.

Hybrid

Example

Markup

Source markup is unavailable in this environment. Markup extraction relies on debug_heex_annotations and the project source files, which are only present during development.

Terrain

Example

Markup

Source markup is unavailable in this environment. Markup extraction relies on debug_heex_annotations and the project source files, which are only present during development.

Marker click events

Use on_click and on_click_value on a marker slot to push a LiveView event when the marker is clicked. The payload is sent to the server-side handle_event.

Example

Click a marker to see the event...

Markup

Source markup is unavailable in this environment. Markup extraction relies on debug_heex_annotations and the project source files, which are only present during development.

Polygons

Pass a list of polygon maps via the polygons attribute. Each polygon supports paths, strokeColor, strokeOpacity, strokeWeight, fillColor, and fillOpacity.

Example

Markup

Source markup is unavailable in this environment. Markup extraction relies on debug_heex_annotations and the project source files, which are only present during development.

Combined features

Markers, info windows, polygons, and events can be combined on a single map.

Example

Markup

Source markup is unavailable in this environment. Markup extraction relies on debug_heex_annotations and the project source files, which are only present during development.

Editable map

Set editable to show a drawing toolbar with Pan, Point and Polygon modes. Drop multiple points and draw a single polygon as independent layers; drag to reposition, and in Pan mode click a point to remove it. The map pushes the on_change event (default map_geometry_changed) on every edit, so the LiveView always holds the current geometry — ready to read on a button click.

Example

Markup

Source markup is unavailable in this environment. Markup extraction relies on debug_heex_annotations and the project source files, which are only present during development.