# Main page with a map and pins A main page that shows all sub-pages on an interactive map. Each pin links to the page's detail view. Hover over a card and the map pin highlights; click a pin and the card scrolls into view. This is a killer pattern for anything geographic: - Property listings (this example) - Restaurants in a guide / food crawl - Tour stops - Multi-location businesses - Event venues - Job listings filtered by city It uses **Leaflet** (free, open-source, no API key) for the map and **OpenStreetMap** tiles. The pins come from each sub-page's `metadata.coordinates` field — set those once when you create the listings, and the map builds itself. ## Required metadata shape Each sub-page needs `metadata.coordinates` like this: ```json { "address": "123 Oak Street, Springfield", "price": 250000, "coordinates": { "lat": 39.78, "lng": -89.65 } } ``` You set this when you create or update the page metadata. See `property-listings.md` for the bulk-create pattern. ## The script This builds on the property listings example. It assumes you've already created a project with several sub-pages, each with `coordinates` in their metadata. ```python import requests API = "https://api.uat-beam.page" TOKEN = "" H = {"Authorization": f"Bearer {TOKEN}", "Content-Type": "application/json"} slug = "smith-estate-agency" main_html = """ Smith Estate Agency — Springfield Property

Smith Estate Agency

Springfield property · click a pin or a card

All listings

""" requests.put( f"{API}/projects/{slug}/pages/_root/files/index.html", headers=H, json={"content": main_html}, ) print(f"Done. Map is live at https://{slug}.uat-beam.page") ``` ## How it works 1. **`/cross_page_metadata.json`** is auto-generated by the platform. It contains all pages with their metadata, so all the coordinates are in one place. 2. **Leaflet** loads from a CDN — no API key, no signup, no cost. 3. **The Alpine `map` component** fetches `/cross_page_metadata.json` on init, builds the map, and drops a pin for each listing with coordinates. 4. **`fitBounds`** auto-zooms the map to include every pin. 5. **Hover/click sync:** mousing over a card opens the corresponding pin's popup; clicking a pin scrolls its card into view. Both directions of interaction without any backend. ## Variations - **Custom pin colours by category** — use `L.divIcon` with inline HTML/CSS, colour by `metadata.type` or `metadata.price` bracket. - **Filter visible pins** — add a `