Map

Displays an interactive map powered by Leaflet. The Map widget is a container that holds Map Marker children. Each marker defines a point on the map, either by coordinates or by address.

Properties

Property	Type	Default	Description
height	text	'400px'	The map height. Any valid CSS value.
zoom	number	13	The default zoom level (1 = world, 18 = street level).
apiKey	text	''	Optional Google Maps API key for geocoding address-based markers. When empty, the free Nominatim (OpenStreetMap) geocoder is used.

Usage Modes

1. Direct Markers (static points)

Drop Map Marker widgets directly inside the Map. Each marker has its own coordinates or address.

Map (height: 500px, zoom: 12)
  └─ Map Marker (lat: 48.8566, lng: 2.3522, popup: "Paris")
  └─ Map Marker (lat: 51.5074, lng: -0.1278, popup: "London")

2. Repeater Markers (data-driven)

Place a Repeater inside the Map, with a Map Marker inside the Repeater. The marker props use expressions to pull lat/lng from each data row.

Map (height: 500px, zoom: 10)
  └─ Repeater (data pipeline: load "stores" table)
       └─ Map Marker (lat: {{row.lat}}, lng: {{row.lng}}, popup: {{row.name}})

This renders one marker per row in the data source.

3. Mixed

You can combine direct markers and repeater-driven markers inside the same Map.

Map (height: 600px)
  └─ Map Marker (mode: address, address: "Company HQ, New York", popup: "Main Office")
  └─ Repeater (data pipeline: load "branches")
       └─ Map Marker (lat: {{row.lat}}, lng: {{row.lng}}, popup: {{row.city}})

Geocoding

Markers using the address mode are geocoded at runtime in the browser.

• Without API key: Uses the free Nominatim geocoder from OpenStreetMap. Rate-limited to ~1 request per second. Best for small numbers of address markers.
• With API key: Uses the Google Geocoding API. Faster and more reliable for production use. Set the apiKey property on the Map widget.

Tips

• The map auto-fits bounds to show all markers. If there are no markers, it shows a default world view.
• The height property accepts any CSS value: 400px, 50vh, 100%, etc.
• For filtering locations by distance, use the Distance Filter transform node in your pipeline.
• Pair with a Text Input widget to let users enter location addresses.
• See also: Map Marker