Location & Map Management
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
Location & Map Management is a core system within the Boda Cris project designed to handle the geographic coordination of wedding events. It provides administrators with tools to search for venues, select coordinates via an interactive map, and manage specific venue details such as addresses and directions. This system ensures that guests receive accurate navigation information through the public invitation interface.
The system is bifurcated into an administrative management interface (using Leaflet and OpenStreetMap) and a public-facing display (using Google Maps embeds and deep links). Data is persisted globally through a React Context API, allowing for real-time updates across the application.
Sources: src/components/admin/LocationPicker.jsx, src/components/invitation/Location.jsx, src/context/ContentContext.jsx
System Architecture & Data Flow
The location management architecture follows a centralized state pattern where geographical data is managed by the ContentContext and consumed by both admin and client components.
Geographical Data Model
The data structure for a location includes coordinate data for administrative mapping and descriptive data for guest navigation.
| Field | Type | Description |
|---|---|---|
lat | Number | Latitude of the venue for map centering and marker placement. |
lng | Number | Longitude of the venue. |
address | String | Human-readable address displayed to guests. |
venue | String | The name of the location (e.g., Hacienda Los Naranjos). |
mapUrl | String | A Google Maps embed URL used for the iframe in the invitation. |
directions | String | Optional textual instructions for arriving at the venue. |
Sources: src/components/admin/ContentEditor.jsx:368-390, src/components/admin/LocationPicker.jsx:136-141, src/context/ContentContext.jsx:138-143
Administrative Flow
The following diagram illustrates the process of updating a location within the Admin Panel:
The administrative workflow leverages the Nominatim API for forward and reverse geocoding, allowing users to find locations by name or by clicking coordinates on the Leaflet map.
Sources: src/components/admin/LocationPicker.jsx:40-60, src/components/admin/LocationPicker.jsx:110-130
Admin Interface: LocationPicker
The LocationPicker component serves as the primary interface for managing geographic data. It uses react-leaflet to provide an interactive map experience.
Key Components & Logic
- Search & Geocoding: Implements a debounced search using the Nominatim OpenStreetMap API to prevent excessive API calls.
- Reverse Geocoding: When a user clicks on the map, the
MapClickHandlertriggers a reverse lookup to find the nearest physical address. - Map Control: The
MapUpdatercomponent programmatically shifts the map view when coordinates are updated via search or current location detection. - Current Location: Utilizes the Browser Geolocation API to instantly center the map on the admin's current position.
Public Interface: Guest Navigation
The guest-facing Location and EventInfo components translate the stored coordinates and metadata into actionable navigation tools for invitees.
Map Rendering
The public invitation uses a standard iframe to render the location stored in location.mapUrl. This URL is typically a Google Maps Embed API link generated during the administrative setup.
External Navigation
To facilitate real-world travel, the system provides a deep-linking feature to the Google Maps native app or web interface.
// src/components/invitation/Location.jsx:8-11
const openMaps = () => {
const address = encodeURIComponent(location.address)
window.open(`https://www.google.com/maps/search/?api=1&query=${address}`, '_blank')
}
Event-Specific Locations
Beyond the primary venue, the EventInfo component displays specific locations for different segments of the wedding (e.g., Ceremony vs. Reception). Each event object contains its own venue and address strings, though these are typically managed as text within the ContentEditor.
Sources: src/components/invitation/Location.jsx:8-11, src/components/invitation/Location.jsx:45-55, src/components/invitation/EventInfo.jsx:44-84
Implementation Details
Technology Stack
The management system relies on several integrated libraries:
- Leaflet & React-Leaflet: Used for the interactive administrative map.
- Lucide React: Provides icons like
MapPin,Navigation, andSearch. - Framer Motion: Handles entry animations for the location cards.
- Nominatim (OSM): Powering the geocoding and search services.
Sources: package.json:15-18, src/components/admin/LocationPicker.jsx:1-6
Global State Methods
The ContentProvider exposes specific methods for location and event updates:
| Method | Source File | Description |
|---|---|---|
updateLocation(data) | ContentContext.jsx | Updates the primary venue coordinates and address. |
updateEvent(id, data) | ContentContext.jsx | Updates address/venue for specific sub-events. |
resetContent() | ContentContext.jsx | Restores default location values. |
Sources: src/context/ContentContext.jsx:138-144, src/context/ContentContext.jsx:110-115
Conclusion
Location & Map Management in Boda Cris provides a seamless bridge between administrative planning and guest navigation. By combining interactive Leaflet maps for admins with standardized Google Maps links for guests, the system ensures high technical accuracy for venue selection while maintaining maximum accessibility for wedding attendees across different devices.