# Map Facet

> Map-based geo-bounding-box facet with Map POI data inside the connected target loop.

<!-- Sources: src/Components/Facets/MapFacet/MapFacet.php; src/Components/Facets/MapPoi/MapPoi.php; src/Facets/GeoBbox/*; client/src/components/map-facet/runtime.ts; client/src/domains/facets/adapters/map-facet-adapter.ts; tests/e2e/components/facets/map-facet.spec.ts -->

# Map Facet

`Map Facet` filters a target by the visible map bounds. It sends a `geo_bbox` facet value and reads `Map POI` elements from the connected target loop.

## Authoring Structure

```text
Map Facet
Facet Target
└── loop slot
    └── Map POI
```

The map and target must share the same target ID.

## Map Facet Props

| Group | Prop | Default | Meaning |
| --- | --- | --- | --- |
| Settings | `target` | empty | Shared target ID. |
| Settings | `lat_meta_key` | `latitude` | Backend meta key for latitude. |
| Settings | `lng_meta_key` | `longitude` | Backend meta key for longitude. |
| Settings | `center_lat` | `0` | Initial map center latitude. |
| Settings | `center_lng` | `0` | Initial map center longitude. |
| Settings | `zoom` | `4` | Initial Leaflet zoom. |
| Settings | `min_zoom` | `2` | Minimum Leaflet zoom. |
| Settings | `max_zoom` | `18` | Maximum Leaflet zoom. |
| Settings | `tile_url` | empty | Optional custom tile layer URL. |
| Settings | `fit_bounds_on_filter` | `true` | Allows runtime to fit map bounds from filtered POIs. |
| Settings | `bbox_debounce_ms` | `300` | Delay before map movement updates the bbox value. |
| Styling | `class` | `ome-map-facet-root-default` | Map root class. |
| Styling | `bubble_class` | empty | Optional class added to generated cluster bubbles. |

## Map POI Props

| Group | Prop | Default | Meaning |
| --- | --- | --- | --- |
| Content | `value` | empty | Stable POI identifier. |
| Content | `lat` | empty | POI latitude. |
| Content | `lng` | empty | POI longitude. |
| Styling | `class` | empty | Optional class for the hidden POI carrier. |

## Runtime Notes

- `Map Facet` renders `data-ome-facet="geo_bbox"`.
- The bbox value serializes as `south,west,north,east`.
- `Map POI` is hidden DOM data, not visible listing content.
- POI hover and selected slots can provide marker popup content.
- Large responses can switch to lightweight coordinate-only POI data.

## Example

```text
Map Facet:
- target = stores
- lat_meta_key = store_lat
- lng_meta_key = store_lng

Facet Target:
- target = stores
- used_with_map = true

Map POI inside loop:
- value = current post ID or slug
- lat = current item store_lat
- lng = current item store_lng
```